@charset "UTF-8";

:root {
  --main-color: #f37021;
  --main-color-rgb: 243, 112, 33;
  --secondary-color: #e9e9e9;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
}

.text-black {

  color: #000000 !important;

}



a.text-black:hover {

  color: black !important;

}



.bg-black {

  background-color: #000000 !important;

}



.btn-bg-black {

  background-color: #000000;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-black:hover {

  background-color: black;

}



.border-black {

  border-color: #000000 !important;

}



.text-light-brown {

  color: #f6f5f3 !important;

}



a.text-light-brown:hover {

  color: #cac4b9 !important;

}



.bg-light-brown {

  background-color: #f6f5f3 !important;

}



.btn-bg-light-brown {

  background-color: #f6f5f3;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-light-brown:hover {

  background-color: #ebe9e4;

}



.border-light-brown {

  border-color: #f6f5f3 !important;

}



.text-main {

  color: var(--main-color) !important;

}



a.text-main:hover {

  color: var(--main-color) !important;

}



.bg-main {

  background-color: var(--main-color) !important;

}



.btn-bg-main {

  background-color: var(--main-color);

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-main:hover {

  background-color: #8fb15d;
  background-color: var(--orange-400);

}



.border-main {

  border-color: var(--main-color) !important;

}



.text-gray-6 {

  color: #757575 !important;

}



a.text-gray-6:hover {

  color: #424242 !important;

}



.bg-gray-6 {

  background-color: #757575 !important;

}



.btn-bg-gray-6 {

  background-color: #757575;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-gray-6:hover {

  background-color: #686868;

}



.border-gray-6 {

  border-color: #757575 !important;

}



.text-gray-8 {

  color: #9b9b9b !important;

}



a.text-gray-8:hover {

  color: #686868 !important;

}



.bg-gray-8 {

  background-color: #9b9b9b !important;

}



.btn-bg-gray-8 {

  background-color: #9b9b9b;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-gray-8:hover {

  background-color: #8e8e8e;

}



.border-gray-8 {

  border-color: #9b9b9b !important;

}



.text-gray-9 {

  color: #b1b1b1 !important;

}



a.text-gray-9:hover {

  color: #7e7e7e !important;

}



.bg-gray-9 {

  background-color: #b1b1b1 !important;

}



.btn-bg-gray-9 {

  background-color: #b1b1b1;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-gray-9:hover {

  background-color: #a4a4a4;

}



.border-gray-9 {

  border-color: #b1b1b1 !important;

}



.text-share-color {

  color: #f96d4c !important;

}



a.text-share-color:hover {

  color: #d82f07 !important;

}



.bg-share-color {

  background-color: #f96d4c !important;

}



.btn-bg-share-color {

  background-color: #f96d4c;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-share-color:hover {

  background-color: #f85933;

}



.border-share-color {

  border-color: #f96d4c !important;

}



.text-transparent {

  color: transparent !important;

}



a.text-transparent:hover {

  color: rgba(0, 0, 0, 0) !important;

}



.bg-transparent {

  background-color: transparent !important;

}



.btn-bg-transparent {

  background-color: transparent;

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-transparent:hover {

  background-color: rgba(0, 0, 0, 0);

}



.border-transparent {

  border-color: transparent !important;

}



.text-m_navitem {

  color: #358453 !important;
  color: var(--orange-700) !important;

}



a.text-m_navitem:hover {

  color: #183b25 !important;
  color: var(--orange-900) !important;

}



.bg-m_navitem {

  background-color: #358453 !important;
  background-color: var(--orange-700) !important;

}



.btn-bg-m_navitem {

  background-color: #358453;
  background-color: var(--orange-700);

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.btn-bg-m_navitem:hover {

  background-color: #2e7248;
  background-color: var(--orange-800);

}



.border-m_navitem {

  border-color: #358453 !important;
  border-color: var(--orange-700) !important;

}



@font-face {

  font-family: "EBGaramond";

  src: url("../lib/font/EBGaramond-Medium.ttf");

}



html,
body {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "Microsoft JhengHei", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}



input,
textarea {

  font-size: initial;

}



a:hover {

  text-decoration: none;

}



ul {

  padding: 0;

}



ul li {

  list-style: none;

}



img {

  max-width: 100%;

  height: auto;

  -ms-flex-item-align: start;

  align-self: flex-start;

}



.custom-control-input:checked~.custom-control-label::before {

  border-color: var(--secondary-color);

  background-color: var(--secondary-color);

}



.text_indent {

  text-indent: -1rem;

  margin-left: 1rem;

}



.text-decoration-line {

  -webkit-text-decoration-line: line-through;

  text-decoration-line: line-through;

}



.large-font {

  font-size: 1.5em;

}



.small-font {

  font-size: 0.7em;

}



.letter-1 {

  letter-spacing: 1px;

}



.letter-2 {

  letter-spacing: 2px;

}



.line-height2 {

  line-height: 2;

}



.grayscale {

  filter: grayscale(1);

  -webkit-filter: grayscale(1);

  -ms-filter: grayscale(1);

  -moz-filter: grayscale(1);

  -o-filter: grayscale(1);

}



.font-weight-5 {

  font-weight: 500;

}



.border-dashed {

  border-width: 1.5px;

  border-style: dashed;

  border-color: rgba(var(--main-color-rgb), 0.5);

}



.title_border {

  position: relative;

}



.title_border .text {

  z-index: 2;

}



.title_border:after {

  content: '';

  width: 100%;

  height: 1px;

  position: absolute;

  top: 50%;

  left: 0;

  border-bottom: 1px solid #757575;

  z-index: 1;

}



.table-rwd td {

  vertical-align: middle;

}



.transform {

  -webkit-transform: rotate(-0.5turn);

  /*為Chrome/Safari*/

  /*為Firefox*/

  /*為IE*/

  /*為Opera*/

  transform: rotate(-0.5turn);

}



.transform-mirror {

  -webkit-transform: scaleX(-1);

  transform: scaleX(-1);

}



[data-hover="shadow"] {

  -webkit-transition: all 0.1s;

  transition: all 0.1s;

  cursor: pointer;

}



[data-hover="shadow"]:hover {

  -webkit-filter: drop-shadow(2px 4px 6px rgba(50, 50, 50, 0.5));

  filter: drop-shadow(4px 4px 4px rgba(50, 50, 50, 0.5));

}



/* safari */

/* sweetalert2 custom style */

.alert_reg {

  padding: 0.25rem;

  -webkit-filter: drop-shadow(2px 4px 6px #000000);

  filter: drop-shadow(2px 4px 6px #000000);

}



.alert_reg .title {

  font-size: 1.4em;

  font-weight: 400;

}



.alert_reg .close {

  font-size: 1.5em;

  color: rgba(50, 50, 50, 0.8);

}



.alert_reg .cont_text {

  margin-left: 0;

  margin-bottom: 0;

  font-size: 1rem;

  font-weight: 300;

  text-align: center;

}



.btn_shop {

  height: 36px;

  color: #757575;

  font-size: 0.9rem;

  font-weight: 400;

  padding: .375rem 1.2rem;

  background-color: transparent;

  border: 1px solid #757575;

  border-radius: 24px;

  line-height: 18px;

}



.btn_shop:hover {

  background-color: var(--main-color);

  border: 1px solid var(--main-color);

  color: #ffffff;

}



.btn_round {

  min-width: 72px;

  height: 36px;

  border-radius: 24px;

  line-height: 18px;

}



.btn-outline {

  border: 1px solid #cbcbcb !important;

  color: #b1b1b1 !important;

}



.btn-outline:hover,
.btn-outline.act {

  color: #323232;

  background-color: #ffffff;

  -webkit-box-shadow: 0px 1px 3px #b1b1b1;

  box-shadow: 0px 1px 3px #b1b1b1;

}



.btn-outline-main {

  border: 1px solid #cbcbcb;

  color: #323232;

}



.btn-outline-main:hover,
.btn-outline-main.act {

  background-color: var(--main-color);

  color: #ffffff;

  border: 1px solid #b3ca90;
  border: 1px solid var(--orange-300);

}



.icon_btn {

  width: 3rem;

  height: 3rem;

  font-size: 1.2rem;

  border-radius: 50%;

  padding: 0;

}



.icon_btn:hover {

  background-color: rgba(var(--main-color-rgb), 0.8);

  color: #ffffff;

}



.btn-defult {

  background-color: #e5e5e5;

  border: #e5e5e5;

  color: #323232;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.btn-defult:hover {

  background-color: var(--main-color);

  border: var(--main-color);

  color: #ffffff;

  -webkit-filter: drop-shadow(2px 2px 2px rgba(50, 50, 50, 0.3));

  filter: drop-shadow(2px 2px 2px rgba(50, 50, 50, 0.3));

}



.btn-main {

  cursor: pointer;

  background-color: transparent;

  border: 1px solid #b1b1b1;

  color: rgba(50, 50, 50, 0.9);

  -webkit-transition: all 0.15s;

  transition: all 0.15s;

}



.btn-main:hover {

  background-color: var(--main-color);

  border: 1px solid var(--main-color);

  color: #ffffff;

}



.btn-main-2 {

  cursor: pointer;

  background-color: var(--main-color);

  border: 1px solid #b1b1b1;

  color: #ffffff;

  -webkit-transition: all 0.15s;

  transition: all 0.15s;

}



.btn-main-2:hover {

  background-color: #67823f;
  background-color: var(--orange-600);

  border: 1px solid var(--main-color);

  color: #ffffff;

}



/*

.btn_thumbs{

    background-color: $like-color;

    color: $white;

    border: 1px solid $like-color;

    cursor: pointer;

    transition: all 0.5s;

    &:hover{

        background-color: darken($like-color,15%);

    }

}

.btn_twitter{

    background-color: $twitter;

    color: $white;

    border: 1px solid $twitter;

    cursor: pointer;

    transition: all 0.5s;

    &:hover{

        background-color: darken($twitter,15%);

    }

}

.btn_share{

    background-color: $share-color;

    color: $white;

    border: 1px solid $share-color;

    cursor: pointer;

    transition: all 0.5s;

    &:hover{

        background-color: darken($share-color,15%);

    }

}*/

.btn_facebook,
.btn_google,
.bg_line {

  color: #ffffff;

  cursor: pointer;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.btn_facebook:hover,
.btn_google:hover,
.bg_line:hover {

  color: #ffffff;

  -webkit-filter: drop-shadow(2px 2px 2px #757575);

  filter: drop-shadow(2px 2px 2px #757575);

}



.btn_facebook {

  background-color: #3b5999;

}



.btn_facebook:hover {

  background-color: #4264ab;

}



.btn_google {

  background-color: #dd482f;

}



.btn_google:hover {

  background-color: #e15b45;

}



.bg_line {

  background-color: #00bd45;
  background-color: var(--orange-500);

}



.bg_line:hover {

  background-color: #00d74e;
  background-color: var(--orange-400);

}



.btns_num {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  position: relative;

}



.btns_num input.text {

  height: 2.2rem;

  max-width: 5.4rem;

  width: 100%;

  text-align: center;

  margin: 0 10px;

}



.btns_num .plus,
.btns_num .minus {

  cursor: pointer;

  font-size: 1.4rem;

  color: #f0bd63;

  border: 0;

  background-color: transparent;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.btns_num .plus:hover,
.btns_num .minus:hover {

  color: #eca934;

}



.btn_order {

  background-color: #9b9b9b;

  color: #ffffff;

}



.btn_order:hover {

  background-color: #f96d4c;

  color: #ffffff;

}



.custom-select {

  background-color: rgba(255, 255, 255, 0.2);

}



.btn_colse {

  color: #f0bd63;

  border: 0;

  background-color: transparent;

  font-size: 1.2rem;

  cursor: pointer;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.btn_colse:hover {

  color: #f7451b;

}



.table-responsive .btn_icon {

  max-width: 40px;

}



.table-responsive .btn_icon .fa-shopping-cart {

  margin-left: -2px;

}



.comfirm_table tr td {

  padding: 0.25rem 0.75rem;

}



.comfirm_table tr td:nth-child(odd) {

  width: 150px;

}



.comfirm_table tr th {

  padding: 0.25rem 0.75rem;

}



table.table .bg-light-brown {

  background-color: #f1f1f1 !important;

}



/* .countdown_card_area {

  min-width: 770px;

  max-width: 770px;

}


@media (min-width: 1095px) {
  #home_717 .countdown_card_area.mr-15 {
    width: calc(100% - 300px - 15px);
  }

  #home_717 .promotion_card_area {
    width: 300px;
  }
}
 */

@media (min-width: 1200px) {
  #home_717 .countdown_card {
    width: 100%;
  }
}

#home_717 .countdown_card_area.mr-15 {
  /* margin-right: 0 !important;
  width: 100% !important; */
  /* max-width: unset; */
  min-width: unset;
}

#home_717 .promotion_card_area {
  /* width: 100% !important; */
  /* max-width: unset; */
  min-width: unset;
}




.countdown_card {

  overflow: hidden;

  border-color: var(--main-color);

}



.countdown_card .countdown_promotion {

  right: 5px;

}



.countdown_card .card-header {

  padding: 0.75rem 0.75rem;

  background-color: transparent;

}



.countdown_card .label {

  height: 60px;

  font-size: 25px;

  color: rgba(255, 255, 255, 0.8);

  line-height: 60px;

  position: relative;

}



.countdown_card .label .text-warning {

  font-size: 75%;

  color: #fff200 !important;

}



.countdown_card .p_info_area {

  background-image: url("../image/active/promotion.jpg");

  background-size: cover;

  background-position: center center;

  padding: 20px;
padding-bottom: 56%;
}



.countdown_card .p_info {

  background-color: rgba(255, 255, 255, 0.75);

  padding: 15px;

}



.countdown_card .p_info .text-danger {

  font-size: 1.1em;

}



.countdown_card .p_info .title {

  color: #4c602e;
  color: var(--orange-800);

  text-align: left;

  margin-bottom: 0;

  font-size: 1.4em;

  font-weight: 500;

}



.countdown_card .p_info .sub_title {

  color: #4c602e;
  color: var(--orange-800);

  font-size: 1.4em;

  margin-bottom: 10px;

}



.countdown_card .p_info .text {

  color: #757575;

  font-size: 0.9em;

  word-break: break-all;

}



.countdown_card .p_info .price {

  font-size: 1.9rem;

}



.countdown_card .p_info .img {

  -webkit-box-shadow: 1px 2px 5px rgba(50, 50, 50, 0.5);

  box-shadow: 1px 2px 5px rgba(50, 50, 50, 0.5);

}



.countdown_card .favorite {

  background-color: rgba(255, 255, 255, 0.8);

  color: var(--main-color);

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.countdown_card .favorite:hover {

  color: #ffffff;

  background-color: var(--main-color);

}



.act_card {

  min-height: 450px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

}



.act_card .bg {

  background-size: cover;

  background-position: center bottom;

  background-repeat: no-repeat;

  -webkit-box-flex: 1;

  -ms-flex: 1;

  flex: 1;

}



.act_card .logo img {

  width: auto;

}



.act_card .discount p {

  line-height: 5rem;

}



.act_card .gradient_text {

  background: radial-gradient(circle, rgba(45, 30, 33, 0.5), #2d1e21);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  -webkit-box-decoration-break: clone;

  box-decoration-break: clone;

  text-shadow: none;

  font-weight: 700;

}



.card {

  border-radius: 0;

}



.card-header {

  background-color: transparent;

  border-color: transparent;

}



.p_card {

  padding: 20px 0;

  background-color: #ffffff;

}



.p_card .card-img-overlay {

  display: none;

  background-color: rgba(246, 245, 243, 0.92);

}



.p_card .icon_btn {

  border: 1px solid #9b9b9b !important;

}



.p_card .icon_btn:hover {

  border: 1px solid var(--main-color) !important;

}



.p_card .ribbon {

  display: none;

}



.p_card.discount {

  overflow: hidden;

}



.p_card.discount .discount_text {

  width: 60%;

  height: 40px;

  line-height: 40px;

  text-align: center;

  position: absolute;

  top: -40px;

  right: -80px;

  -webkit-transform-origin: left center;

  transform-origin: left center;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}



.p_card.discount .ribbon {

  display: block;

  position: absolute;

  right: -5px;

  top: -5px;

  z-index: 1;

  overflow: hidden;

  width: 93px;

  height: 93px;

  text-align: right;

}



.p_card.discount .ribbon span {

  text-transform: uppercase;

  text-align: center;

  font-weight: bold;

  line-height: 32px;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

  width: 125px;

  display: block;

  -webkit-box-shadow: 0 3px 10px -5px black;

  box-shadow: 0 3px 10px -5px black;

  position: absolute;

  top: 17px;

  right: -29px;

}



.p_card.discount .ribbon_icon {

  width: 100%;

  position: absolute;

  top: 0;

  z-index: 2;

}



.p_card .ribbon_icon {

  position: absolute;

  width: 100%;

  top: 0;

  right: 0;

  z-index: 2;

}



.p_card:hover {

  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #ffffff;

  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #ffffff;

  border-color: #ffffff;

}



.p_card:hover .card-img-overlay {

  display: block;

}



.p_card .info {

  text-align: center;

}



.p_card .info p {

  margin-bottom: 0;

}



.p_card .info .brand,
.p_card .info .p_name {

  color: #000000;

  font-weight: 400;

  font-size: 1rem;

}



.p_card .info .p_name {

  margin-bottom: 8px;

}



.p_card .info .capacity {

  color: #b1b1b1;

  font-size: 0.85rem;

  margin-bottom: 8px;

}



.p_card .info .p_price {

  font-size: 1.4rem;

  margin-bottom: 10px;

}



.p_card .info .point_img {

  max-width: 30px;

  margin-right: 0.3rem;

  margin-top: -4px;

}



.p_card .info .point {

  font-size: 0.8rem;

  padding-top: 0.25rem;

  line-height: 36px;

  color: #67823f;
  color: var(--orange-600);

}



.p_card .info .btn-sm {

  background-color: transparent;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.p_card .info .btn-sm .hover {

  display: none;

}



.p_card .info .btn-sm .usually {

  display: block;

}



.p_card .info .btn-sm img {

  max-width: 2rem;

}



.p_card .info .btn-sm:hover .hover {

  display: block;

}



.p_card .info .btn-sm:hover .usually {

  display: none;

}



.p_card .info .p_list_text,
.p_card .info .brand_list,
.p_card .info .list_btn {

  display: none;

}



.p_card_list {

  max-width: 100%;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -ms-flex-direction: row;

  flex-direction: row;

}



.p_card_list .img {

  -webkit-box-flex: 40%;

  -ms-flex: 40%;

  flex: 40%;

  max-width: 40%;

  text-align: center;

}



.p_card_list .img img {

  max-width: 168px;

}



.p_card_list .info {

  -webkit-box-flex: 60%;

  -ms-flex: 60%;

  flex: 60%;

  max-width: 60%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -ms-flex-pack: distribute;

  justify-content: space-around;

  padding: 0 10px;

}



.p_card_list .info .keep_icon {

  -webkit-box-pack: left !important;

  -ms-flex-pack: left !important;

  justify-content: left !important;

  -webkit-box-ordinal-group: 4;

  -ms-flex-order: 3;

  order: 3;

}



.p_card_list .info .brand {

  display: none;

}



.p_card_list .info .p_name {

  text-align: left;

  -webkit-box-ordinal-group: 3;

  -ms-flex-order: 2;

  order: 2;

}



.p_card_list .info .capacity {

  text-align: left;

  -webkit-box-ordinal-group: 5;

  -ms-flex-order: 4;

  order: 4;

}



.p_card_list .info .p_price {

  text-align: left;

  -webkit-box-ordinal-group: 6;

  -ms-flex-order: 5;

  order: 5;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}



.p_card_list .info .p_point {

  -webkit-box-pack: left !important;

  -ms-flex-pack: left !important;

  justify-content: left !important;

  -webkit-box-ordinal-group: 8;

  -ms-flex-order: 7;

  order: 7;

}



.p_card_list .info .list_btn {

  display: block;

  text-align: right;

  -webkit-box-ordinal-group: 9;

  -ms-flex-order: 8;

  order: 8;

}



.p_card_list .info .p_list_text {

  color: #b5b5b5;

  letter-spacing: 1px;

  text-align: start;

  -webkit-box-ordinal-group: 7;

  -ms-flex-order: 6;

  order: 6;

}



.p_card_list .card-img-overlay {

  -webkit-box-flex: 40%;

  -ms-flex: 40%;

  flex: 40%;

  max-width: 40%;

}



.p_card_list .card-img-overlay button.btn-main {

  display: none;

}



.p_card_e {

  padding: 8px 15px;

  background-color: transparent;

}



.p_card_e .card-img-overlay {

  z-index: 4;

  display: none;

}



.p_card_e:hover {

  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #ffffff;

  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #ffffff;

  border-color: #ffffff;

}



.p_card_e:hover .card-img-overlay {

  display: block;

}



.p_card_e .img {

  max-width: 100px;

}



.p_card_e .info {

  text-align: center;

  font-size: 0.9rem;

  padding: 15px 0;

}



.p_card_e .info .p_price {

  font-size: 1.2rem;

}



.p_card_e .title {

  font-size: 0.8em !important;

}



.p_card_e .price {

  color: #bc2c3d;

}



.info_swiper_card .card-header {

  color: #323232;

  border-radius: 0;

  padding: 0.8rem 1.25rem;

}



.info_swiper_card .card-img-top {

  border-top-left-radius: calc(1.25rem - 1px);

  border-top-right-radius: calc(1.25rem - 1px);

  overflow: hidden;

}



.info_swiper_card .card-img-top img {

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



.info_swiper_card:hover .card-img-top img {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}



.info_swiper_card.read .card-header {

  background-color: #d7e3c5;
  background-color: var(--orange-100);

}



.info_swiper_card.question .card-header {

  background-color: #d0e0e8;

}



.info_swiper_card.video .card-header {

  background-color: #e7d8e7;

}



.news_box .news_header {

  background-color: #e7d8e7;

  padding: 0.8rem 1.25rem;

  border-radius: 0;

}



.news_box .news_item {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  font-size: 1.05rem;

  border-bottom: 1px dashed #9b9b9b;

  margin-bottom: 0;

  padding: 1rem 0;

}



.news_box .news_item p {

  white-space: normal;

}



.news_box .news_item .data {

  margin-left: auto;

  color: #757575;

  font-size: 0.9em;

}



.card_hover:hover {

  -webkit-box-shadow: 4px 6px 20px 0px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #ffffff;

  box-shadow: 4px 6px 20px 0px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #ffffff;

  border-color: #ffffff;

}



.card_hover:hover .card-img-overlay {

  display: block;

}



@media (max-width: 767px) {

  .p_card .info .point {

    width: 100%;

  }

}



.swiper_prev,
.swiper_next {

  position: absolute;

  top: 50%;

  z-index: 10;

  margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);

}



.swiper_next {

  right: 0px;

}



.carousel {

  height: calc(50vh - 88px);

  min-height: 600px;

  background-image: url("../image/background/bg-slider.jpg");

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;

}



.carousel .bg-img {

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;

}



.carousel .title {

  font-size: 3.5rem;

  letter-spacing: 3px;

  font-family: 'EBGaramond';

}



.carousel .sub_title {

  font-size: 1.8rem;

  letter-spacing: 2px;

}



.carousel .text {

  letter-spacing: 2px;

  margin-bottom: 30px;

}



.carousel .swiper-button-prev,
.carousel .swiper-button-next {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid #9b9b9b;

}



.carousel .swiper-button-prev:after,
.carousel .swiper-button-next:after {

  font-size: var(--swiper-navigation-size)-10px;

  color: #9b9b9b;

}



.swiper_btn {

  width: 30px;

  height: 30px;

  cursor: pointer;

  text-align: center;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  background-color: transparent;

}



.swiper_btn:hover {

  background-color: rgba(255, 255, 255, 0.8);

}



.swiper-container .hide {

  opacity: 0;

}



.swiper-button-next,
.swiper-button-prev {

  -webkit-transition: opacity 0.5s;

  transition: opacity 0.5s;

}



#brans_prev,
#brans_next {

  height: 60px;

  line-height: 50px;

  margin-top: -30px;

  background-color: rgba(155, 155, 155, 0.8);

  padding: 5px 10px;

  color: #ffffff;

  cursor: pointer;

}



#brans_prev:hover,
#brans_next:hover {

  background-color: #9bb96e;
  background-color: var(--orange-400);

}



.swiper-container {

  --swiper-preloader-color: #ccc;

  /* 单独设置预加载圆圈的颜色 */

}



.flip-clock-wrapper {

  margin: 0;

}



.flip-clock-wrapper ul {

  width: 40px;

  height: 60px;

  font-size: 50px;

  line-height: 60px;

  margin: 0 3px;

}



.flip-clock-wrapper ul li {

  line-height: 60px;

}



.flip-clock-wrapper ul li a div div.inn {

  font-size: 50px;

  background-color: var(--main-color);

  color: #ffffff;

  text-shadow: 0 1px 2px #313d1e;
  text-shadow: 0 1px 2px var(--orange-900);

}



.flip-clock-wrapper .flip {

  -webkit-box-shadow: none;

  box-shadow: none;

}



.flip-clock-dot {

  background-color: #757575;

  -webkit-box-shadow: none;

  box-shadow: none;

}



.flip-clock-dot.top {

  width: 8px;

  height: 8px;

  top: 10px;

}



.flip-clock-dot.bottom {

  width: 8px;

  height: 8px;

  bottom: 10px;

}



.flip-clock-divider {

  height: 60px;

}



.flip-clock-divider .flip-clock-label {

  color: var(--main-color);

}



.flip-clock-divider.hours {

  position: relative;

  width: 60px;

}



.flip-clock-divider.hours:after {

  content: '天 |';

  font-size: 25px;

  color: #9b9b9b;

  line-height: 90px;

}



.flip-clock-divider.hours .flip-clock-dot {

  display: none;

}



header .tab_content .content {

  width: 100%;

  background-color: white;

  padding-top: 40px;

}



header .tab_content a {

  color: #323232;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



header .tab_content a:hover {

  color: var(--main-color);

}



header .logo {

  min-width: 150px;

  max-width: 225px;

}



header .slogan {

  min-width: 100px;

  max-width: 300px;

}



header .nav_area {

  min-height: 68px;

  margin-top: -2rem;

}



header .member_area .btn-sm {

  font-size: 0.75rem;

}



#history_content .toolbox {

  max-height: calc(90vh - 100px);

  overflow-y: scroll;

}



#brans_main {

  max-height: calc(100vh - 200px);

}



#brans_main .brans_item a {

  display: block;

  max-width: 150px;

  margin: 0 auto;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  -webkit-filter: opacity(50%);

  filter: opacity(50%);

}



#brans_main .brans_item a:hover {

  -webkit-filter: opacity(100%);

  filter: opacity(100%);

}



nav .nav-item a {

  color: #323232;

}



nav .nav-item a:hover,
nav .nav-item a.act {

  color: var(--main-color);

}



.tool_area,
.left_area {

  position: fixed;

  top: calc(123px + 1.2rem);

  z-index: 99;

}



.tool_area {

  width: calc(30px + 1rem);

  right: 0;

}



.tool_area .tool_nav {

  width: 100%;
      padding: 0 !important;

}



.tool_area .tool_nav .nav-item {

  border-bottom: 1px solid #ffffff;

  padding: 1rem 0;

}



.tool_area .tool_nav .nav-item:nth-last-child(1) {

  border: 0;

}



.tool_area .tool_content {

  min-width: 350px;

  position: absolute;

  top: 0;

  right: calc(30px + 1.5rem);

}



.tool_area .tool_content .search {

  height: 40px;

  position: relative;

}



.tool_area .tool_content .search button.btn {

  height: 40px;

  position: absolute;

  top: 0;

  right: 0;

}



.tool_area .tool_content .p_list {

  max-height: 350px;

  overflow-y: scroll;

}



.left_area {

  min-width: 50px;

  max-width: calc(110px + 1rem);

  padding: 0 1rem;

}



#set_content .img {

  max-width: 2rem;

  margin-right: 0.5rem;

}



.nav_item {

  border-bottom: 1px solid rgba(50, 50, 50, 0.2);

}



.nav_item .lebal {

  width: 100%;

}



.nav_item a {

  width: 100%;

  display: inline-block;

  padding: 10px 0;

  color: #323232;

  letter-spacing: 2px;

}



.nav_item a.act {

  color: var(--main-color);

}



.nav_item a:hover {

  color: var(--main-color);

}



.nav_item.msg a {

  -webkit-box-pack: start !important;

  -ms-flex-pack: start !important;

  justify-content: start !important;

}



.nav_item.msg .msg_text {

  width: 30px;

  height: auto;

  text-align: center;

  background-image: url("../image/icon/oval.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center center;

}



.sub_content {

  display: none;

}



.sub_item {

  border-bottom: 1px solid rgba(50, 50, 50, 0.2);

  font-weight: 400;

}



.sub_item:nth-last-child(1) {

  border-bottom: 0;

}



.sub_item li {

  border-bottom: 1px solid rgba(50, 50, 50, 0.2);

  font-weight: 200;

}



.sub_item li:nth-last-child(1) {

  border-bottom: 0;

}



.community_item {

  width: 20%;

  min-width: 65px;

  max-width: 100px;

}



#cart_icon {

  position: relative;

}



#cart_icon .num {

  width: 20px;

  height: 20px;

  position: absolute;

  top: 5px;
  right: 0px;

  background-color: var(--main-color);

  text-align: center;

  font-size: 13.33333px;

}



#cart_icon .dropdown {

  right: 0;

  top: 40px;

}



#cart_icon .price {

  color: #759347;
  color: var(--orange-600);

}



.section.color {

  background-color: #f6f5f3;

}



.section .title {

  font-size: 1.6rem;

  text-align: center;

}



.section .section_header {

  position: relative;

}



.section .section_header:after {

  content: '';

  width: 100%;

  height: 1px;

  position: absolute;

  top: calc(50% - 6px);

  z-index: 1;

}



.promotion .title {

  color: #3c687d;

  z-index: 2;

}

.promotion .title a {
  color: #4c602e;
  color: var(--orange-800);
}


.promotion .title span.font-weight-light {

  color: rgba(60, 104, 125, 0.6);

}



.promotion #promotion_card {

  margin-left: 0;

  margin-right: auto;

}



.promotion #promotion_card .swiper-slide {

  padding: 0 7.5px;

}



.promotion .section_header:after {

  background-color: #3c687d;

}



.promotion .flip-clock-label {

  display: none !important;

}



.collect:after {

  z-index: 3;

  bottom: -80px;

}



.collect .title {

  color: #475a2c;
  color: var(--orange-800);

}



.collect .title span.font-weight-light {

  color: rgba(71, 90, 44, 0.6);
  color: rgba(194, 65, 12, 0.6);

}



.collect .section_header .icon {

  position: relative;

}



.collect .section_header .icon:after {

  content: '';

  width: 100%;

  height: 1px;

  position: absolute;

  bottom: 35%;

  z-index: 1;

  background-color: rgba(71, 90, 44, 0.6);
  background-color: rgba(194, 65, 12, 0.6);

}



.collect .section_header .icon .img {

  z-index: 2;

  background-color: #f6f5f3;

}



.collect .section_header .btn_round {

  height: auto;

}



.collect .section_header .label_icon {

  max-width: 180px;

  width: 100%;

}



.hot::before {

  top: -80px;

  z-index: 3;

}



.hot::after {

  bottom: -80px;

}



.hot div:first-child {

  z-index: 4;

}



.hot .label .icon {

  background-color: #ffffff;

  max-width: 4rem;

}



.hot .label p {

  margin-bottom: 0;

  line-height: 3.5rem;

}



.hot .label .sw_btns {

  position: absolute;

  right: 1rem;

  bottom: 1.5rem;

}



.hot .hot_item .label:after {

  content: '';

  position: absolute;

  width: 100%;

  height: 1px;

  top: calc(50% + 1rem);

  right: 0;

}



.hot .p_recom .label:after {

  background-color: #f0bd63;

}



.hot .p_green .label:after {

  background-color: #eea7d8;

}



.hot .p_new .label:after {

  background-color: var(--main-color);

}



.information {

  padding-bottom: 2.5rem;

}



.information .title {

  color: #f0bd63;

}



.information .title span.font-weight-light {

  color: rgba(240, 189, 99, 0.6);

}



.information .section_header {

  padding: 3rem 0 3rem 0;

}



.information .section_content {

  padding-bottom: 1.5rem;

}



.banner_bottom .label h5 {

  line-height: 3rem;

}



.banner_bottom .label .icon {

  background-color: #ffffff;

  max-width: 3.8rem;

  z-index: 2;

}



.banner_bottom .label:after {

  content: '';

  position: absolute;

  width: 100%;

  height: 1px;

  top: calc(50% + 1rem);

  right: 0;

  background-color: var(--main-color);

}



.brans_wall div:first-child {

  z-index: 9;

}



.go_top {

  width: 37.5px;

  right: 0px;

  bottom: 12%;

  margin-left: auto;

}



.go_top .btn {

  background-color: rgba(50, 50, 50, 0.8);

}



.go_top .btn:hover {

  background-color: var(--secondary-color);

}



.p_bg_1 {

  right: 0;

  bottom: 40%;

  z-index: 1;

}



.p_bg_2 {

  right: 0;

  bottom: -200px;

  z-index: 7;

}



.p_bg_3 {

  left: -90px;

  top: 50px;

  z-index: 7;

}



.p_banner {

  width: 100%;

}



.p_banner .bg {

  min-height: 20vh;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center center;

}



.breadcrumb a {

  color: #323232;

}



.breadcrumb .breadcrumb-item.active {

  color: var(--main-color);

}



.sidebar .custom-control-label {

  color: #757575;

}



.sidebar .nav_item a {

  color: #757575;

}



.sidebar .nav_item a:hover {

  color: var(--main-color);

}



.sidebar .nav_item.act a {

  color: var(--main-color);

}



.banner_static {

  text-align: center;

  clear: both;

}



.slider.slider-horizontal {

  width: 100%;

}



.slider-handle {

  background: #ffffff;

  border: 1px solid #cecece;

  border-radius: 50%;

  /* You can customize the handle and set a background image */

}



.slider-track {

  background: #dbdbdb;

}



.slider-selection {

  border-top: 0.5px solid #b5b5b5;

}



.view .title {

  color: #b8a780;

  z-index: 2;

}



.view .title span.font-weight-light {

  color: rgba(184, 167, 128, 0.6);

}



.view .section_header:after {

  background-color: rgba(184, 167, 128, 0.6);

}



.swiper-slide-thumb-active .card {

  border: 1.5px solid var(--main-color);

}



.nav-pills .nav-link {

  margin: 0 15px;

  border: 1px solid #9b9b9b;

  color: #9b9b9b;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {

  color: #ffffff;

  background-color: var(--main-color);

  border: 1px solid var(--main-color);

}



.nav-pills .show .nav-link {

  background-color: var(--main-color);

  border: 1px solid var(--main-color);

}



.product_info {

  color: #5c5c5c;

}



.product_info a {

  color: #5c5c5c;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.product_info a:hover {

  color: #1977f2;

}



.product_info .price {

  font-weight: 600;

}



.product_info .point_img {

  max-width: 30px;

  margin-right: 0.3rem;

}



.product_info .point {

  color: var(--secondary-color);

}



.product_info .sns_button>div {

  max-width: 100px;

}



.product_content_bottom {

  color: #c1c1c1;

  /* GENERAL STYLES */

}



.product_content_bottom p {

  letter-spacing: 2.5px;

}



.pagination {

  padding: 30px 0;

}



.pagination ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

}



.pagination a {

  display: inline-block;

  padding: 0 0.5rem;

  color: inherit;

  -webkit-transition: all 0.1s;

  transition: all 0.1s;

}



.pagination a:hover,
.pagination .is-active li {

  font-weight: bold;

  color: var(--main-color);

}



.mwt_border {

  min-width: 3rem;

  height: 100%;

  text-align: center;

  position: relative;

  border: solid 1px #b1b1b1;

  margin-left: 6px;

}



.mwt_border .arrow_l_int {

  width: 0px;

  height: 0px;

  border-width: 6px;

  border-style: solid;

  border-color: transparent #989898 transparent transparent;

  position: absolute;

  top: 15%;

  left: -12px;

}



.mwt_border .arrow_l_out {

  width: 0px;

  height: 0px;

  border-width: 6px;

  border-style: solid;

  border-color: transparent #f6f5f3 transparent transparent;

  position: absolute;

  top: 15%;

  left: -11px;

}



#p_img_top .ribbon {

  display: block;

  position: absolute;

  right: -5px;

  top: -5px;

  z-index: 2;

  overflow: hidden;

  width: 93px;

  height: 93px;

  text-align: right;

}



#p_img_top .ribbon span {

  text-transform: uppercase;

  text-align: center;

  font-weight: bold;

  line-height: 32px;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

  width: 125px;

  display: block;

  -webkit-box-shadow: 0 3px 10px -5px black;

  box-shadow: 0 3px 10px -5px black;

  position: absolute;

  top: 17px;

  right: -29px;

}



.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {

  color: #323232 !important;

  background-color: #f6f5f3;

  border-color: #dee2e6 #dee2e6 #f6f5f3;

}



.act_cart_area {

  width: 100%;

  position: fixed;

  bottom: 0px;

  z-index: 1020;

}



.act_cart_area .act_cart .border-bottom {

  border-bottom: 2px solid rgba(0, 0, 0, 0.5) !important;

}



.act_cart_area .act_cart .header .btn {

  width: 80px;

  height: 26px;

  color: #ffffff;

  margin-bottom: -1px;

  background-image: url("../image/icon/rectangle.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center center;

  line-height: 13px;

}



.act_cart_area .act_cart .content {

  max-height: 75vh;

  overflow-y: auto;

}



.act_cart_area .act_cart .content .item>.card {

  max-width: 112px;

  margin: 0 auto;

}



.act_cart_area .act_cart .content .del_btn {

  position: absolute;

  top: -0.5rem;

  right: -0.5rem;

  color: rgba(50, 50, 50, 0.8);

  background-color: #ffffff;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  cursor: pointer;

}



.act_cart_area .act_cart .content .del_btn:hover {

  color: var(--main-color);

}



.act_cart_area .act_cart .btns_num input.text {

  height: 1.8rem;

}



.act_cart_area .act_cart .btns_num .plus,
.act_cart_area .act_cart .btns_num .minus {

  top: 0;

}



.act_cart_area .act_cart .btns_num .plus {

  left: 0;

}



.act_cart_area .act_cart .btns_num .minus {

  right: 0;

}



.label_info .text {

  font-size: 0.9em;

  letter-spacing: 0.5px;

  line-height: 1.5rem;

}



.label_info .indent {

  text-indent: 2em;

}



.aboutus .content .sub_title {

  font-size: 1.1rem;

}



.aboutus .content .text {

  text-indent: 2rem;

}



.aboutus .content .phase:nth-child(even) {

  background-color: #f6f5f3;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: reverse;

  -ms-flex-direction: row-reverse;

  flex-direction: row-reverse;

}



.contact_area .title {

  padding: 2rem 0;

  color: #9b9b9b;

  line-height: 2rem;

}



.contact_area .cont_tel_label {

  margin-bottom: 0px;

  line-height: 38px;

}



.contact_area .cont_input {

  width: 100%;

  padding-right: 15px;

}



.refer {

  background-color: rgba(0, 0, 0, 0.05);

}



.brans_list .brans_item a {

  display: block;

  -webkit-filter: opacity(50%);

  filter: opacity(50%);

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  border: 1px solid transparent;

  text-align: center;

}



.brans_list .brans_item a:hover {

  -webkit-filter: opacity(100%);

  filter: opacity(100%);

  border: 1px solid var(--main-color);

}



.error {

  min-height: 400px;

}



.guide_area .card-header {

  padding-left: 15px;

  padding-right: 15px;

}



/* 會員中心 */

.reg .form_area {

  max-width: 845px;

}



.reg .progress_rate li .text {

  color: #b1b1b1;

}



.reg .progress_rate li .cycle {

  width: 100%;

  position: relative;

}



.reg .progress_rate li .cycle span {

  width: 32px;

  height: 32px;

  display: block;

  border: 5px solid #b1b1b1;

  background-color: #b1b1b1;

  border-radius: 50%;

  margin: 0 auto;

}



.reg .progress_rate li .cycle i.fas {

  display: none !important;

}



.reg .progress_rate li .cycle::before,
.reg .progress_rate li .cycle:after {

  content: '';

  position: absolute;

  width: 50%;

  height: 1px;

  background-color: #b1b1b1;

  top: calc(50% - (1px / 2));

  z-index: -1;

}



.reg .progress_rate li .cycle::before {

  left: 0;

}



.reg .progress_rate li .cycle:after {

  right: 0;

}



.reg .progress_rate li:nth-child(1) .cycle::before {

  display: none;

}



.reg .progress_rate li:nth-last-child(1) .cycle::after {

  display: none;

}



.reg .progress_rate li.act .cycle span {

  border: 5px solid var(--main-color);

  background-color: #ffffff;

}



.reg .progress_rate li.act .cycle::before,
.reg .progress_rate li.act .cycle:after {

  height: 5px;

  top: calc(50% - (5px / 2));

  background-color: var(--main-color);

}



.reg .progress_rate li.act .text {

  color: var(--main-color);

}



.reg .progress_rate li.done .cycle span {

  background-color: var(--main-color);

}



.reg .progress_rate li.done .cycle i.fas {

  display: inline-block !important;

}



.reg #privacy_text div {

  max-height: 80vh;

  overflow-y: scroll;

  margin-bottom: 2rem;

}



.custom-select option:disabled {

  display: none;

}



.login_form .input-group-prepend {

  position: relative;

}



.login_form .input-group-prepend:after {

  content: '';

  height: 80%;

  position: absolute;

  border-right: 1px solid #ced4da;

  top: 10%;

  right: 0;

  z-index: 1;

}



.verfication_img {

  position: absolute;

  height: calc(100% - 2px);

  width: auto;

  right: 1px;

  top: 1px;

  z-index: 3;

}



.other_login .btn {

  text-align: left;

  font-size: 0.9rem;

  letter-spacing: 1px;

  padding-left: 10%;

}



[data-type="input_eye"] {

  right: 0;

  z-index: 4;

}



.map a {

  color: inherit;

}



.accordion .card-body p {

  line-height: 2rem;

}



.msg_content .item {

  border-bottom: 1px dashed rgba(50, 50, 50, 0.5);

}



.msg_content .item.unread .circle {

  display: block;

}



.msg_content .item .circle {

  display: none;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background-color: #bc2c3d;

}



.msg_content .item p {

  margin: 0;

}



.knowledge .title {

  font-size: 1.1rem;

}



.knowledge .custom_pagination_bottom {

  border-top: 0 !important;

}



.qa_index .item p {

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.qa_index .item:hover p {

  color: var(--main-color) !important;

  padding-left: 0.5rem;

}



.qa_index .item .text_cont {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  position: relative;

}



.qa_index .item .text_cont p {

  position: absolute;

  bottom: 0;

  left: 1rem;

}



.video .v_item .card-text {

  font-size: 0.8em;

}



.video .v_item:hover img {

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}



.video .v_item:hover img {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}



#cart_step .cart_item.general_plus .item_cont,
#cart_step .cart_item.freezing_plus .item_cont {

  position: relative;

}



#cart_step .cart_item.general_plus .item_cont::before,
#cart_step .cart_item.freezing_plus .item_cont::before {

  padding: 0 30px;

  position: absolute;

  top: -12px;

  left: 0px;

  color: #ffffff;

  text-align: center;

  letter-spacing: 2px;

}



#cart_step .cart_item.general_plus .item_cont::before {

  content: '加價購商品';

  background-color: var(--main-color);

}



#cart_step .cart_item.freezing_plus .item_cont::before {

  content: '冷凍加價購';

  background-color: #007c9f;

}



#cart_step table {

  font-size: 0.9em;

}



#cart_step .info {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}



#cart_step .point_img {

  max-width: 40px;

  margin-right: 0.5rem;

}



#cart_step .point {

  color: var(--secondary-color);

}



[aria-expanded="true"] .title {

  color: var(--main-color);

}



[aria-expanded="true"] .title_en {

  color: #9b9b9b;

}



[aria-expanded="true"] .fa-caret-down {

  display: inline-block;

}



[aria-expanded="true"] .fa-caret-right {

  display: none;

}



[aria-expanded="false"] .title {

  color: #757575;

}



[aria-expanded="false"] .title_en {

  color: #9b9b9b;

}



[aria-expanded="false"] .fa-caret-down {

  display: none;

}



[aria-expanded="false"] .fa-caret-right {

  display: inline-block;

}



.plus_cart .label {

  font-size: 1.1rem;

  background-color: #e7ece0;

}



.plus_cart #gift_plus [data-action="addCart"] {

  display: block;

}



.plus_cart #gift_plus [data-action="select"] {

  display: none;

}



.plus_cart #gift_plus .title {

  font-size: 1.1rem;

}



.plus_cart #gift_plus .select {

  background-color: rgba(117, 117, 117, 0.1);

}



.plus_cart #gift_plus .select [data-action="addCart"] {

  display: none;

}



.plus_cart #gift_plus .select [data-action="select"] {

  display: block;

}



.comfirm .label {

  font-size: 1.1rem;
  background-color: #fbc19e;

}



.comfirm .label p:first-child {

  line-height: 2.5rem;

}



.cart_area ul>.item:last-child .border-bottom {

  border: 0 !important;

}



.p_nav .active>.btn-defult {

  background-color: var(--main-color);

  border: var(--main-color);

  color: #ffffff;

}



#collapsePay .amount .p_num {

  font-size: 1.15em;

}



#collapsePay .comfirm .content {

  padding-top: 1rem;

  padding-bottom: 30px !important;

}



footer .subscrib input[type="text"] {

  padding: .375rem .75rem;

  background-color: transparent;

  font-size: 0.7rem;

}

footer .subscrib input[type="text"]::placeholder {
  color: #fff;
}



footer .footer_top {

  position: relative;

  background-color: #f6f5f3;

  color: #706f70;

}



footer .footer_top>div:first-child {

  z-index: 9;

  border-bottom: 1px solid #cbcbcb;

}



footer .footer_top .logo {

  max-width: 60px;

}



footer .footer_top .logo_text {

  font-size: 0.95em;

  letter-spacing: 2px;

  filter: opacity(0.8);

  -webkit-filter: opacity(0.8);

  -ms-filter: opacity(0.8);

  -moz-filter: opacity(0.8);

  -o-filter: opacity(0.8);

}



footer .footer_top .shop_info p {

  font-size: 0.95em;

  letter-spacing: 1px;

}



footer .footer_top .footer_item {

  letter-spacing: 1.5px;

  z-index: 8;

}



footer .footer_top .footer_item h6 {

  font-size: 0.9em;

  font-weight: 600;

}



footer .footer_top .footer_item a {

  color: #9b9b9b;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

  font-size: 0.9em;

}



footer .footer_top .footer_item a:hover {

  color: var(--secondary-color);

  padding-left: 0.3rem;

}



footer .footer_top .social_icon li {

  width: 2.2rem;

  height: 2.2rem;

  translate: all 0.2s;

}



footer .footer_top .social_icon li:hover {

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

}



footer .footer_top .social_icon a:hover {

  padding-left: 0rem;

}



footer .footer_bottom {

  padding-top: 1.5rem;

}



footer .footer_logo {

  min-width: 100px;

  max-width: 250px;

  border-bottom: 1px solid #e4e4e4;

}



footer .footer_text {

  border-right: 0;

  border-bottom: 1px solid #e4e4e4;

}



footer .footer_icon {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}



footer .footer_icon .col-2 {

  max-width: 100px;

}



.loading {

  width: 100vw;

  height: 100vh;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  /* background-color: rgba(50, 50, 50, 0.95); */
  background-color: rgb(255 255 255 / 65%);

  top: 0;

  left: 0;

  z-index: 99999;

}



.loading .img {

  max-width: 80px;

}



.loading .loading-text {

  text-align: center;

}



.loading .loading-text span {

  position: relative;

  font-size: 18px;

  font-weight: bolder;

  margin-left: 3px;

}



.loading .loading-text div {

  position: relative;

  display: inline-block;

  -webkit-animation: janimation 4s infinite;

}



.loading .loading-text div.letter_container_1 {

  -webkit-animation-delay: 0s;

}



.loading .loading-text div.letter_container_2 {

  -webkit-animation-delay: .2s;

}



.loading .loading-text div.letter_container_3 {

  -webkit-animation-delay: .4s;

}



.loading .loading-text div.letter_container_4 {

  -webkit-animation-delay: .6s;

}



.loading .loading-text div.letter_container_5 {

  -webkit-animation-delay: .8s;

}



.loading .loading-text div.letter_container_6 {

  -webkit-animation-delay: 1s;

}



.loading .loading-text div.letter_container_7 {

  -webkit-animation-delay: 1.2s;

}



/* 

loading 文字動畫效果

*/

@-webkit-keyframes janimation {

  0% {

    -webkit-transform: rotate(0deg) scale(1.5);

    color: var(--main-color);

  }

  10% {

    -webkit-transform: rotate(0deg) scale(1.7);

    color: #b3ca90;
    color: var(--orange-300);

  }

  100% {

    -webkit-transform: rotate(0deg) scale(1.2);

    color: var(--main-color);

    text-shadow: #666 0 0 10px;

  }

}



@media (max-width: 575.98px) {

  .p_nav .nav-link {

    margin: 0 auto 1rem auto;

    position: relative;

  }

  .qa_index .border-left,
  .qa_index .border-right,
  .qa_index .border-bottom {

    border: 0 !important;

  }

}



@media (max-width: 767px) {

  .container {

    max-width: 540px;

  }

  html,
  body {

    overflow-x: hidden;

  }

  /* clock  */

  .countdown_card_area {

    /* -webkit-transform: scale(0.5);

    transform: scale(0.5); */

    -webkit-transform-origin: left top;

    transform-origin: left top;

    /* display: none; */
    padding: 0;

  }

  .countdown_card_area .countdown_card .label {

    font-size: 1.9rem;

  }

  .countdown_card_area .countdown_card .p_info_text {

    font-size: 1.9rem;

  }

  .countdown_card_area .countdown_card .price {

    font-size: 3rem;

  }

  .countdown_card_area .countdown_card .btn {

    font-size: 2.5rem;

  }

  .countdown_card_area .countdown_card .img {

    max-width: 500px;

    margin: 0 auto;

  }

  .promotion #promotion_card {

    min-width: 300px;

    margin-left: 0;

    margin-right: auto;

  }

  html {

    font-size: 85%;

  }

  header {

    position: absolute !important;

  }

  header .header {

    position: static;

  }

  .section.color::after {

    background-position: center;

  }

  .carousel {

    height: calc(100vh - (88px + 48px));

    min-height: 200px;

  }

  .carousel .title {

    font-size: 2.8rem;

  }

  .carousel .sub_title {

    font-size: 1.4rem;

  }

  .collect .order-sm-1 {

    -webkit-box-ordinal-group: 2;

    -ms-flex-order: 1;

    order: 1;

    margin-bottom: 15px;

  }

  .collect .order-sm-2 {

    -webkit-box-ordinal-group: 3;

    -ms-flex-order: 2;

    order: 2;

    margin-bottom: 15px;

  }

  .collect .order-sm-3 {

    -webkit-box-ordinal-group: 4;

    -ms-flex-order: 3;

    order: 3;

    margin-bottom: 15px;

  }

  .collect .section_content {

    padding-left: 0;

    padding-right: 0;

  }

  #collect_card {

    height: 850px;

  }

  #collect_card .swiper-slide {

    height: auto;

  }

  .banner_top .col-12.img {

    padding: 0;

  }

  .section .section_header {

    padding: 10px 0 5px 0;

  }

  .section .title {

    font-size: 1.4rem;

  }

  .subscrib_box {

    border-bottom: none;

  }

  footer {

    padding-bottom: 5rem;

  }

  footer .social_box {

    border-bottom: 1px solid rgba(50, 50, 50, 0.2);

    margin-top: 0 !important;

  }

  footer .social_box h5 {

    display: none;

  }

  footer .social_icon li {

    width: 2.5rem !important;

    height: 2.5rem !important;

    margin-right: 0.5rem;

    font-size: 1.5rem;

  }

  footer .subscrib {

    padding: 0 15px;

    margin-bottom: 15px;

  }

  footer .pay_cards .item {

    max-width: 35px;

  }

  footer .footer_item {

    margin-bottom: 1rem;

  }

  footer .footer_item h5 {

    margin-bottom: 0.5rem !important;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid rgba(50, 50, 50, 0.2);

  }

  footer .footer_item a {

    line-height: 2.3rem;

  }

  .p_bg_1 {

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

    left: 0;

    right: auto;

    bottom: 45%;

  }

  .p_bg_3 {

    display: none;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    left: -25%;

  }

  .p_bg_2 {

    display: none;

  }

  .p_sidebar,
  .p_select {

    padding-right: 30px;

    padding-left: 30px;

  }

  .hot .label .sw_btns {

    right: 0.5rem;

    bottom: 1rem;

  }

  #mob_nav {

    width: 100%;

    display: block !important;

    z-index: 1034;

  }

  #m_cart_btn {

    position: relative;

  }

  #m_cart_btn span {

    width: 18px;

    height: 18px;

    position: absolute;

    top: 0.2rem;

    right: 18px;

    text-align: center;

  }

  .m_content .m_nav_title {

    line-height: 26px;

    font-size: 18px;

  }

  .m_content ul {

    overflow-y: scroll;

    height: 100%;

  }

  .m_content ul .nav_item {

    font-size: 1.2rem;

  }

  .m_content ul .nav_item .lebal {

    font-weight: 500;

  }

  .m_content .m_search {

    width: 50%;

  }

  .m_content .m_search input[type="text"] {

    height: 40px;

  }

  .m_content .m_search .m_search_btn {

    width: 40px;

    height: 40px;

    background-color: var(--main-color);

    color: #ffffff;

    right: 0;

    top: 0;

  }

  .m_content .community_item {

    width: 20%;

    min-width: 65px;

    max-width: 100px;

  }

  .m_content .dropdown {

    z-index: 1032;

  }


  .m_content .dropdown.active {
    transition: 0.3s;
    transform: translateY(0%);
  }

  #m_nav_content [data-type="m_nav"],
  #m_member_cont [data-type="m_nav"] {

    background-color: #ffffff;

  }

  #m_set_cont .img {

    width: 20%;

    min-width: 1rem;

    max-width: 2rem;

    margin-right: 0.5rem;

  }

  #m_cart_cont .toolbox {

    height: 100%;

    overflow-y: scroll;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

  }

  #m_view {

    display: block !important;

  }

  #m_view .m_view_icon {

    position: fixed;

    right: 0;

    bottom: 125px;

    z-index: 1031;

  }

  #m_view .m_view_icon .fas.fa-history {

    font-size: 1.5rem;

  }

  #m_view .m_view_close {

    width: 45vw;

    height: 30px;

    max-width: 250px;

    min-width: 165px;

    position: fixed;

    right: 5px;

    top: 20px;

    z-index: 1031;

  }

  #m_view .m_view_cont {

    width: 45vw;

    max-width: 250px;

    min-width: 165px;

    height: 80vh;

    position: fixed;

    right: 5px;

    top: 50px;

    z-index: 1031;

  }

  #m_view .m_view_cont ul {

    height: 100%;

    overflow-y: scroll;

  }

  #m_view .m_view_cont .p_card {

    border: 0;

  }

  .table-rwd {

    min-width: 100%;

  }

  /*針對tr去做隱藏*/

  tr.tr-only-hide,
  td.tr-only-hide {

    display: none !important;

  }

  /*讓tr變成區塊主要讓他有個區塊*/

  .table-rwd tr {

    display: block;

    border: 1px solid #ddd;

    margin-top: 5px;

  }

  .table-rwd td {

    text-align: left;

    font-size: 15px;

    overflow: hidden;

    width: 100%;

    padding-top: 0.3rem;

    padding-bottom: 0.3rem;

    display: block;

  }

  .table-rwd td:before {

    content: attr(data-th) "";

    display: inline-block;

    text-transform: uppercase;

    font-weight: 400;

    margin-right: 10px;

    color: #b1b1b1;

  }

  .table-rwd td.th_none:before {

    content: attr(data-th) "";

    display: none;

  }

  /*當RWD縮小的時候.table-bordered 會有兩條線，所以針對.table-bordered去做修正*/

  .table-rwd.table-bordered td,
  .table-rwd.table-bordered th,
  .table-rwd.table-bordered {

    border: 0;

  }

  .order-sm-1 {

    -ms-flex-order: 1;

    -webkit-box-ordinal-group: 2;

    order: 1;

  }

  .mb-sm-1 {

    margin-bottom: 0.5rem;

  }

  .order-sm-2 {

    -ms-flex-order: 2;

    -webkit-box-ordinal-group: 3;

    order: 2;

  }

  .mb-sm-2 {

    margin-bottom: 1rem;

  }

  .order-sm-3 {

    -ms-flex-order: 3;

    -webkit-box-ordinal-group: 4;

    order: 3;

  }

  .mb-sm-3 {

    margin-bottom: 1.5rem;

  }

  .order-sm-4 {

    -ms-flex-order: 4;

    -webkit-box-ordinal-group: 5;

    order: 4;

  }

  .mb-sm-4 {

    margin-bottom: 2rem;

  }

  .order-sm-5 {

    -ms-flex-order: 5;

    -webkit-box-ordinal-group: 6;

    order: 5;

  }

  .mb-sm-5 {

    margin-bottom: 2.5rem;

  }

  #custom_pagination .col-6:nth-child(odd) {

    padding-right: 6.5px;

  }

  #custom_pagination .col-6:nth-child(even) {

    padding-left: 6.5px;

  }

  .p_card.discount .ribbon {

    -webkit-transform: scale(0.75);

    transform: scale(0.75);

    -webkit-transform-origin: top right;

    transform-origin: top right;

  }

  .act_cart_area>div {

    height: 100%;

  }

  .act_cart_area .act_cart {

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    background-color: #ffffff;

  }

  .act_cart_area .act_cart .content {

    overflow-x: auto;

    padding-bottom: 50px;

  }

  .act_cart_area .act_cart .footer {

    position: fixed;

    bottom: 60px;

  }

  .act_cart_area .act_cart .footer .btn {

    min-width: 95px;

    height: auto;

  }

  #collapsePay .p_nav .item {

    width: 100%;

    margin-bottom: 15px;

  }

  #cart_step .title_en {

    font-size: 0.85em;

  }

  #cart_step .info h5 {

    font-size: 1.1rem;

  }

  #cart_step .info h3 {

    font-size: 1.5rem;

  }

  #cart_step .info p {

    font-size: 0.9rem;

  }

  .comfirm_table tr {

    border: none;

  }

  .comfirm_table tr td {

    border-bottom: 1px solid #e4e4e4 !important;

  }

  .comfirm_table tr td:nth-child(odd) {

    width: auto;

  }

  #d_point .input_box,
  #d_bonus .input_box,
  #d_coupon .input_box,
  #d_coup .input_box {

    width: calc(100% - 60px);

  }

  .aboutus .content .phase {

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

  }

  .aboutus .content .phase .img {

    width: 100%;

    margin: 0 auto 15px auto;

  }

  .aboutus .content .phase .text {

    width: 100%;

  }

  .msg_content .table-rwd tr {

    border-top: 0;

    border-left: 0;

    border-right: 0;

  }

  .msg_content .table-rwd .unread {

    position: relative;

  }

  .msg_content .table-rwd td:before {

    float: left;

    color: #757575;

  }

  .msg_content .item td:nth-child(1) {

    position: absolute;

    top: calc(50% - 6px);

    left: -1rem;

  }

  .msg_content .item td:nth-child(2) {

    display: none;

  }

  .msg_content .item td:nth-child(3) {

    width: 100%;

    text-align: right;

  }

  .msg_content .item td:nth-child(3) p {

    font-size: 0.9em;

  }

  .shopping_guide .card-header,
  .shopping_guide .card-body {

    padding-right: 1rem;

    padding-left: 1rem;

  }

  .question .card-header,
  .question .card-body {

    padding-right: 1rem;

    padding-left: 1rem;

  }

  #s_nav_btn {

    margin-top: -0.5rem;

  }

  #search_nav {

    display: none;

    width: 100%;

    height: calc(100% - 60px);

    position: fixed;

    background-color: rgba(50, 50, 50, 0.8);

    margin-left: -30px;

    z-index: 9999;

    bottom: 60px;

  }

  #search_nav .close {

    position: absolute;

    right: 0px;

    z-index: 1;

  }

  #search_nav .nav-link {

    width: calc(50% - 13.6px);

    text-align: center;

    font-size: 110%;

    margin-bottom: 0.5rem;

  }

  #search_content .col-6:nth-child(odd) {

    padding-right: 6.5px;

    padding-left: 0;

  }

  #search_content .col-6:nth-child(even) {

    padding-right: 0;

    padding-left: 6.5px;

  }

  .m_none {

    display: none !important;

  }

  .footer_item.m_none {

    display: none !important;

  }

}



@media (min-width: 767px) and (max-width: 769px) {

  .information h5 {

    white-space: nowrap;

  }

}



@media (min-width: 768px) {

  .container {

    max-width: 720px;

  }

  /* clock  */

  .countdown_card_area {

    -webkit-transform: scale(0.9);

    transform: scale(0.9);

    -webkit-transform-origin: top left;

    transform-origin: top left;

  }

  .p_card .info .point {

    font-size: 0.85rem;

  }

  #promotion_card .swiper-slide:nth-child(1) {

    padding-left: 0;

  }

  .information .section_content {

    padding-left: 30px;

    padding-right: 30px;

  }

  .act_cart_area .m_none {

    display: none !important;

  }

  .tool_area,
  .left_area {

    top: calc(140px + 1.2rem);

  }

  #cart_step .item .img {

    min-width: 100px;

    max-width: 250px;

  }

  .custom_pagination_bottom .pagination a {

    padding: 0 1rem;

  }

  #collapsePay .p_nav .item {

    width: calc(100% / 3);

    margin-bottom: 15px;

  }

  #d_coup .input_box {

    width: calc(((100% / 3) * 2) - 58px - 18px);

  }

  #d_point .input_box,
  #d_bonus .input_box,
  #d_coupon .input_box,
  #d_coup .input_box {

    width: calc((100% / 3) * 2);

  }

  #s_nav_btn {

    display: none;

  }

  #search_nav .close {

    display: none;

  }

  .m_none {

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important;

  }

  .footer_item.m_none {

    display: block !important;

  }

}



@media (min-width: 992px) {

  .container {

    max-width: 960px;

  }

  /* clock */

  .countdown_card_area {

    -webkit-transform: scale(1);

    transform: scale(1);

    -webkit-transform-origin: top left;

    transform-origin: top left;

  }

  #collapsePay .p_nav .item {

    margin-bottom: 15px;

  }

  #d_coup .input_box {

    width: calc(40% - 58px - 18px);

  }

  #d_point .input_box,
  #d_bonus .input_box,
  #d_coupon .input_box,
  #d_coup .input_box {

    width: calc(40%);

  }

  .act_cart_area .m_none {

    display: block !important;

  }

}



@media (min-width: 992px) and (min-width: 1021px) and (max-width: 1300px) {

  .countdown_card_area {

    /* -webkit-transform: scale(1.22);

    transform: scale(1.22); */

    margin-bottom: 140px;

  }

  .promotion_card_area {

    padding: 0;

  }

}



@media (min-width: 1200px) {

  .container {

    max-width: 1170px;

  }

  /* clock  */

  .countdown_card {

    width: 770px;

  }

  .countdown_card .countdown_promotion {

    right: 5px;

  }

  header .nav_area {

    margin-top: 0;

  }

  .tool_area,
  .left_area {

    top: calc(105px + 1.2rem);

  }

  footer .footer_logo {

    border-bottom: 0;

  }

  footer .footer_text {

    border-right: 1px solid #cbcbcb;

    border-bottom: 0;

  }

  .other_login .btn {

    padding-left: 25%;

  }

}



@media (max-width: 417px) {

  /* clock */

  .promotion_card_area {

    padding: 0;

  }

  #promotion_card .swiper-slide {

    padding: 0 !important;

  }

  .act_cart_area>div {

    height: 100%;

  }

  .act_cart_area .header {

    margin-top: auto;

  }

  .act_cart_area .act_cart {

    background-color: transparent;

  }

  .act_cart_area .act_cart #act_cart_text {

    min-height: 50px;

  }

}



@media (max-width: 320px) {

  .col {

    padding: 0;

  }

}

/*# sourceMappingURL=style-v8-1.css.map */


/*2021-02-06 前端工程師-HAN修改*/
.p_banner .banner p {
  display: none;
}

#p_img_top_logo {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

#p_img_top_logo_right {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

#p_img_top_logo img,
#p_img_top_logo_right img {
  width: 100%;
  height: auto;
}

.video .v_item:hover iframe {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.video .v_item:hover iframe {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.iframe-video {
  position: relative;
}

.iframe-video::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
}

.card {
  border: 1px solid rgba(0, 0, 0, .125);
  /* border: none; */
}

/* .swiper-slide-line {
  border: 1px solid rgba(0, 0, 0, .125);
} */

.p_card_e {
  padding: 0;
}

#general_plus {
  margin: 0 -5px;
}

#general_plus .swiper-slide,
#general_plus .slick-item {
  width: calc(20% - 10px);
  margin: 5px 5px;
}

#general_plus .slick .slick-item .card {
  transition: 0.3s;
}

#pickup-store li:last-child {
  border-right: none !important;
}

#cart_step .info p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 5px;
}

.countdown_card .p_info_area {
  overflow: hidden;
  position: relative;
}

.countdown_card .p_info {
  position: relative;
  z-index: 1;
}

.p_info_area_back {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  height: 100%;
}

#home_banner {
  position: relative;
  overflow: hidden;
}

/* #home_banner::after,#home_banner::before {
  transition: 0.6s;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  z-index: 1;
  width: 65px;
  height: 100%;
}
#home_banner::after {
  left: -65px;
}

#home_banner::before {
  right: -65px;
}
#home_banner:hover:after {
  left: 0;
  background: linear-gradient(180deg, transparent 0%, #333333 100%);
  background: -moz-linear-gradient(180deg, transparent 0%, #6B6B6B 100%);
  background: -webkit-linear-gradient(180deg, transparent 0%, #333333 100%);
  background: -o-linear-gradient(180deg, transparent 0%, #6B6B6B 100%);
}

#home_banner:hover::before {
  right: 0;
  background: linear-gradient(0deg, transparent 0%, #333333 100%);
  background: -moz-linear-gradient(0deg, transparent 0%, #6B6B6B 100%);
  background: -webkit-linear-gradient(0deg, transparent 0%, #333333 100%);
  background: -o-linear-gradient(0deg, transparent 0%, #6B6B6B 100%);
} */

#home_banner .pc {
  display: block;
}

#home_banner .slick-prev {
  left: 15px;
}

#home_banner .slick-next {
  right: 15px;
}

#home_banner .slick-prev,
#home_banner .slick-next {
  width: 35px;
  height: 35px;
  z-index: 2;
}

#home_banner .slick-prev:before,
#home_banner .slick-next:before {
  font-size: 35px;
  color: #98b372;
  color: var(--orange-400);
}


#home_banner .mobile {
  display: none;
}

#add_shop .slick {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  /* margin: -5px; */
}

#add_shop .slick.slick-initialized {
  margin: 0;
}

#add_shop .slick .btn02-purchase {
  width: calc(20% - 10px);
  /* margin: 5px; */
}

.collapse:not(.show) {
  display: block !important;
  height: 0;
  overflow: hidden;
}

#general_plus .swiper-slide,
#general_plus .slick-item {
  margin: 0;
}

#custom_pagination .p_card {
  padding: 0 0 20px 0;
}

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

.promotion_card_area .card {
  border: none;
}

#eco_froends {
  margin-left: 2.1rem;
  margin-right: 2.1rem;
}

.sub_title.text-secondary {
  font-size: 1.2em !important;
  margin-top: 10px;
}

.banner_top.py-4 {
  padding-bottom: 0 !important;
}

.banner_top .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.banner_top .slick .slick-list {
  margin-left: auto;
  margin-right: auto;
}

.banner_top .slick .slick-dots {
  padding-top: 10px;
  position: static;
}

.collect_card_slick .p_card .info .point_img {
  display: inline-block;
}

.collect_card {
  transform: scale(0);
  height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.collect_card.active {
  height: auto;
  transform: scale(1);
}

@media (max-width: 1199px) {
  #pickup-store {
    display: flex;
    flex-wrap: wrap;
  }

  #pickup-store li {
    width: 50% !important;
    border-top: 1px solid #dee2e6 !important;
  }

  #pickup-store li:nth-child(1),
  #pickup-store li:nth-child(2) {
    border-top: none !important;
  }
}

@media (max-width: 761px) {

  #product-information .comfirm_table tr {
    border-bottom: 1.5px solid #979797;
    padding-bottom: 5px;
  }

  #product-information .comfirm_table tr td:last-child {
    border-bottom: none !important
  }

  #pickup-store li {
    text-align: center;
    width: 100% !important;
  }

  #pickup-store li:nth-child(2) {
    border-top: 1px solid #dee2e6 !important;
  }

  #general_plus .swiper-slide,
  #general_plus .slick-item {
    width: calc(33% - 10px);
  }

  #add_shop .slick .btn02-purchase {
    width: calc(33% - 10px);
    /* margin: 5px; */
  }
}

@media (max-width: 768px) {
  #information h5 {
    font-size: 1rem;
  }

  #collect_card {
    height: auto !important;
  }

  .banner_top .slick .slick-slide div:nth-child(1) {
    margin-bottom: 15px;
  }
}

@media (max-width: 481px) {
  #home_banner .pc {
    display: none;
  }

  #home_banner .mobile {
    display: block;
  }

  #general_plus .swiper-slide,
  #general_plus .slick-item {
    width: calc(50% - 10px);
    /* margin: 5px 0; */
  }

  #add_shop .slick .btn02-purchase {
    width: calc(50% - 10px);
    margin: 5px;
  }

  .pb-sm-0 {
    padding-bottom: 0 !important;
  }

  #information h5 {
    font-size: 1.25rem;
  }
}

.banner_static:nth-child(1) {
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .banner_static:nth-child(1) {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .banner_static:nth-child(1) {
    margin-bottom: 30px;
  }
}

.card-img-top .iframe-video {
  padding-bottom: 60%;
  height: 0;
  box-sizing: border-box;
  position: relative;
  background-color: #000000;
}

.card-img-top .iframe-video iframe {
  width: 100%;
  height: 275px;
  transition: 0.3s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.card-img-top .iframe-video:hover iframe {
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1.1);
  transform: translateX(-50%) translateY(-50%) scale(1.1);
}

@media (max-width: 767px) {
  .card-img-top .iframe-video iframe {
    height: 395px;
  }
}

.countdown_card .p_info .img {
  object-fit: cover;
  width: 100%;
  min-height: 100%;
}

#info_swiper .card-title {
  word-break: normal !important;
  white-space: normal !important;
}

.fw {
  flex-wrap: wrap;
}

/* --- 經銷商專區樣式開始 --- */

/* 為了確保原有樣式不被影響，增加一點上方間距 */
.distributor-section {
  margin-top: 20px;
  margin-bottom: 30px;

}

.distributor-section .distributor-menu-container {
  width: 100%;
  gap: 10px;
}

/* 標題樣式 */
.distributor-heading {
  font-size: 24px;
  color: #333;
  /* 深灰色字體，可自行調整 */
  font-weight: bold;
  margin-bottom: 15px;
}

.distributor-heading .en {
  font-size: 18px;
  color: #666;
  font-weight: normal;
  margin-left: 10px;
}

/* --- 按鈕核心樣式 --- */
.distributor-btn {
  /* 核心佈局：彈性盒子，垂直置中 */
  display: flex;
  align-items: center;
  /* 顏色與外觀 */
  background-color: #7A9A68;
  background-color: var(--orange-500);
  /* 圖片中的綠色 */
  color: #ffffff;
  text-decoration: none;
  /* 去除超連結底線 */
  padding: 15px 20px;
  border-radius: 6px;
  /* 輕微圓角 */
  transition: all 0.3s ease;
  /* 添加互動過渡效果 */

  /* RWD - 手機版預設設定 (佔滿一行) */
  width: 100%;
  margin-bottom: 10px;
  /* 按鈕之間的垂直間距 */
  box-sizing: border-box;
}

/* 滑鼠懸停效果 (Hover) */
.distributor-btn:hover {
  background-color: #658254;
  background-color: var(--orange-700);
  /* 深一點的綠色 */
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  /* 輕微上浮效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 圖標區域樣式 */
.distributor-btn .btn-icon {
  font-size: 28px;
  /* 圖標大小 */
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  /* 固定寬度以確保文字對齊 */
}

/* 文字區域樣式 */
.distributor-btn .btn-text {
  display: flex;
  flex-direction: column;
  /* 讓中英文垂直排列 */
  line-height: 1.2;
}

.distributor-btn .btn-text .zh {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.distributor-btn .btn-text .en {
  font-size: 13px;
  opacity: 0.9;
  /* 稍微透明一點 */
}


/* --- RWD 響應式斷點設定 --- */

/* 平板直向 (大於等於 768px) */
/* 這裡選擇讓它們變成兩欄排列，比較不擁擠 */
@media (min-width: 768px) {
  .distributor-btn {
    /* 寬度設為接近 50%，扣除一點間距 */
    width: calc(50% - 10px);
  }
}

/* 桌面版與平板橫向 (大於等於 992px) */
/* 恢復成題目要求的 5 欄並排 */
@media (min-width: 992px) {
  .distributor-btn {
    /* 寬度設為接近 20%，利用 justify-content: between 自動分配間距 */
    width: 19%;
    margin-bottom: 0;
    /* 桌面版不需要底部間距 */
    padding: 15px 10px;
    /* 稍微縮小內距以防文字溢出 */
  }

  /* 微調桌面版的圖標與文字大小，適應較窄的空間 */
  .distributor-btn .btn-icon {
    font-size: 24px;
    margin-right: 10px;
    width: 30px;
  }

  .distributor-btn .btn-text .zh {
    font-size: 15px;
  }

  .distributor-btn .btn-text .en {
    font-size: 12px;
  }
}

/* --- 經銷商專區樣式結束 --- */



#cockpit-dashboard-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --panel-bg: #f9fafb;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --border-light: #e5e7eb;
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-gold: #d97706;
  --bg-gold-light: #fffbeb;
  --color-green: #10b981;
  --bg-green-light: #d1fae5;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --radius-lg: 16px;
  --radius-md: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#cockpit-dashboard-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#cockpit-dashboard-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#cockpit-dashboard-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#cockpit-dashboard-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#cockpit-dashboard-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#cockpit-dashboard-section .main-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

#cockpit-dashboard-section .main-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

#cockpit-dashboard-section .profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 24px;
}

#cockpit-dashboard-section .profile-left {
  display: flex;
  gap: 16px;
  align-items: center;
}

#cockpit-dashboard-section .avatar-circle {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
  border: 3px solid #fff;
}

#cockpit-dashboard-section .profile-info h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

#cockpit-dashboard-section .status-tag {
  font-size: 12px;
  color: var(--color-gold);
  background-color: var(--bg-gold-light);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

#cockpit-dashboard-section .profile-right {
  text-align: right;
}

#cockpit-dashboard-section .id-label {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 4px;
}

#cockpit-dashboard-section .id-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  font-family: monospace;
}

#cockpit-dashboard-section .dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#cockpit-dashboard-section .sub-panel {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s;
}

#cockpit-dashboard-section .sub-panel:hover {
  transform: translateY(-2px);
  border-color: #d1d5db;
}

#cockpit-dashboard-section .progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

#cockpit-dashboard-section .panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

#cockpit-dashboard-section .badge-success {
  background-color: var(--bg-green-light);
  color: var(--color-green);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

#cockpit-dashboard-section .progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

#cockpit-dashboard-section .current-val {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
}

#cockpit-dashboard-section .progress-track {
  width: 100%;
  height: 10px;
  background-color: #e5e7eb;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}

#cockpit-dashboard-section .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fb923c, #f97316);
  border-radius: 5px;
  width: 100%;
}

#cockpit-dashboard-section .progress-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-sub);
}

#cockpit-dashboard-section .percent-gain {
  color: var(--color-green);
  font-weight: 600;
}

#cockpit-dashboard-section .income-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-sub);
}

#cockpit-dashboard-section .icon-coin {
  color: var(--color-primary);
  background: rgba(249, 115, 22, 0.1);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#cockpit-dashboard-section .income-amount {
  font-size: 34px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
  line-height: 1.1;
  letter-spacing: -1px;
}

#cockpit-dashboard-section .income-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 16px;
}

#cockpit-dashboard-section .growth-indicator {
  font-size: 13px;
  color: var(--color-green);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  background-color: rgba(16, 185, 129, 0.05);
  padding: 6px 10px;
  border-radius: 8px;
  align-self: flex-start;
}

@media (min-width: 768px) {
  #cockpit-dashboard-section .dashboard-grid {
    flex-direction: row;
  }
}


#dashboard-container {
  /* 通用卡片樣式 */
  /* === 基礎卡片結構 (所有等級通用) === */
  /* 通用按鈕樣式，具體顏色在下方各卡片定義 */
  /* ========================================= 各等級特定樣式定義 ========================================= */
  /* --- 1. 一般消費者 (Normal - 淺色系) --- */
  /* --- 2. 銀卡會員 (Silver - 原本設計) --- */
  /* --- 3. 金卡會員 (Gold - 奢華感) --- */
  /* --- 4. 黑卡會員 (Black - 尊榮感) --- */
  /* === RWD 響應式設定 (保持原本的 RWD 功能) === */
  /* === 2. 升級挑戰 === */
  /* === 3. 歷史紀錄 === */
  /* === 4. 底部廣告 (Dark Promo) === */
  /* 裝飾背景圓圈 */
  /* === RWD 響應式設定 === */
}

#dashboard-container :root {
  --primary-orange: #ff7e32;
  --primary-green: #6ec05e;
  --text-dark: #333;
  --text-gray: #888;
  --bg-light: #f4f6f8;
  --white: #fff;
  --promo-gold: #b88746;
  --border-radius: 16px;
}

#dashboard-container * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#dashboard-container body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  padding: 20px;
}

#dashboard-container .dashboard-container {
  width: 100%;
  /* 限制最大寬度，類似手機/平板介面 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#dashboard-container .card {
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#dashboard-container .card {
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  /* 桌面版最大寬度 */
}

#dashboard-container .member-card {
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* 預設文字顏色，深色背景的卡片會用到 */
  color: white;
  display: flex !important;
  /* 如果還是不行才加 !important */
  flex-direction: row;
  /* 強制轉回水平排列 */
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#dashboard-container .member-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

#dashboard-container .member-icon {
  width: 50px;
  height: 50px;
  /* 預設 icon 背景，半透明白 */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

#dashboard-container .member-text h2 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

#dashboard-container .member-text p {
  font-size: 0.9rem;
  opacity: 0.9;
}

#dashboard-container .points-info {
  text-align: right;
}

#dashboard-container .points-info .label {
  font-size: 0.8rem;
  opacity: 0.8;
}

#dashboard-container .points-info .points {
  font-size: 2rem;
  font-weight: 700;
  margin: 5px 0;
}

#dashboard-container .points-info .points-sub {
  font-size: 0.75rem;
  margin-bottom: 10px;
  opacity: 0.8;
}

#dashboard-container .btn-action {
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  font-size: 0.9rem;
}

#dashboard-container .btn-action:hover {
  transform: scale(1.05);
}

#dashboard-container .card-normal {
  /* 清新藍綠漸層 */
  background: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
  /* 淺色背景，文字要用深色 */
  color: #333;
}

#dashboard-container .card-normal .member-icon {
  background: rgba(0, 0, 0, 0.05);
  /* 深色半透明背景 */
  color: #555;
}

#dashboard-container .card-normal .btn-action {
  background: #333;
  /* 深色按鈕 */
  color: white;
}

#dashboard-container .card-normal .btn-action:hover {
  background: #555;
}

#dashboard-container .card-silver {
  background: linear-gradient(100deg, #ff8c42 0%, #6ec05e 100%);
  color: white;
}

#dashboard-container .card-silver .btn-action {
  background: white;
  color: #ff7e32;
  /* 橘色文字 */
}

#dashboard-container .card-silver .btn-action:hover {
  background: #f0f0f0;
}

#dashboard-container .card-gold {
  /* 金屬光澤漸層 */
  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7);
  /* 為了在金色背景上看得清，使用深棕色文字 */
  color: #5d4037;
}

#dashboard-container .card-gold .member-icon {
  background: rgba(93, 64, 55, 0.2);
  /* 深棕色半透明 */
  color: #5d4037;
}

#dashboard-container .card-gold .btn-action {
  background: #5d4037;
  /* 深棕色按鈕 */
  color: #fcf6ba;
  /* 淺金色文字 */
}

#dashboard-container .card-gold .btn-action:hover {
  background: #795548;
}

#dashboard-container .card-black {
  /* 深邃黑藍漸層 */
  background: linear-gradient(to right, #141e30, #243b55);
  color: white;
  border: 1px solid rgba(255, 215, 0, 0.3);
  /* 加一點金色邊框增加質感 */
}

#dashboard-container .card-black .member-icon {
  background: rgba(255, 215, 0, 0.15);
  /* 金色半透明背景 */
  color: #ffd700;
  /* 金色圖示 */
}

#dashboard-container .card-black .member-text h2 {
  /* 標題加一點金色文字陰影 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#dashboard-container .card-black .points {
  color: #ffd700;
  /* 點數用金色強調 */
}

#dashboard-container .card-black .btn-action {
  background: linear-gradient(45deg, #ffd700, #ffca28);
  /* 金色漸層按鈕 */
  color: #5d4037;
  /* 深色文字 */
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}

#dashboard-container .card-black .btn-action:hover {
  background: linear-gradient(45deg, #ffca28, #ffd700);
}

@media (max-width: 600px) {
  #dashboard-container {
    /* 特別針對淺色卡片 (Normal/Gold) 在手機版的格線顏色調整 */
  }

  #dashboard-container .member-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  #dashboard-container .points-info {
    width: 100%;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  #dashboard-container .card-normal .points-info,
  #dashboard-container .card-gold .points-info {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  #dashboard-container .points-info .points-sub {
    width: 100%;
    margin-bottom: 10px;
  }
}

#dashboard-container .member-text h2 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

#dashboard-container .member-text p {
  font-size: 0.9rem;
  opacity: 0.9;
}

#dashboard-container .points-info {
  text-align: right;
}

#dashboard-container .points-info .label {
  font-size: 0.8rem;
  opacity: 0.8;
}

#dashboard-container .points-info .points {
  font-size: 2rem;
  font-weight: 700;
  margin: 5px 0;
}

#dashboard-container .points-info .points-sub {
  font-size: 0.75rem;
  margin-bottom: 10px;
  opacity: 0.8;
}

#dashboard-container .btn-white {
  background: var(--white);
  color: var(--primary-orange);
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}

#dashboard-container .btn-white:hover {
  transform: scale(1.05);
}

#dashboard-container .card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

#dashboard-container .card-header h3 {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

#dashboard-container .card-header .date {
  font-size: 0.8rem;
  color: var(--text-gray);
}

#dashboard-container .progress-section {
  margin-bottom: 20px;
}

#dashboard-container .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--text-gray);
}

#dashboard-container .progress-labels .numbers {
  color: var(--text-dark);
}

#dashboard-container .progress-bar {
  width: 100%;
  height: 16px;
  background-color: #eee;
  border-radius: 8px;
  overflow: hidden;
}

#dashboard-container .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff9a44, #73cf60);
  text-align: right;
  padding-right: 8px;
  color: white;
  font-size: 0.7rem;
  line-height: 16px;
  font-weight: bold;
}

#dashboard-container .alert-box {
  background: #fff8e1;
  border: 1px solid #ffe0b2;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
}

#dashboard-container .alert-icon {
  width: 40px;
  height: 40px;
  background: #ff9800;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#dashboard-container .alert-text p {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin-top: 2px;
}

#dashboard-container .gold-text {
  color: #b88746;
  font-weight: bold;
}

#dashboard-container .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

#dashboard-container .tabs {
  display: flex;
  gap: 8px;
}

#dashboard-container .tabs button {
  background: #eee;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-gray);
  cursor: pointer;
}

#dashboard-container .tabs button.active {
  background: var(--primary-orange);
  color: white;
}

#dashboard-container .history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

#dashboard-container .history-item:last-child {
  border-bottom: none;
}

#dashboard-container .item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#dashboard-container .item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#dashboard-container .item-icon.orange {
  background: #ff7e32;
}

#dashboard-container .item-title {
  font-weight: 500;
  margin-bottom: 4px;
}

#dashboard-container .item-title .tag {
  font-size: 0.7rem;
  background: #fff3e0;
  color: #e65100;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 5px;
}

#dashboard-container .item-date {
  font-size: 0.8rem;
  color: var(--text-gray);
}

#dashboard-container .item-right {
  display: flex;
  gap: 20px;
  text-align: right;
}

#dashboard-container .item-right .col {
  display: flex;
  flex-direction: column;
}

#dashboard-container .item-right .label {
  font-size: 0.75rem;
  color: var(--text-gray);
  margin-bottom: 4px;
}

#dashboard-container .item-right .amount {
  font-weight: bold;
}

#dashboard-container .item-right .points-gain {
  color: #e65100;
  font-weight: bold;
}

#dashboard-container .status-pending {
  font-size: 0.8rem;
  color: var(--text-gray);
}

#dashboard-container .promo-card {
  background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

#dashboard-container .promo-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

#dashboard-container .promo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

#dashboard-container .promo-tag {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: 10px;
}

#dashboard-container .promo-text h2 {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

#dashboard-container .promo-text p {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 15px;
}

#dashboard-container .highlight {
  color: #ffd700;
  font-weight: bold;
  border-bottom: 1px dashed #ffd700;
}

#dashboard-container .benefits {
  list-style: none;
  display: flex;
  gap: 15px;
  font-size: 0.8rem;
  margin-bottom: 20px;
  opacity: 0.9;
}

#dashboard-container .benefits li i {
  color: #90ee90;
  margin-right: 4px;
}

#dashboard-container .btn-gold {
  background: #ffc107;
  border: none;
  color: #5d4037;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
}

#dashboard-container .gold-card-visual {
  width: 200px;
  height: 120px;
  background: linear-gradient(45deg, #ffd700, #ffca28);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  color: #5d4037;
  font-weight: bold;
  position: relative;
}

#dashboard-container .gold-card-visual .badge {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
}

#dashboard-container .lock-icon {
  font-size: 1.5rem;
  background: rgba(0, 0, 0, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  #dashboard-container {
    /* 會員卡片手機版變垂直 */
    /* 歷史紀錄手機版調整 */
    /* 廣告卡片手機版調整 */
  }

  #dashboard-container .member-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  #dashboard-container .points-info {
    width: 100%;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  #dashboard-container .points-info .points-sub {
    width: 100%;
    /* 強制換行 */
    margin-bottom: 10px;
  }

  #dashboard-container .history-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #dashboard-container .tabs {
    width: 100%;
    overflow-x: auto;
    /* 允許橫向捲動 */
    padding-bottom: 5px;
  }

  #dashboard-container .tabs button {
    flex-shrink: 0;
  }

  #dashboard-container .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #dashboard-container .item-right {
    width: 100%;
    justify-content: space-between;
    padding-left: 52px;
    /* 對齊上方的標題文字 (icon 40px + gap 12px) */
  }

  #dashboard-container .promo-content {
    flex-direction: column-reverse;
    gap: 20px;
  }

  #dashboard-container .gold-card-visual {
    width: 100%;
    max-width: 280px;
  }

  #dashboard-container .benefits {
    flex-direction: column;
    gap: 5px;
  }
}

/* VIP Theme Styles - 整合至 style-v8-1.css */
/* 黑色主題 (bg4) - 預設 */
#cockpit-dashboard-section.theme-black {
  --bg-main: transparent;
  --card-bg: rgba(255, 255, 255, 0.1);
  /* 卡片背景改為半透明 */
  --panel-bg: rgba(255, 255, 255, 0.1);
  /* 子區塊背景半透明 */
  --text-main: #ffffff;
  /* 主文字白色 */
  --text-sub: rgba(255, 255, 255, 0.7);
  /* 次要文字淺灰 */
  --border-light: rgba(255, 255, 255, 0.2);
  /* 邊框淺色半透明 */
  background-image: url('https://www.lezonemall.com/image/vip/bg4.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* 讓背景固定，滾動時更有質感 */
}




:root {
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
}

body {
  background-color: #f3f4f6;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#app-layout {
  width: 100%;
  /* max-width: 1199px; */
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  position: relative;
  min-height: 100vh;
}

.content-section {
  display: none;
  animation: fadeIn 0.3s ease;
}

.content-section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.placeholder-box {
  background: #fff;
  padding: 40px;
  text-align: center;
}

#sidebar {
  width: 260px;
  background-color: #ffffff;
  border-right: 1px solid #e5e7eb;
  height: 100vh;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease;
}

.sidebar-header {
  padding: 0 24px 20px 24px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  border-bottom: 2px solid #f3f4f6;
  margin-bottom: 16px;
}

.sidebar-header .subtitle {
  display: block;
  font-size: 13px;
  color: #9ca3af;
  font-weight: 400;
  margin-top: 4px;
  font-family: sans-serif;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  gap: 4px;
}

.nav-item {
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  color: #4b5563;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
}

.nav-item a {
  padding: 14px 20px;
}

.nav-item:hover {
  background-color: #f97316;
  color: #f9fafb;
}

.nav-item:hover a {
  color: #fff !important;
}

.nav-item.active {
  background-color: #fff7ed;
  color: #f97316;
  font-weight: 700;
}

.nav-item .indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background-color: #f97316;
  border-radius: 0 2px 2px 0;
  transition: height 0.2s;
}

.nav-item.active .indicator {
  height: 60%;
}

.nav-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 12px 0;
}

.nav-item.logout {
  color: #6b7280;
  margin-top: auto;
}

.nav-item.logout:hover {
  background-color: #fef2f2;
  color: #ef4444;
}

#main-content {
  flex-grow: 1;
  min-width: 0;
}

#mobile-header {
  display: none;
}

#sidebar-overlay {
  display: none;
}

@media (max-width: 1023px) {
  #app-layout {
    flex-direction: column;
  }

  #mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
  }

  #btn-toggle-menu {
    background: none;
    border: none;
    font-size: 20px;
    color: #374151;
    cursor: pointer;
  }

  .mobile-logo {
    font-weight: bold;
    font-size: 16px;
    color: #1f2937;
  }

  .mobile-user {
    font-size: 20px;
    color: #f97316;
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding-top: 10px;
  }

  #sidebar.open {
    transform: translateX(0);
  }

  #sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }

  #sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  #main-content {
    width: 100%;
  }
}




#income-analysis-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --border-light: #e5e7eb;
  --color-purple: #a855f7;
  --color-green: var(--orange-500);
  --color-gold: #eab308;
  --color-orange: #f97316;
  --footer-bg: #fffbeb;
  --footer-border: #fcd34d;
  --footer-text: #92400e;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --radius-lg: 16px;
  --radius-md: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#income-analysis-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#income-analysis-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#income-analysis-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-orange);
  border-radius: 4px;
}

#income-analysis-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#income-analysis-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#income-analysis-section .analysis-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-shadow: var(--shadow-card);
}

#income-analysis-section .chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 250px;
}

#income-analysis-section .donut-chart {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--color-purple) 0% 35%,
      var(--color-green) 35% 65%,
      var(--color-gold) 65% 85%,
      var(--color-orange) 85% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#income-analysis-section .donut-hole {
  width: 170px;
  height: 170px;
  background-color: var(--card-bg);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

#income-analysis-section .chart-label {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 6px;
  font-weight: 500;
}

#income-analysis-section .chart-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-orange);
  letter-spacing: -0.5px;
}

#income-analysis-section .list-container {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#income-analysis-section .income-item {
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#income-analysis-section .item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#income-analysis-section .item-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

#income-analysis-section .icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#income-analysis-section .item-info h4 {
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text-main);
  font-weight: 700;
}

#income-analysis-section .item-amount {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}

#income-analysis-section .item-percent {
  font-size: 18px;
  font-weight: 800;
}

#income-analysis-section .progress-bg {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

#income-analysis-section .progress-bar {
  height: 100%;
  border-radius: 4px;
}

#income-analysis-section .footer-note {
  background-color: var(--footer-bg);
  border: 1px solid var(--footer-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-top: 12px;
}

#income-analysis-section .footer-title {
  color: #b45309;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#income-analysis-section .footer-desc {
  font-size: 13px;
  color: var(--footer-text);
  line-height: 1.6;
}

@media (min-width: 768px) {
  #income-analysis-section .analysis-card {
    flex-direction: row;
    align-items: center;
    padding: 40px;
  }
}

#org-chart-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --border-light: #e5e7eb;
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-green: var(--orange-500);
  --color-purple: #a855f7;
  --color-silver: #64748b;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#org-chart-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#org-chart-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#org-chart-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#org-chart-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#org-chart-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#org-chart-section .stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

#org-chart-section .stat-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#org-chart-section .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

#org-chart-section .stat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-sub);
}

#org-chart-section .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#org-chart-section .stat-value {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.2;
}

#org-chart-section .stat-sub {
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}

#org-chart-section .card-orange .stat-icon {
  background: rgba(249, 115, 22, 0.1);
  color: var(--color-primary);
}

#org-chart-section .card-orange .stat-value {
  color: var(--color-primary);
}

#org-chart-section .card-green .stat-icon {
  background: rgba(249, 115, 22, 0.1);
  color: var(--color-green);
}

#org-chart-section .card-green .stat-value {
  color: var(--color-green);
}

#org-chart-section .card-purple .stat-icon {
  background: rgba(168, 85, 247, 0.1);
  color: var(--color-purple);
}

#org-chart-section .card-purple .stat-value {
  color: var(--color-purple);
}

#org-chart-section .tabs-container {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
}

#org-chart-section .tab-btn {
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

#org-chart-section .tab-btn.active {
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

#org-chart-section .tab-btn.inactive {
  background-color: #f1f5f9;
  color: var(--text-sub);
}

#org-chart-section .tab-btn.inactive:hover {
  background-color: #e2e8f0;
  color: var(--text-main);
}

#org-chart-section .member-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#org-chart-section .member-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

#org-chart-section .member-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border-color: var(--color-primary);
}

#org-chart-section .member-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

#org-chart-section .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f3f4f6;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#org-chart-section .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#org-chart-section .member-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#org-chart-section .name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#org-chart-section .member-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

#org-chart-section .badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1;
}

#org-chart-section .badge-gold {
  background-color: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

#org-chart-section .badge-silver {
  background-color: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

#org-chart-section .join-date {
  font-size: 13px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 5px;
}

#org-chart-section .member-right {
  text-align: right;
}

#org-chart-section .contribution-label {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 4px;
}

#org-chart-section .contribution-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (min-width: 768px) {
  #org-chart-section .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  #org-chart-section .member-item {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  #org-chart-section .member-right {
    text-align: left;
    width: 100%;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #org-chart-section .contribution-amount {
    font-size: 16px;
  }
}

#asset-dual-wallet-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --border-light: #e5e7eb;
  --color-primary: #f97316;
  --theme-green: var(--orange-500);
  --theme-green-dark: var(--orange-600);
  --bg-green-light: rgba(249, 115, 22, 0.1);
  --theme-purple: #a855f7;
  --theme-purple-dark: #7e22ce;
  --bg-purple-light: rgba(168, 85, 247, 0.1);
  --tag-gold-bg: #fffbeb;
  --tag-gold-text: #b45309;
  --tag-gold-border: #fcd34d;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --radius-card: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#asset-dual-wallet-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#asset-dual-wallet-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#asset-dual-wallet-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#asset-dual-wallet-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#asset-dual-wallet-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#asset-dual-wallet-section .wallet-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#asset-dual-wallet-section .wallet-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 28px;
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}

#asset-dual-wallet-section .wallet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

#asset-dual-wallet-section .wallet-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

#asset-dual-wallet-section .card-cash::before {
  background-color: var(--theme-green);
}

#asset-dual-wallet-section .card-points::before {
  background-color: var(--theme-purple);
}

#asset-dual-wallet-section .card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

#asset-dual-wallet-section .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

#asset-dual-wallet-section .card-cash .card-icon {
  background-color: var(--bg-green-light);
  color: var(--theme-green);
}

#asset-dual-wallet-section .card-points .card-icon {
  background-color: var(--bg-purple-light);
  color: var(--theme-purple);
}

#asset-dual-wallet-section .card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

#asset-dual-wallet-section .card-name span {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
  margin-top: 3px;
}

#asset-dual-wallet-section .balance-area {
  margin-bottom: 28px;
}

#asset-dual-wallet-section .balance-label {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 6px;
  font-weight: 500;
}

#asset-dual-wallet-section .balance-amount {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#asset-dual-wallet-section .text-green {
  color: var(--theme-green);
}

#asset-dual-wallet-section .text-purple {
  color: var(--theme-purple);
}

#asset-dual-wallet-section .detail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  border-top: 1px dashed var(--border-light);
  padding-top: 20px;
}

#asset-dual-wallet-section .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}

#asset-dual-wallet-section .row-label {
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 8px;
}

#asset-dual-wallet-section .row-value {
  font-weight: 600;
  letter-spacing: 0.3px;
}

#asset-dual-wallet-section .tag-black-card {
  font-size: 11px;
  background-color: var(--tag-gold-bg);
  color: var(--tag-gold-text);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--tag-gold-border);
  font-weight: bold;
}

#asset-dual-wallet-section .btn-action {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#asset-dual-wallet-section .btn-action:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

#asset-dual-wallet-section .btn-action:active {
  transform: scale(0.98);
}

#asset-dual-wallet-section .btn-green {
  background-color: var(--theme-green);
}

#asset-dual-wallet-section .btn-purple {
  background-color: var(--theme-purple);
}

@media (min-width: 768px) {
  #asset-dual-wallet-section .wallet-container {
    flex-direction: row;
  }
}

#faq-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --color-primary: #f97316;
  --border-light: #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#faq-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#faq-section .section-header {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#faq-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#faq-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#faq-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#faq-section .faq-container {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#faq-section .category-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-light);
}

#faq-section .faq-item {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-light);
}

#faq-section .faq-item:last-child {
  border-bottom: none;
}

#faq-section .faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s;
}

#faq-section .faq-question:hover .q-text {
  color: var(--color-primary);
}

#faq-section .q-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  padding-right: 16px;
  line-height: 1.5;
}

#faq-section .icon-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f3f4f6;
  color: var(--text-main);
  position: relative;
  display: block;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

#faq-section .icon-toggle::before,
#faq-section .icon-toggle::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  border-radius: 2px;
}

#faq-section .icon-toggle::before {
  width: 14px;
  height: 2px;
}

#faq-section .icon-toggle::after {
  width: 2px;
  height: 14px;
}

#faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

#faq-section .faq-answer .answer-content {
  padding: 15px;
  font-size: 15px;
  color: var(--text-sub);
  line-height: 1.6;
}

#faq-section .faq-answer .btn-copy {
  display: block;
  margin-top: 15px;
  margin-left: auto;
  margin-bottom: 15px;
  background-color: #000000;
  border: none;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
}

#faq-section .faq-item.active .q-text {
  font-weight: 700;
}

#faq-section .faq-item.active .icon-toggle {
  background-color: #000000;
  color: #ffffff;
}

#faq-section .faq-item.active .icon-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

#gallery-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --color-primary: #f97316;
  --color-primary-rgb: 249, 115, 22;
  --border-light: #e5e7eb;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#gallery-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#gallery-section .section-header {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#gallery-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#gallery-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#gallery-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#gallery-section .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

#gallery-section .gallery-item {
  display: block;
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
}

#gallery-section .gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(249, 115, 22, 0.3);
}

#gallery-section .image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

#gallery-section .item-caption {
  padding: 15px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

#gallery-section .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

#gallery-section .gallery-item:hover .image-wrapper img {
  transform: scale(1.05);
}

#gallery-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(249, 115, 22, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#gallery-section .overlay i {
  color: #ffffff;
  font-size: 32px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

#gallery-section .gallery-item:hover .overlay {
  opacity: 1;
}

#gallery-section .gallery-item:hover .overlay i {
  transform: translateY(0);
}

/* 範圍限定：所有變數與樣式都鎖在 #member-dashboard-wrapper 內 */
#member-dashboard-wrapper {
  --primary-orange: #f97316;
  --primary-green: var(--orange-600);
  --gradient-header: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --gradient-gold: linear-gradient(135deg, #92400e 0%, #78350f 100%);
  --bg-page: #f3f4f6;
  --bg-card: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --text-light: #9ca3af;
  --border-color: #f3f4f6;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-page);
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  color: var(--text-main);
  box-sizing: border-box;

  /* --- 關鍵修改開始 --- */
  width: 100%;
  /* 強制佔滿寬度 */
  max-width: 100%;
  /* 移除原本的 800px 限制 */
  margin: 0;
  /* 移除置中，填滿容器 */
  padding: 20px;
  /* 保持內距，避免卡片貼死邊緣 (可依需求改為 0) */
  /* --- 關鍵修改結束 --- */

  color: var(--text-main);
  box-sizing: border-box;
}

@media (min-width: 1024px) {

  #member-dashboard-wrapper .member-card,
  #member-dashboard-wrapper .section-card,
  #member-dashboard-wrapper .promo-footer-card {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* 強制 reset，只影響此 ID 內部的元素 */
#member-dashboard-wrapper * {
  box-sizing: border-box;
}

/* 1. 頭部會員卡片 */
#member-dashboard-wrapper .member-card {
  background: var(--gradient-header);
  border-radius: 20px;
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  box-shadow: 0 10px 20px rgba(132, 204, 22, 0.3);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

#member-dashboard-wrapper .member-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

#member-dashboard-wrapper .card-left {
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 2;
}

#member-dashboard-wrapper .member-icon-box {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#member-dashboard-wrapper .member-text h2 {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 700;
}

#member-dashboard-wrapper .member-text p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

#member-dashboard-wrapper .card-right {
  text-align: right;
  z-index: 2;
}

#member-dashboard-wrapper .points-label {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 2px;
}

#member-dashboard-wrapper .points-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

#member-dashboard-wrapper .points-sub {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 12px;
}

#member-dashboard-wrapper .btn-shop {
  background: white;
  color: var(--primary-orange);
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s;
}

#member-dashboard-wrapper .btn-shop:active {
  transform: scale(0.95);
}

/* 2. 通用卡片區塊 */
#member-dashboard-wrapper .section-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

#member-dashboard-wrapper .text-orange {
  color: var(--primary-orange);
}

/* 標題樣式 */
#member-dashboard-wrapper .card-header-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

#member-dashboard-wrapper .title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

#member-dashboard-wrapper .title-with-icon h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

#member-dashboard-wrapper .date-tag {
  font-size: 12px;
  color: var(--text-sub);
}

/* 進度條區域 */
#member-dashboard-wrapper .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

#member-dashboard-wrapper .progress-vals strong {
  color: var(--text-main);
  font-size: 15px;
}

#member-dashboard-wrapper .progress-track {
  background: #e5e7eb;
  height: 14px;
  border-radius: 7px;
  margin-bottom: 16px;
  overflow: hidden;
}

#member-dashboard-wrapper .progress-fill {
  background: var(--orange-400);
  height: 100%;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}

#member-dashboard-wrapper .progress-text {
  font-size: 10px;
  color: white;
  font-weight: bold;
}

/* 黃色提示框 */
#member-dashboard-wrapper .info-box {
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#member-dashboard-wrapper .icon-fire {
  background: #f97316;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-bottom-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

#member-dashboard-wrapper .info-text h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
}

#member-dashboard-wrapper .info-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-sub);
}

#member-dashboard-wrapper .gold-text {
  color: #d97706;
  font-weight: bold;
  text-decoration: underline;
}

/* 3. 交易列表樣式 */
#member-dashboard-wrapper .list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

#member-dashboard-wrapper .filter-tabs {
  display: flex;
  gap: 8px;
}

#member-dashboard-wrapper .tab {
  background: #f3f4f6;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-sub);
  cursor: pointer;
  font-weight: 600;
}

#member-dashboard-wrapper .tab.active {
  background: var(--primary-orange);
  color: white;
}

#member-dashboard-wrapper .transaction-list {
  display: flex;
  flex-direction: column;
}

#member-dashboard-wrapper .trans-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}

#member-dashboard-wrapper .trans-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#member-dashboard-wrapper .item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#member-dashboard-wrapper .item-icon {
  width: 40px;
  height: 40px;
  background: #ffedd5;
  color: #ea580c;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

#member-dashboard-wrapper .item-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#member-dashboard-wrapper .tag-silver {
  background: #ffedd5;
  color: #c2410c;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: normal;
}

#member-dashboard-wrapper .item-date {
  font-size: 12px;
  color: var(--text-light);
}

#member-dashboard-wrapper .item-right {
  text-align: right;
}

#member-dashboard-wrapper .trans-label {
  font-size: 10px;
  color: var(--text-light);
  margin-bottom: 2px;
}

#member-dashboard-wrapper .trans-amount {
  font-weight: 800;
  font-size: 16px;
  color: var(--text-main);
}

#member-dashboard-wrapper .trans-points {
  font-size: 12px;
  color: #d97706;
  font-weight: 700;
}

#member-dashboard-wrapper .trans-status {
  font-size: 11px;
  color: var(--text-light);
}

/* 4. 底部廣告 */
#member-dashboard-wrapper .promo-footer-card {
  background: var(--gradient-gold);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fffbeb;
  position: relative;
  overflow: hidden;
}

#member-dashboard-wrapper .promo-footer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.3;
}

#member-dashboard-wrapper .promo-content {
  flex: 1;
  z-index: 2;
  padding-right: 20px;
}

#member-dashboard-wrapper .promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#member-dashboard-wrapper .promo-content h2 {
  font-size: 24px;
  margin: 0 0 8px 0;
  color: white;
}

#member-dashboard-wrapper .promo-desc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

#member-dashboard-wrapper .promo-desc li {
  margin-bottom: 4px;
}

#member-dashboard-wrapper .promo-desc strong {
  color: #fcd34d;
}

#member-dashboard-wrapper .feature-list {
  display: flex;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  color: #d1d5db;
}

#member-dashboard-wrapper .btn-gold {
  background: #fbbf24;
  color: #78350f;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#member-dashboard-wrapper .promo-image {
  z-index: 2;
}

/* 模擬金卡視覺 */
#member-dashboard-wrapper .gold-card-visual {
  width: 160px;
  height: 100px;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transform: rotate(-5deg);
}

#member-dashboard-wrapper .card-chip {
  width: 24px;
  height: 18px;
  background: #d97706;
  border-radius: 4px;
  opacity: 0.6;
}

#member-dashboard-wrapper .card-logo {
  text-align: right;
  font-size: 10px;
  font-weight: bold;
  color: #78350f;
}

#member-dashboard-wrapper .card-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#member-dashboard-wrapper .card-text {
  font-size: 12px;
  font-weight: bold;
  color: #78350f;
  line-height: 1.2;
}

#member-dashboard-wrapper .card-text small {
  display: block;
  font-size: 8px;
  font-weight: normal;
  opacity: 0.8;
}

/* RWD 響應式 */
@media (max-width: 600px) {
  #member-dashboard-wrapper .member-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  #member-dashboard-wrapper .card-right {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #member-dashboard-wrapper .btn-shop {
    width: 100%;
  }

  #member-dashboard-wrapper .promo-footer-card {
    flex-direction: column;
    align-items: flex-start;
  }

  #member-dashboard-wrapper .promo-image {
    margin-top: 20px;
    align-self: center;
  }

  #member-dashboard-wrapper .list-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #member-dashboard-wrapper .filter-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  #member-dashboard-wrapper .tab {
    white-space: nowrap;
  }
}


/* 1. 範圍限定：所有樣式都鎖定在 #points-transfer-wrapper 內 */
#points-transfer-wrapper {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* 定義顏色變數，方便統一管理 */
  --main-orange: #f97316;
  /* 指定主色 */
  --dark-orange: #ea580c;
  /* 深一點的橘色 (用在漸層或Hover) */
  --shadow-orange: rgba(249, 115, 22, 0.4);
  /* 陰影顏色 */
  --light-orange-bg: rgba(249, 115, 22, 0.1);
  /* 輸入框聚焦背景 */
}

#points-transfer-wrapper * {
  box-sizing: border-box;
}

/* 2. 標題區域 */
#points-transfer-wrapper .page-header {
  margin-bottom: 30px;
  border-left: 5px solid var(--main-orange);
  /* 橘色裝飾線 */
  padding-left: 15px;
}

#points-transfer-wrapper .page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

#points-transfer-wrapper .page-header .sub-text {
  color: #888;
  font-size: 14px;
  margin-top: 5px;
  display: block;
}

/* 3. 卡片主體樣式 (RWD 核心) */
#points-transfer-wrapper .transfer-card {
  background: #ffffff;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 4. 表單元素 */
#points-transfer-wrapper .form-group {
  margin-bottom: 25px;
}

#points-transfer-wrapper .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #444;
  font-size: 15px;
}

#points-transfer-wrapper .form-group label i {
  margin-right: 8px;
  color: var(--main-orange);
  /* Icon 變橘色 */
}

#points-transfer-wrapper .form-group input {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

/* 輸入框聚焦時的效果 */
#points-transfer-wrapper .form-group input:focus {
  border-color: var(--main-orange);
  background-color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px var(--light-orange-bg);
  /* 橘色光暈 */
}

#points-transfer-wrapper .balance-hint {
  font-size: 13px;
  color: #666;
  margin-top: 8px;
  text-align: right;
}

#points-transfer-wrapper .balance-hint span {
  color: var(--main-orange);
  font-weight: bold;
}

/* 5. 按鈕樣式 (橘色漸層) */
#points-transfer-wrapper .btn-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--main-orange) 0%, var(--dark-orange) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#points-transfer-wrapper .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--shadow-orange);
  /* 橘色陰影 */
}

#points-transfer-wrapper .btn-submit:active {
  transform: translateY(0);
}

/* 6. RWD 手機版適配 */
@media (max-width: 600px) {
  #points-transfer-wrapper {
    padding: 15px;
  }

  #points-transfer-wrapper .transfer-card {
    padding: 25px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  #points-transfer-wrapper .page-header h2 {
    font-size: 20px;
  }
}

#cockpit-dashboard-section {
  /* --- 色彩變數 (White & Orange Theme) --- */
  --bg-main: #f8fafc;
  /* 整體背景：淺灰白 */
  --card-bg: #ffffff;
  /* 大卡片背景：純白 */
  --panel-bg: #f9fafb;
  /* 子面板背景：極淺灰 */

  --text-main: #1f2937;
  /* 主要文字 */
  --text-sub: #6b7280;
  /* 次要文字 */

  --border-light: #e5e7eb;
  /* 淺灰邊框 */

  /* 核心橘色 (品牌色) */
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;

  /* 高級金 (用於黑卡/皇冠) - 調整為深金色以適應白底 */
  --color-gold: #d97706;
  /* Amber 600 */
  --bg-gold-light: #fffbeb;
  /* Amber 50 */

  /* 狀態色 */
  --color-green: var(--orange-500);
  /* 成長/達成 */
  --bg-green-light: var(--orange-100);

  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --radius-lg: 16px;
  --radius-md: 12px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#cockpit-dashboard-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- 標題區塊 --- */
#cockpit-dashboard-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#cockpit-dashboard-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#cockpit-dashboard-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#cockpit-dashboard-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- 主卡片 --- */
#cockpit-dashboard-section .main-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-size: cover;
  background-position: center;
}

/* 頂部裝飾光暈 (極淡的橘色) */
#cockpit-dashboard-section .main-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* --- 卡片頂部資訊 --- */
#cockpit-dashboard-section .profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px dashed var(--border-light);
  padding-bottom: 24px;
}

#cockpit-dashboard-section .profile-left {
  display: flex;
  gap: 16px;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 15px 15px;
  border-radius: 15px;
}

#cockpit-dashboard-section .avatar-circle {
  width: 60px;
  height: 60px;
  /* 橘金色漸層背景 */
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
  border: 3px solid #fff;
  /* 白框增加層次 */
}

#cockpit-dashboard-section .profile-info h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

#cockpit-dashboard-section .profile-left .card {
  width: 300px;
}

#cockpit-dashboard-section .profile-left .card img {
  width: 100%;
}

#cockpit-dashboard-section .status-tag {
  font-size: 12px;
  color: var(--color-gold);
  /* 深金色文字 */
  background-color: var(--bg-gold-light);
  /* 淺金底 */
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

#cockpit-dashboard-section .profile-right {
  text-align: right;

}

#cockpit-dashboard-section .profile-right .profile-right-content {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 15px 15px;
  border-radius: 15px;
}

#cockpit-dashboard-section .id-label {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 4px;
}

#cockpit-dashboard-section .id-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.5px;
  font-family: monospace;
}

/* --- 儀表板網格 --- */
#cockpit-dashboard-section .dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 子區塊樣式 */
#cockpit-dashboard-section .sub-panel {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s;
}

#cockpit-dashboard-section .sub-panel:hover {
  transform: translateY(-2px);
  /* 輕微互動 */
  border-color: #d1d5db;
}

/* --- 左側：進度條區塊 --- */
#cockpit-dashboard-section .progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

#cockpit-dashboard-section .panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

#cockpit-dashboard-section .badge-success {
  background-color: var(--bg-green-light);
  color: var(--color-green);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

#cockpit-dashboard-section .progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

#cockpit-dashboard-section .current-val {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
}

/* 進度條 */
#cockpit-dashboard-section .progress-track {
  width: 100%;
  height: 10px;
  background-color: #e5e7eb;
  /* 淺灰軌道 */
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}

#cockpit-dashboard-section .progress-fill {
  height: 100%;
  /* 橘色漸層 */
  background: linear-gradient(90deg, #fb923c, #f97316);
  border-radius: 5px;
  width: 100%;
}

#cockpit-dashboard-section .progress-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-sub);
}

#cockpit-dashboard-section .percent-gain {
  color: var(--color-green);
  font-weight: 600;
}

/* --- 右側：預估收入區塊 --- */
#cockpit-dashboard-section .income-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-sub);
}

#cockpit-dashboard-section .icon-coin {
  color: var(--color-primary);
  background: rgba(249, 115, 22, 0.1);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#cockpit-dashboard-section .income-amount {
  font-size: 34px;
  font-weight: 800;
  color: var(--text-main);
  /* 數字用深灰/黑，更穩重 */
  margin-bottom: 4px;
  line-height: 1.1;
  letter-spacing: -1px;
}

#cockpit-dashboard-section .income-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 16px;
}

#cockpit-dashboard-section .growth-indicator {
  font-size: 13px;
  color: var(--color-green);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  background-color: rgba(249, 115, 22, 0.05);
  /* 極淡橘底 */
  padding: 6px 10px;
  border-radius: 8px;
  align-self: flex-start;
  /* 讓背景寬度自適應內容 */
}

/* --- RWD Media Queries --- */
@media (min-width: 768px) {
  #cockpit-dashboard-section .dashboard-grid {
    flex-direction: row;
  }
}

#marketing-tools-section {
  /* --- 色彩變數設定 (White & Orange Theme) --- */
  --bg-main: #f8fafc;
  /* 整體背景：極淺灰藍/白 */
  --card-bg: #ffffff;
  /* 卡片背景：純白 */

  --text-main: #1f2937;
  /* 主要文字：深灰黑 */
  --text-sub: #6b7280;
  /* 次要文字：中灰 */

  --color-primary: #f97316;
  /* 主色：活力橘 */
  --color-primary-dark: #ea580c;
  /* 深橘色 (Hover用) */
  --bg-primary-dim: rgba(249, 115, 22, 0.1);
  /* 淺橘色背景 */

  --color-green: var(--orange-500);
  /* 綠色 (用於數據增長) */
  --bg-input: #f3f4f6;
  /* 輸入框背景：淺灰 */
  --border-light: #e5e7eb;
  /* 淺灰邊框 */

  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#marketing-tools-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 標題區域 */
#marketing-tools-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#marketing-tools-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#marketing-tools-section .section-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#marketing-tools-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 格線佈局 */
#marketing-tools-section .tools-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 卡片共用樣式 */
#marketing-tools-section .tool-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  /* 增加陰影提升層次感 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#marketing-tools-section .tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

/* 卡片頭部 */
#marketing-tools-section .card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

#marketing-tools-section .icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* 改為圓角矩形更現代 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background-color: var(--bg-primary-dim);
  color: var(--color-primary);
}

#marketing-tools-section .card-title {
  font-size: 17px;
  font-weight: bold;
  color: var(--text-main);
}

#marketing-tools-section .card-title span {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  font-weight: normal;
  margin-top: 3px;
}

/* URL 連結區塊 */
#marketing-tools-section .url-box {
  background-color: var(--bg-input);
  border: 1px dashed #d1d5db;
  /* 虛線邊框增加工具感 */
  border-radius: var(--radius-sm);
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 20px;
  word-break: break-all;
  font-weight: 500;
}

/* 按鈕樣式 (統一橘色) */
#marketing-tools-section .btn-action {
  width: 100%;
  border: none;
  padding: 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 24px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(249, 115, 22, 0.2);
}

#marketing-tools-section .btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

#marketing-tools-section .btn-primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 4px 6px rgba(234, 88, 12, 0.3);
}

#marketing-tools-section .btn-primary:active {
  transform: scale(0.98);
}

/* 複製成功樣式 */
#marketing-tools-section .btn-action.copied {
  background-color: var(--color-green) !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* 數據統計區 */
#marketing-tools-section .stats-container {
  margin-top: auto;
}

#marketing-tools-section .stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding-top: 16px;
}

#marketing-tools-section .border-top {
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
  /* 調整間距 */
}

#marketing-tools-section .stats-label {
  color: var(--text-sub);
}

#marketing-tools-section .stats-val {
  font-weight: 700;
  font-size: 16px;
}

#marketing-tools-section .text-primary {
  color: var(--color-primary);
}

#marketing-tools-section .text-green {
  color: var(--color-green);
}

/* QR Code 卡片 */
#marketing-tools-section .qr-display-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

#marketing-tools-section .qr-bg {
  background-color: #ffffff;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

#marketing-tools-section .qr-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#marketing-tools-section .code-label {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 6px;
}

#marketing-tools-section .code-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 1.5px;
  font-family: monospace;
}

/* QR Code 卡片的按鈕距底部調整 */
#marketing-tools-section .qr-card .btn-action {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  #marketing-tools-section .tools-grid {
    flex-direction: row;
    align-items: stretch;
  }
}

#vip-selection-section {
  --bg-main: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1f2937;
  --text-sub: #6b7280;
  --color-primary: #f97316;
  --border-light: #e5e7eb;
  --radius-lg: 16px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 40px 20px;
}

#vip-selection-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#vip-selection-section .section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#vip-selection-section .title-border {
  width: 5px;
  height: 26px;
  background-color: var(--color-primary);
  border-radius: 4px;
}

#vip-selection-section .section-title {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-main);
}

#vip-selection-section .section-subtitle {
  font-size: 14px;
  color: var(--text-sub);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#vip-selection-section .vip-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 992px) {
  #vip-selection-section .vip-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  #vip-selection-section .vip-product-grid {
    grid-template-columns: 1fr;
  }
}

#vip-selection-section .vip-product-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

#vip-selection-section .vip-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

#vip-selection-section .vip-product-img {
  height: 180px;
  background-color: #f8f9fa;
  background-size: cover;
  background-position: center;
  position: relative;
}

#vip-selection-section .vip-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

#vip-selection-section .vip-product-info {
  padding: 25px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#vip-selection-section .vip-product-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.4;
}

#vip-selection-section .vip-product-desc {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 15px;
  line-height: 1.5;
}

#vip-selection-section .vip-product-price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
}

#vip-selection-section .vip-product-price .currency {
  font-size: 0.9rem;
  color: #333;
}

#vip-selection-section .vip-product-price .points {
  font-size: 0.85rem;
  color: #8e44ad;
  background: rgba(142, 68, 173, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

#vip-selection-section .btn-buy {
  width: 100%;
  padding: 10px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

#vip-selection-section .btn-buy:hover {
  background: #000;
}

/* VIP Theme Styles - 整合至 ui.css */

/* --- 通用設定：當套用主題時，讓子區塊背景透明，顯示底圖 --- */
#app-layout[class*="theme-"] #cockpit-dashboard-section,
#app-layout[class*="theme-"] #vip-selection-section,
#app-layout[class*="theme-"] #marketing-tools-section,
main[class*="theme-"] #dashboard-container {
  background-color: transparent;
  --bg-main: transparent;
  /* 覆寫區塊內的變數 */
}

/* 確保內容區域容器也是透明 */
#app-layout[class*="theme-"] #main-content,
main[class*="theme-"] .dashboard-container {
  background: transparent;
}

/* =========================================
   1. 黑色主題 (bg4) - Black / Dark Mode
   ========================================= */
#app-layout.theme-black {
  background-image: url('https://www.lezonemall.com/image/vip/bg4.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 針對 tier-status 頁面的容器設定 */
main.theme-black {
  background-image: url('https://www.lezonemall.com/image/vip/bg4.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 強制覆寫各區塊變數 (權重較高) */
#app-layout.theme-black #cockpit-dashboard-section,
#app-layout.theme-black #vip-selection-section,
#app-layout.theme-black #marketing-tools-section,
main.theme-black {
  --card-bg: rgba(20, 20, 20, 0.75);
  /* 卡片：深黑半透明 */
  --panel-bg: rgba(255, 255, 255, 0.08);
  /* 子面板：微亮半透明 */
  --bg-input: rgba(255, 255, 255, 0.1);
  /* 輸入框：微亮半透明 */

  --text-main: #ffffff;
  /* 主文字：白 */
  --text-sub: #d1d5db;
  /* 次文字：淺灰 */

  --border-light: rgba(255, 255, 255, 0.15);
  /* 邊框：微白 */

  --color-primary: #fb923c;
  /* 主色：亮橘 */
  --bg-primary-dim: rgba(251, 146, 60, 0.2);
  /* 主色背景淡化 */

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.6);
  /* 深邃陰影 */
}

/* Sidebar 樣式調整 */
#app-layout.theme-black #sidebar {
  background-color: rgba(0, 0, 0, 0.85);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#app-layout.theme-black .sidebar-header {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#app-layout.theme-black .sidebar-header .subtitle {
  color: #9ca3af;
}

#app-layout.theme-black .nav-item {
  color: #d1d5db;
}

#app-layout.theme-black .nav-item:hover,
#app-layout.theme-black .nav-item.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fb923c;
}

#app-layout.theme-black .nav-divider {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 特定元素微調：確保標題與價格在深色背景清晰 */
#app-layout.theme-black .vip-product-title,
#app-layout.theme-black .card-title,
#app-layout.theme-black .section-title {
  color: #ffffff !important;
}

#app-layout.theme-black .vip-product-desc {
  color: #d1d5db !important;
}

#app-layout.theme-black .vip-product-price .currency {
  color: #ffffff !important;
}

/* tier-status 頁面卡片強制覆寫 (因為原本寫在 style tag 權重較高) */
main[class*="theme-"] .main-card,
main[class*="theme-"] .challenge-card,
main[class*="theme-"] .history-card,
main[class*="theme-"] .promo-card {
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card) !important;
}

main[class*="theme-"] .profile-info h3,
main[class*="theme-"] .item-desc .item-title,
main[class*="theme-"] .item-right .amount,
main[class*="theme-"] .card-header h3,
main[class*="theme-"] h5 {
  /* 針對標題 "會員成長計畫" */
  color: var(--text-main) !important;
}

/* --- Tier Status 頁面細部元件強制覆寫 --- */

/* 1. 文字顏色修正 */
main[class*="theme-"] .points-info .points,
main[class*="theme-"] .progress-labels .numbers,
main[class*="theme-"] .item-right .points-gain,
main[class*="theme-"] .gold-text,
main[class*="theme-"] .highlight {
  color: var(--color-primary) !important;
}

main[class*="theme-"] .points-info .label,
main[class*="theme-"] .points-info .points-sub,
main[class*="theme-"] .status-tag,
main[class*="theme-"] .item-desc .item-date,
main[class*="theme-"] .item-right .label,
main[class*="theme-"] .item-right .status-pending,
main[class*="theme-"] .card-header .date,
main[class*="theme-"] .progress-labels,
main[class*="theme-"] .alert-text p,
main[class*="theme-"] .promo-text p,
main[class*="theme-"] .benefits li {
  color: var(--text-sub) !important;
}

main[class*="theme-"] .promo-text h2,
main[class*="theme-"] .alert-text strong,
main[class*="theme-"] .history-header h3 {
  color: var(--text-main) !important;
}

/* 2. 背景與邊框修正 (Tabs, AlertBox, DateTag) */
main[class*="theme-"] .card-header .date,
main[class*="theme-"] .tabs button,
main[class*="theme-"] .alert-box {
  background-color: var(--bg-input) !important;
  color: var(--text-sub) !important;
  border: 1px solid var(--border-light) !important;
}

main[class*="theme-"] .tabs button.active {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

main[class*="theme-"] .history-item {
  border-bottom-color: var(--border-light) !important;
}

/* 儀表板特定調整 */
#app-layout.theme-black #cockpit-dashboard-section .profile-left {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#app-layout.theme-black #cockpit-dashboard-section .icon-coin {
  background: rgba(255, 255, 255, 0.1);
}


/* =========================================
   2. 金色主題 (bg3) - Gold / Luxury
   ========================================= */
#app-layout.theme-gold {
  background-image: url('https://www.lezonemall.com/image/vip/bg3.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

main.theme-gold {
  background-image: url('https://www.lezonemall.com/image/vip/bg3.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#app-layout.theme-gold #cockpit-dashboard-section,
#app-layout.theme-gold #vip-selection-section,
#app-layout.theme-gold #marketing-tools-section,
main.theme-gold {
  --card-bg: rgba(255, 255, 255, 0.75);
  /* 卡片：白底半透明 */
  --panel-bg: rgba(255, 255, 255, 0.5);
  --bg-input: rgba(255, 255, 255, 0.6);

  --text-main: #422006;
  /* 主文字：深棕 */
  --text-sub: #92400e;
  /* 次文字：淺棕 */

  --border-light: rgba(146, 64, 14, 0.2);

  --color-primary: #d97706;
  /* 主色：金橘 */
  --bg-primary-dim: rgba(217, 119, 6, 0.1);

  --shadow-card: 0 8px 32px rgba(146, 64, 14, 0.15);
}

/* Sidebar */
#app-layout.theme-gold #sidebar {
  background-color: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(146, 64, 14, 0.15);
}

#app-layout.theme-gold .sidebar-header {
  color: #422006;
  border-bottom-color: rgba(146, 64, 14, 0.15);
}

#app-layout.theme-gold .nav-item {
  color: #78350f;
}

#app-layout.theme-gold .nav-item:hover,
#app-layout.theme-gold .nav-item.active {
  background-color: rgba(251, 191, 36, 0.2);
  color: #92400e;
}


/* =========================================
   3. 銀色主題 (bg2) - Silver / Modern
   ========================================= */
#app-layout.theme-silver {
  background-image: url('https://www.lezonemall.com/image/vip/bg2.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

main.theme-silver {
  background-image: url('https://www.lezonemall.com/image/vip/bg2.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#app-layout.theme-silver #cockpit-dashboard-section,
#app-layout.theme-silver #vip-selection-section,
#app-layout.theme-silver #marketing-tools-section,
main.theme-silver {
  --card-bg: rgba(255, 255, 255, 0.65);
  /* 卡片：更通透的白 */
  --panel-bg: rgba(243, 244, 246, 0.6);
  --bg-input: rgba(255, 255, 255, 0.8);

  --text-main: #111827;
  /* 主文字：深灰黑 */
  --text-sub: #4b5563;
  /* 次文字：灰 */

  --border-light: rgba(209, 213, 219, 0.5);

  --color-primary: #f97316;
  --bg-primary-dim: rgba(249, 115, 22, 0.1);

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Sidebar */
#app-layout.theme-silver #sidebar {
  background-color: rgba(255, 255, 255, 0.85);
  border-right: 1px solid #e5e7eb;
}


/* =========================================
   4. 白色主題 (bg1) - White / Clean
   ========================================= */
#app-layout.theme-white {
  background-image: url('https://www.lezonemall.com/image/vip/bg1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

main.theme-white {
  background-image: url('https://www.lezonemall.com/image/vip/bg1.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#app-layout.theme-white #cockpit-dashboard-section,
#app-layout.theme-white #vip-selection-section,
#app-layout.theme-white #marketing-tools-section,
main.theme-white {
  --card-bg: #ffffff;
  /* 卡片：純白 */
  --panel-bg: #f9fafb;
  --bg-input: #f3f4f6;

  --text-main: #1f2937;
  --text-sub: #6b7280;

  --border-light: #e5e7eb;

  --color-primary: #f97316;
  --bg-primary-dim: rgba(249, 115, 22, 0.1);

  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Sidebar */
#app-layout.theme-white #sidebar {
  background-color: #ffffff;
  border-right: 1px solid #e5e7eb;
}


/* =========================================
    Home Page Styles (Moved from home.blade.php)
   ========================================= */

/* Scoped CSS for #home_717 */
#home_717 {
  color: #333;
  overflow-x: hidden;
}

#home_717 .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15px;
}

#home_717 .flat-spacing {
  padding: 80px 0;
}

#home_717 .gray-bg,
#home_717 .bg-light {
  background-color: #f9f9f9;
}

#home_717 .sect-title {
  text-align: center;
  margin-bottom: 50px;
}

#home_717 .sect-title .title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Banner Item */
#home_717 .banner-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 400px;
}

#home_717 .banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home_717 .banner-content {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  z-index: 2;
}

#home_717 .banner-title {
  font-size: 42px;
  font-weight: 700;
  margin: 15px 0;
}

#home_717 .shop-btn {
  display: inline-block;
  padding: 12px 30px;
  background: #fff;
  color: #000;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 20px;
  transition: 0.3s;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: var(--main-color);
  border-color: var(--main-color);
}

/* Product Card */
#home_717 .product-card .img-box {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  aspect-ratio: 1 / 1;
}

#home_717 .product-card .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home_717 .product-card img {
  width: 100%;
  transition: 0.5s;
}

#home_717 .product-card:hover img {
  transform: scale(1.05);
}

#home_717 .info-box .name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

#home_717 .info-box .price {
  font-weight: 700;
  color: #cd0000;
  font-size: 1.5rem;
}

#home_717 .info-box .price .text-muted {
  font-size: 1rem;
  text-decoration: line-through;
  margin-right: 2.5px;
}

/* Blog Item */
#home_717 .blog-img {
  position: relative;
  margin-bottom: 20px;
}

#home_717 .blog-img .date {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  color: #fff;
  padding: 5px 15px;
  font-size: 12px;
  z-index: 1;
}

/* Slick 客製化樣式 */
#home_717 .slick-dots {
  bottom: -40px;
}

#home_717 .slick-dots li button:before {
  font-size: 12px;
  color: var(--gray, #ccc);
  opacity: 1;
}

#home_717 .slick-dots li.slick-active button:before {
  color: var(--main-color, #e60012);
}

/* 跑馬燈 */
.slick-partner .slick-track {
  display: flex;
  align-items: center;
  transition-timing-function: linear !important;
}

.slick-partner .item {
  margin: 0 30px;
}

.slick-partner img {
  height: 60px;
  filter: grayscale(100%);
  opacity: 0.5;
}


/* 優惠商品客製化區域 */
#home_717 .discount-custom-card {
  display: flex;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  border: 1px solid #eee;
}

/* 40% 產品區域 */
#home_717 .discount-custom-card .product-part {
  flex: 0 0 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  border-right: 1px solid #f0f0f0;
}

#home_717 .discount-custom-card .product-part a {
  aspect-ratio: 1 / 1;
}

#home_717 .discount-custom-card .product-part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home_717 .discount-custom-card .product-part .name {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 5px;
}

#home_717 .discount-custom-card .product-part .price {
  font-weight: 700;
  margin-bottom: 0;
  color: #cd0000;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}

#home_717 .discount-custom-card .product-part .price .text-muted {
  font-size: 1rem;
  text-decoration: line-through;
  margin-right: 2.5px;
}

/* 60% 評論區域 */
#home_717 .discount-custom-card .review-part {
  flex: 0 0 60%;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#home_717 .discount-custom-card .quote-box {
  width: 32px;
  height: 32px;
  background: var(--main-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 15px;
}

#home_717 .discount-custom-card .rtitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

#home_717 .discount-custom-card .rtext {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

#home_717 .discount-custom-card .ruser {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

#home_717 .discount-custom-card .uname {
  font-weight: 700;
  font-size: 15px;
}

#home_717 .discount-custom-card .v-icon {
  color: #28a745;
  margin-left: 8px;
  font-size: 14px;
}

#home_717 .discount-custom-card .rstars {
  color: #ffc107;
  font-size: 12px;
  letter-spacing: 2px;
}

/* 手機版 RWD (768px以下) */
@media (max-width: 768px) {
  #home_717 .discount-custom-card {
    flex-direction: column;
  }

  #home_717 .discount-custom-card .product-part,
  #home_717 .discount-custom-card .review-part {
    flex: 0 0 5%;
    border-right: none;
  }

  #home_717 .discount-custom-card .product-part {
    border-bottom: 1px solid #f0f0f0;
  }
}

/* RWD 修正 */
@media (max-width: 1024px) {
  #home_717 .product-grid {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  #home_717 .flat-spacing {
    padding: 40px 0;
  }

  #home_717 .banner-item {
    height: 300px;
  }

  #home_717 .banner-title {
    font-size: 30px;
  }

  #home_717 .row.slick-initialized {
    display: block;
    margin: 0;
  }

  #home_717 .slick-partner img {
    height: 40px;
  }
}


/*_______________*/

.tool_area .tool_nav .nav-item {
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#home_717 .countdown_card_area {
  margin: 0 auto !important;
}

@media (max-width: 1365px) {
  #home_717 .countdown_card .label {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }

  #home_717 .countdown_card .card-header {
    height: 85px;
    padding-top: 20px;
  }

  #home_717 .countdown_card .card-header img {
    max-width: 100%;
    max-height: 100%;
  }
}

@media (max-width: 400px) {
  #home_717 .countdown_card .card-header {
        height: 50px;
        padding-top: 0px;
    }
}

/* #home_717 .card-body {
  aspect-ratio:4/3
} */

@media (max-width: 768px) {
.act_card {
    min-height: 45vh;
}
}

@media (max-width: 490px) {
.countdown_card .countdown_promotion{
      transform: scale(0.85);
    white-space: nowrap;
    display: flex;
    transform-origin: right center;
}
}

@media (max-width: 435px) {
.countdown_card .countdown_promotion{
      transform: scale(0.75);
}
}

@media (max-width: 400px) {
.countdown_card .countdown_promotion{
      transform: scale(0.55);
}
}