@charset "utf-8";

/*sm-變數,預設是吃sm的變數，樣版裡面有的話就會是樣板變數*/
:root {
  /*基本預設值*/
  --accent: #990000;
  --surface: #FFF8F5;
  --on-surface: #333;
  --on-surface-variant: #666666;
  --outline: #bdbdbd;
  --outline-variant: #e0e0e0;
  /*---樣版裡面有的話就會是樣板變數---*/
  --sm-accent: var(--accent);
  --sm-accent-var: #ff6600;
  --sm-background: #f5f5f5;
  --sm-accent-sub-10: rgba(255, 102, 0, 0.1);
  --sm-outline: var(--outline);
  --sm-outline-variant: var(--outline-variant);
  --sm-on-surface-variant: var(--on-surface-variant);
  --sm-surface: var(--surface);
  --sm-on-surface: var(--on-surface);
  --sm-border-radius: 8px;
  /*badge標籤系列*/
  --sm-badge--red: #b71c1c;
  --sm-badge--green: #43a047;
  --sm-badge--bonus: #cc0000;
  --sm-badge--add: #CC3366;
  --sm-badge--size: #E98F00;
  --sm-badge--event: #3399CC;
  --sm-badge--group: #D75B48;
  --sm-badge--giveaway: var(--sm-accent-var);
  --sm-badge--full: var(--sm-accent);
}

/*------------------------------------*\
select 選擇
\*------------------------------------*/
select.form,
select.select {
  height: calc(2.4366rem + 2px);
  background-color: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--outline);
  padding: .4375rem 0;
  font-size: 16px;
  font-weight: 400;
}

.bottom-line {
  border-bottom: 1px dashed var(--outline);
}

/*20250523新增-select的樣式*/
/*在select上面新增.sm-select，sm-select.form-control為特別指定三角形出現*/
select.sm-select,
select.form-control.sm-select {
  color: var(--sm-on-surface-variant);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292.4 292.4'%3E%3Cpath fill='%23444444' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem top 50%;
  background-size: 0.55rem auto;
  padding: 0 1.2rem 0 0.3rem;
  transition: all ease-out 0.2s;
}

select.sm-select:focus-visible {
  outline: none;
  /* 移除預設的黑色外框 */
  border-color: var(--primary);
  box-shadow: 0 0 2px var(--primary);
  /* 額外加上 hover 效果（可選） */
}

/*為了維持bs+MD版只有底線的版本，補上一個假的底線*/
select.form-control:read-only,
select.custom-file-control:read-only {
  border-bottom: 1px solid #ced4da;
}


/*樣板預設-只有底線的版本-購物車數字規格使用*/
select.sm-select--line {
  border: 0;
  border-bottom: 1px solid var(--outline);
  border-radius: 4px 4px 0px 0px;
  padding-right: 18px;
  padding-left: 4px;
}

/*樣板預設-帶有框線的版本-分頁切換、目錄*/
select.sm-select--border {
  border: 1px solid var(--outline);
  border-radius: 8px;
  padding-right: 24px;
  padding-left: 8px;
}

/*------------------------------------*\
Bootstrap4 補充或修正語法
\*------------------------------------*/
/*----Spacing///start----*/
.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.pt-0 {
  padding-top: 0;
}

@media (min-width: 768px) {
  .d-md-inline {
    display: inline !important;
  }
}

/*----Spacing ///end----*/
/*bootstrap 有用到日期的標題區塊，手機上padding縮小*/
@media (max-width: 576px) {
  .input-group .input-group-text {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/*----圖片置中///start----*/
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*----圖片置中///end----*/

/*---.modal-dialog跳出視窗///start---*/
/*電腦版上跳出視窗-限制560px*/
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 560px;
  }
}

/*手機板上跳出視窗建議手機以內82%-上下置中*/
@media (max-width: 575px) {
  .modal-dialog {
    max-width: 84%;
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    margin: auto;
  }
}

/*---.modal-dialog電腦版上跳出視窗///end---*/
/*----bs4 card///start----*/
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  /*   border: 1px solid rgba(0, 0, 0, 0.125); */
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  margin-bottom: 1rem;
  /*擅自加高度*/
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card>.list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card>.list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link+.card-link {
  margin-left: 1.25rem;
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0 0.75rem;
  font-size: 1.125rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

@media (max-width: 767.98px) {
  .card-header {
    gap: 0 0.25rem;
  }
}

@media (max-width: 350px) {

  .card-header,
  .card-body {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}

/*標題裡的小副標*/
.card-header small {
  font-size: 0.9rem;
}

.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-header+.list-group .list-group-item:first-child {
  border-top: 0;
}

/*如果標題裡面有用到.h5.h4的話，清掉margin和line-height*/
.card-header .h4,
.card-header .h5,
.card-header .h6 {
  margin: 0;
  line-height: inherit;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-img,
.card-img-top,
.card-img-bottom {
  flex-shrink: 0;
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck .card {
  margin-bottom: 12px;
}

@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -12px;
    margin-left: -12px;
  }

  .card-deck .card {
    flex: 1 0 0%;
    margin-right: 12px;
    margin-bottom: 0;
    margin-left: 12px;
  }
}

/*--會員專區外面包連結時顏色--*/
a>.card {
  color: #333;
}

a:hover>.card {
  color: var(--primary);
}

/*----bs4 card///end----*/

/*--- sm card///start ---*/
/*卡片式-帶有陰影版*/
.sm-card {
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.sm-card__heaed {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  border-bottom: 1px solid #BDBDBD;
  text-overflow: ellipsis;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.15px;
}

.sm-card__heaed .order-title {}

.sm-card__heaed .order-number {}

.sm-card__body {
  padding: 8px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*清除原本.sm-list-dl的dl預設margin-bottom,避免太高*/
.sm-card__body .sm-list-dl,
.sm-card__body .sm-list-dl dd {
  margin-bottom: 0;
}

.sm-card__body .sm-list-dl dd {
  margin-bottom: 0;
  grid-column: span 11;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;

}

.sm-card__body .sm-list-dl dt {
  width: 80px;
  grid-column: span 1;
}

/*在card裡面有需要用到flex使用，目前是訂單列表使用*/
.sm-card--flex {
  display: flex;
  flex-direction: row;
}

/*訂單列表使用，圖片*/
.sm-card__img {
  padding: 0 0.75rem;
  max-width: 160px;
}

.sm-card__img img {
  border-radius: 4px;
}

.sm-card__img img:hover {
  opacity: 0.8;
}

.sm-card__img__title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.5px;
  padding-top: 8px;
}

.sm-card__img__title a {
  color: var(--on-surface);
}

.sm-card__img__title a:hover {
  color: var(--primary);
}

/*訂單列表使用，包住內容*/
.sm-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/*訂單列表使用，包住按鈕*/
.sm-card__btngroup {
  display: flex;
  flex-direction: column;
}

.sm-card__btngroup .btn {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .sm-card__img {
    max-width: 130px;
  }
}

@media (max-width: 767.98px) {
  .sm-card--flex {
    flex-direction: column;
  }

  .sm-card__heaed .order-title {
    font-size: 0.9rem;
  }

  .sm-card__heaed .order-number {
    font-size: 1.125rem;
  }

  .sm-card__img {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0;
    width: 100%;
    max-width: none;
  }

  .sm-card__img img {
    max-width: 80px;
  }

  .sm-card__img__title {
    padding-top: 0;
    font-size: 0.9rem;
  }

  .sm-card__btngroup {
    flex-direction: row-reverse;
  }
}

@media (max-width: 374px) {
  .sm-card__heaed {
    gap: 4px;
  }

  .sm-card__heaed .order-title {
    font-size: 0.8rem;
  }

  .sm-card__heaed .order-number {
    font-size: 1.05rem;
  }

  .sm-card__heaed .btn {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/*判斷當卡片有複數以上時，增加頭部的間距*/
.sm-card~.sm-card {
  margin-top: 1rem;
}

/*--- sm card///end ---*/
/*--- 訂單進度條///start ---*/
.order-progress {
  display: flex;
  gap: 8px;
  margin: 0;
  list-style-type: none;
  border-radius: 4px;
  background: var(--surface);
  padding: 12px;
  overflow-x: auto;
}

.order-progress-item {
  display: flex;
  /* max-width: 68px; */
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.order-progress-item:last-child .order-progress-item__title {
  color: var(--accent);
}

.order-progress-item__bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 8px;
  background-color: var(--primary);


}

.order-progress-item__title {
  font-size: 0.875rem;
}

.order-progress-item__data {
  color: var(--on-surface-variant);
  font-size: 0.7rem;
}

@media (max-width: 767.98px) {
  .order-progress {
    gap: 6px;
    padding: 8px;
  }

  .order-progress-item__title {
    font-size: 0.84rem;
  }
}

/*--- 訂單進度條///end ---*/

/*---- radio美化///start----*/
.form-check {
  line-height: 1.2;
  padding-left: 0 !important;
  margin-bottom: 0.5rem;
}

/*如果form-check裡面有註解的話使用以下css*/
.form-check .text-muted {
  margin-top: 4px;
  line-height: 1.8;
}

.form-check-inline {
  margin-bottom: 0;
}

.form-check-input[type=radio]+.form-check-label {
  /* 主外框 */
  position: relative;
  padding-left: calc(1.28rem * 1.2);
  line-height: 1.2rem;
}

.form-check-input[type=radio]+.form-check-label::before {
  content: "";
  position: absolute;
  left: 0px;
  display: inline-block;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #999999;
  transition: background-color 0.2s ease-in;
}

.form-check-input[type=radio]+.form-check-label::after {
  content: "";
  display: block;
  cursor: pointer;
  position: absolute;
  top: calc(1.28rem / 4);
  left: calc(1.28rem / 4);
  width: calc(1.28rem / 2);
  height: calc(1.28rem / 2);
  background-color: white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.form-check-input[type=radio]:checked+.form-check-label::before {
  /* 當check時 按鈕顏色改變 */
  border: 2px solid var(--primary);
}

.form-check-input[type=radio]:checked+.form-check-label:after {
  /* 當check時 多白色圈圈 */
  background-color: var(--primary);
  opacity: 1;
}

.form-check-input[type=radio] {
  display: none;
}

/*radio 放在使手動輸入優惠代碼旁.上下置中*/
.form-check-input[type=radio]+label[for=ecoupon-by-hand]::before {
  top: calc(50% - 1.28rem / 2);
}

.form-check-input[type=radio]+label[for=ecoupon-by-hand]::after {
  top: calc(50% - 1.28rem / 4);
}

/*radio列使用fieldset，在MDB V1版本中會有行列距離問題，針對MDB V1處理增加行高*/
.bmd-form-group~fieldset.form-group.row {
  padding-top: 1.75rem;
  margin-bottom: 0;
}

/*---- radio美化///end ----*/
/*避免點擊時出現預設的線條*/
input:focus,
button:focus {
  outline: none;
}

/*------------------------------------*\
bootstrap日期選擇功能
\*------------------------------------*/
.bootstrap-datetimepicker-widget.dropdown-menu {
  display: block;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/*bootstrap-datetimepicker-widget 日期列表的左右箭頭css*/
.bootstrap-datetimepicker-widget .fa-chevron-left,
.bootstrap-datetimepicker-widget .fa-chevron-right {
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
}

.bootstrap-datetimepicker-widget .fa-chevron-left:before,
.bootstrap-datetimepicker-widget .fa-chevron-right:before,
.bootstrap-datetimepicker-widget .fa-chevron-left:after,
.bootstrap-datetimepicker-widget .fa-chevron-right:after {
  position: absolute;
  content: "";
  display: inline-block;
}

.bootstrap-datetimepicker-widget .fa-chevron-left:before,
.bootstrap-datetimepicker-widget .fa-chevron-right:before,
.bootstrap-datetimepicker-widget .fa-chevron-left:after,
.bootstrap-datetimepicker-widget .fa-chevron-right:after {
  width: 3px;
  height: 10px;
  box-shadow: 0 0 0 16px inset;
  top: -1px;
  left: 5px;
}

.bootstrap-datetimepicker-widget .fa-chevron-left:after,
.bootstrap-datetimepicker-widget .fa-chevron-right:after {
  top: 5px;
}

.bootstrap-datetimepicker-widget .fa-chevron-left:before,
.bootstrap-datetimepicker-widget .fa-chevron-right:after {
  transform: rotate(45deg);
}

.bootstrap-datetimepicker-widget .fa-chevron-left:after,
.bootstrap-datetimepicker-widget .fa-chevron-right:before {
  transform: rotate(-45deg);
}

/*bootstrap-datetimepicker-widget修正日期列表樣式*/
.bootstrap-datetimepicker-widget table thead tr:first-child th {
  border: 0;
}

/*------------------------------------*\
通用內容
\*------------------------------------*/
/*---- 通用的row列間距,要放在.row那一層,讓內容物件有行列距離///start----*/
.sm-row-gap-1 {
  row-gap: 0.25rem;
}

.sm-row-gap-2 {
  row-gap: 0.5rem;
}

.sm-row-gap-3 {
  row-gap: 0.75rem;
}

.sm-row-gap-4 {
  row-gap: 1rem;
}

.sm-row-gap-5 {
  row-gap: 1.25rem;
}

.sm-row-gap-6 {
  row-gap: 1.5rem;
}

/*---- 通用的row列間距,要放在.row那一層,讓內容物件有行列距離///end----*/
/*---- 通用寬度///start ----*/
.sm-w-60 {
  width: 60px;
}

/*--- 有選擇城市地址時select和下一列有距離 ---*/
.sm-form-county select {
  margin-bottom: 1rem;
}

/*---- 通用的list-- 會員專區的訂單詳細頁 ----*/
/*會員專區的訂單詳細頁-左右欄位-手機板上*/
.sm-list-dl {
  display: grid;
  gap: 0 0.75rem;
  grid-template-columns: repeat(12, 1fr);
  container-type: inline-size;
  container-name: sm-list-dl;
  margin-bottom: 0;
}

.sm-list-dl dt {
  grid-column: span 12;
  font-size: 0.875rem;
}

.sm-list-dl dd {
  grid-column: span 12;
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.sm-list-dl__note {
  background-color: #eee;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  min-height: 2.5rem;
}

/*如果欄位裡面有較小的文字，使用此class*/
.sm-list-dl dd small {
  display: inline-block;
  font-size: 0.85rem;
}

/*會員專區的訂單詳細頁-條列式帶ul li*/
.sm-list-ul {
  padding-left: 1.2rem;
  list-style-type: square;
}

.sm-list-ul li::marker {
  color: #cccccc;
}

@container sm-list-dl (min-width: 700px) {
  .sm-list-dl dt {
    width: 100px;
    grid-column: span 1;
  }

  .sm-list-dl dd {
    margin-bottom: 1rem;
    grid-column: span 11;
  }
}

/*有底線的*/
.sm-list-ul--border {
  list-style-type: none;
}

.sm-list-ul--border li {
  border-bottom: 1px solid #ccc;
}

/*---- 通用的list-- 會員專區的訂單詳細頁///end ----*/

/*------------------------------------*\
文字顏色或補充
\*------------------------------------*/
.sm-text-accent {
  color: var(--accent);
}

.sm-text-accent-var {
  color: var(--sm-accent-var);
}

/*數字符號常用的letter.避免括號和數字連在一起*/
.sm-text-letter {
  letter-spacing: 4px;
}

/*------------------------------------*\
tag標籤
\*------------------------------------*/
/*商品名稱前的標誌-購物車流程也有，是不是整併或改名?....不然v4的到購物流程會互相影響*/
.badge {
  display: inline-block;
  padding: 2px 4px;
  line-height: 1.2;
  font-size: 0.75rem;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
}

/*badge-組合*/
.badge--group {
  background-color: var(--sm-badge--group);
}

/*badge-贈品*/
.badge--giveaway {
  background-color: var(--sm-badge--giveaway);
}

/*line icon-通知出貨*/
.line-talk {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 1rem;
  font-weight: 400;
}

.line-talk::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2300C300" width="22" height="21" viewBox="0 0 25.232 24">  <path id="Path_1255" data-name="Path 1255" d="M-2860.124-1021.157a13.665,13.665,0,0,1,9.078,2.879c4.826,3.875,5.119,9.575.8,13.994a38.629,38.629,0,0,1-6.711,5.292c-.722.469-1.469.9-2.213,1.334a5.2,5.2,0,0,1-.776.367c-.833.317-1.164.038-1.012-.843.059-.339.135-.674.189-1.014.178-1.124-.2-1.572-1.325-1.734a12.83,12.83,0,0,1-7.759-3.845,8.873,8.873,0,0,1,.89-13.293A13.841,13.841,0,0,1-2860.124-1021.157Zm.183,10.083.138-.073a4.286,4.286,0,0,1,.325.355c.655.894,1.309,1.788,1.952,2.69.23.323.539.6.9.407a1.1,1.1,0,0,0,.462-.8c.045-1.512.029-3.027.017-4.541,0-.419-.093-.835-.637-.846-.592-.012-.646.4-.64.865.012.889,0,1.778,0,2.831-.215-.232-.321-.327-.4-.439-.717-.968-1.408-1.956-2.16-2.9a.957.957,0,0,0-.81-.3c-.192.054-.393.468-.4.726-.036,1.571-.021,3.142-.016,4.714,0,.439.174.746.677.732.479-.013.6-.3.6-.73C-2859.95-1009.28-2859.941-1010.177-2859.941-1011.074Zm6,.986c.557,0,1.071.014,1.584,0,.434-.016.865-.057.85-.672-.014-.568-.4-.633-.827-.638-.529-.007-1.058,0-1.586,0v-1.207c.607,0,1.178.005,1.75,0,.435-.005.677-.2.664-.672-.013-.443-.256-.606-.665-.6-.787,0-1.574.005-2.36,0a.613.613,0,0,0-.7.7q0,2.447,0,4.893c0,.42.193.649.623.65.844,0,1.689.016,2.532-.014a.644.644,0,0,0,.5-.284.811.811,0,0,0-.049-.694,1.291,1.291,0,0,0-.77-.282c-.506-.042-1.019-.012-1.542-.012Zm-12.682,1.152v-.678q0-1.783,0-3.567c0-.426-.193-.7-.644-.7a.6.6,0,0,0-.621.671c-.013,1.649-.01,3.3,0,4.947a.557.557,0,0,0,.608.613c.844.006,1.69.04,2.529-.021a.893.893,0,0,0,.628-.513c.111-.342-.135-.611-.513-.682a3.532,3.532,0,0,0-.565-.065C-2865.657-1008.943-2866.112-1008.937-2866.622-1008.937Zm3.178-1.836q0,1.209,0,2.419c0,.421.136.709.625.7.45,0,.612-.269.613-.664q.009-2.447,0-4.895c0-.424-.19-.7-.66-.68-.449.018-.576.3-.576.7Q-2863.441-1011.982-2863.443-1010.773Z" transform="translate(2872.437 1021.165)"/></svg>');
  display: inline-block;
  width: 22px;
  height: 21px;
}

/*------------------------------------*\
通用-FAQ、產品型錄的目錄圖文
\*------------------------------------*/
/*RWD分頁切換select下方增加距離*/
.faq_category_select,
.mobile-page-select {
  margin-bottom: 0.75rem;
}

/*---- 一般圖文列表，左圖+右標題、文///start ----*/
.sm-figure-1 {
  margin-bottom: 16px;
}

.sm-figure-1 .thumbnail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 8px;
  border: 0;
}

.sm-figure-1 .thumbnail>a {
  display: block;
  margin-right: 8px;
  width: 30%;
}

.sm-figure-1 .thumbnail img {
  width: 100%;
  float: none;
  height: auto;
  padding-right: 0;
  border-radius: 4px;
}

.sm-figure-1 .caption {
  width: 70%;
}

.sm-figure-1 .caption h3 {
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.8rem;
  min-height: 2.6rem;
}

.sm-figure-1 .caption h4 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.8rem;
  min-height: auto;
  margin-top: 0px;
  color: var(--primary);
}

/*最新消息-詳細內容-日期*/
.date {
  font-size: 0.95rem;
  color: #666666;
  margin-bottom: 0.5rem;
}

/*----一般圖文列表，左圖+右標題、文///end----*/
/*----------------------------*/
/*----一般圖文列表，由上而下：圖、標題、文///start----*/
.sm-figure-2 {
  margin-bottom: 10px;
}

.sm-figure-2 .thumbnail {
  border: 0;
}

.sm-figure-2 .thumbnail img {
  overflow: hidden;
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

.sm-figure-2 .caption {
  text-align: center;
  padding: 10px 0;
}

.sm-figure-2 .caption h3 {
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.8rem;
  min-height: 2.6rem;
}

.sm-figure-2 .caption h4 {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.8rem;
  min-height: 2.6rem;
  margin-top: 0px;
  color: var(--primary);
}

/*----一般圖文列表，由上而下：圖、標題、文///end----*/
/*------------------------------------*\
最新消息-文字列表使用(無論有無開啟分頁模式)
\*------------------------------------*/
/*----一般文字列表，可能有日期、標題--最新消息文字列表使用 ///start----*/
.sm-list {
  border-bottom: 1px solid var(--outline-variant);
  padding: 9px 12px 12px 12px;
}

.sm-list a {
  color: var(--on-surface-variant);
}

.sm-list a:hover {
  color: var(--primary);
}

.sm-list .media-heading {
  color: var(--primary);
  font-weight: bold;
  margin-right: 1rem;
  font-size: 13px;
}

.sm-list .media-body {
  line-height: 1.2;
}

@media (max-width: 539px) {
  .sm-list.media {
    flex-direction: column;
  }
}

/*----一般文字列表，可能有日期、標題///end----*/

/*------------------------------------*\
通用-產品型錄分頁、公司簡介分頁、問題解答分頁 文字式目錄列表
\*------------------------------------*/

/*----產品型錄分頁、公司簡介分頁、問題解答分頁 文字式目錄列表 ///start----*/
.category_list {
  padding: 0;
  margin: 0px 0px 15px 0px;
  list-style-type: none;
  overflow: hidden;
}

.category_list li {
  float: left;
  white-space: nowrap;
}

.category_list a {
  font-size: 0.875rem;
  float: left;
  text-decoration: none;
  margin: 4px;
  height: auto;
  border: 1px solid var(--primary);
  background-color: var(--on-primary, #ffffff);
  color: var(--primary);
  padding: 0px 16px;
  line-height: 36px;
  border-radius: 3px;
}

.category_list a:hover,
.category_list a.current {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--on-primary, #ffffff);
  text-decoration: none;
  border-radius: 3px;
}

/*----產品型錄、公司簡介分段、問題解答分段 文字式目錄列表 ///end----*/

/*------------------------------------*\
通用-產品功能
\*------------------------------------*/
/*.sm-product  RWD版產品列表、新版購物、2024年加強版共用*/
/*----產品列表///start----*/
.sm-product {
  text-align: center;
}

.sm-product .thumbnail {
  display: flex;
  flex-direction: column;
  height: calc(100% - 2rem);
  border: 0px;
  margin-bottom: 2rem;
}

.sm-product .thumbnail {
  padding: 0px;
  line-height: 1.8rem;
}

.sm-product .thumbnail h3 {
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.8rem;
  min-height: 2.6rem;
}

.sm-product .thumbnail h5 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.6rem;
  min-height: 2.6rem;
  margin: 8px 0;
}

/*次標題*/
.sm-product .thumbnail h5 .subtitle {
  line-height: 1.6;
  margin-top: 8px;
}

.sm-product .sm-product-price {
  margin-top: auto;
}

.sm-product .thumbnail p {
  margin-bottom: 8px;
}

/*--價格排列整齊--預設值--*/
.sm-product-price--defaut {
  display: grid;
  grid-template-columns: auto auto;
  text-align: left;
  white-space: nowrap;
}

.sm-product-price--defaut .product-list-normal-label,
.sm-product-price--defaut .product_member {
  text-align: right;
}

@media (max-width: 991.98px) {
  .sm-product .thumbnail p {
    margin-bottom: 0px;
  }
}

/*--價格排列整齊-判斷有折扣或滿件優惠的價格- --*/
.sm-product-price--event,
.sm-product-price--discount {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

/*--價格排列整齊-促銷和活動寬度260以上用flex 260以下grid*/
.sm-product .thumbnail {
  container-type: inline-size;
  container-name: sm-product-card;
}

@container sm-product-card (max-width:260px) {

  .sm-product-price--event,
  .sm-product-price--discount {
    display: grid;
    grid-template-columns: auto auto;
  }

  .sm-product-price--event .product-list-normal-label,
  .sm-product-price--event .product_member,
  .sm-product-price--discount .product-list-normal-label,
  .sm-product-price--discount .product_member {
    text-align: right;
  }

  /*有促銷價格的數字和標示置中，display: inline-block;是讓text-indent正常*/
  .sm-product-price--discount .product_list_discount,
  .sm-product-price--event .product_list_discount {
    display: inline-block;
    margin: auto;
    grid-column: span 2;
  }
}

/*-- 價格顏色 --*/
.sm-product .caption p .product-list-normal-label {
  color: var(--on-surface, #222222);
}

.sm-product .caption p .product-list-normal-price {
  color: var(--on-surface, #222222);
}

.sm-product .caption p .product-list-member-label {
  color: var(--on-surface, #222222);
}

.sm-product .caption p .product-list-member-price {
  color: var(--on-surface, #222222);
}

.sm-product .thumbnail a {
  color: var(--on-surface, #222222);
}

.sm-product .thumbnail a:hover {
  color: var(--primary);
}

.product_member,
.product_member_price {
  color: var(--accent);
}

/*產品目錄折扣的標示*/
.product_discount_show {
  max-width: 55px;
  height: 23px;
  line-height: 23px;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  background-color: var(--accent);
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

/*-- 產品列表可加強的CSS(2024版新增) --*/
/* 加在thumbnail這一層可增加改變樣式
  .sm-product--card 有框線+hover有背景色
  .sm-product--radius 外框和圖片帶有圓角
   .sm-product--price-simple 價格簡易版(拿掉產品原價+售價標題並且並排)
 */
/*加在thumbnail這一層 .sm-product--card 有框線+hover有背景色*/
.sm-product .thumbnail.sm-product--card {
  position: relative;
  transition: all ease-out 0.2s;
  border: 1px solid #eee;
  padding: 8px;

}

.sm-product .thumbnail.sm-product--card:hover {
  background: var(--surface, #FFF8F6);
}

/*加在thumbnail這一層 .sm-product--radius 外框和圖片帶有圓角*/
.sm-product--radius {
  border-radius: 8px;
  overflow: hidden;
}

.sm-product--radius .sm-product-img {
  border-radius: 8px;
  overflow: hidden;
}

/*加在thumbnail這一層 .sm-product--price-simple 價格簡易版(拿掉產品原價+售價標題並且並排)*/
.sm-product--price-simple .product-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sm-product--price-simple .sm-product-price--defaut {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  justify-content: center;
}

.sm-product .sm-product--price-simple .product-list-normal-label,
.sm-product .sm-product--price-simple .product_member {
  display: none;
}

.sm-product .sm-product--price-simple .product-list-normal-price {
  color: #777777;
  text-decoration: line-through rgba(99, 99, 99, 0.4);
}

.sm-product .sm-product--price-simple br {
  display: none;
}

.sm-product .sm-product--price-simple .product_member_price {
  font-size: 1.25rem;
  font-weight: bold;
}

/*有組合商品和活動折扣的排列*/
@container sm-product-card (max-width: 260px) {

  .sm-product--price-simple .sm-product-price--discount,
  .sm-product--price-simple .sm-product-price--event {
    display: flex;
  }
}

@media (max-width: 991.98px) {

  .sm-product .sm-product--price-simple .product-list-normal-price,
  .product_member {
    font-size: 0.75rem;
  }

  .sm-product .sm-product--price-simple .product_member_price {
    font-size: 1rem;
  }

  .sm-product .thumbnail.sm-product--price-simple h5 {
    margin: 0.25rem 0;
  }

  .sm-product .thumbnail.sm-product--price-simple h5 .subtitle {
    font-size: 0.8rem;
    margin-top: 0.25rem;
  }
}


/*--產品列表-2024版新增區塊-商品標籤--*/
.sm-product-tag {
  display: flex;
  padding: 4px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: 4px;
  background: #EEE;
  min-height: 31px;
}

.sm-product-tag span {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1;
  background: #D75B48;
  color: #fff;
}

@media (max-width: 991.98px) {
  .sm-product-tag {
    gap: 2px;
    padding: 2px;
    min-height: 24px;
  }

  .sm-product-tag span {
    white-space: nowrap;
    padding: 2px 3px;
  }
}

/*----產品列表///end----*/
/*----------------------------*/
/*----產品排序選項///start----*/
#product_order_by ul {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  list-style-type: none;
  padding-left: 0px;
  font-size: 0.9em;
}

#product_order_by ul a {
  color: var(--on-surface, #222222);
  display: block;
  padding: 3px;
}

#product_order_by ul a:hover {
  opacity: 0.6;
}

#product_order_by ul a.current_asc,
#product_order_by ul a.current_desc {
  background-color: var(--sm-outline-variant);
  border-radius: 4px;
}

/*----產品排序選項///end----*/

/*------------------------------------*\
產品目錄熱銷商品、舊版活動頁加入購物車有用到
\*------------------------------------*/
/*----- 熱銷商品輪播///start----*/
.clearout {
  height: 20px;
  clear: both;
}

#flexiselDemo3 {
  display: none;
}

.nbs-flexisel-container {
  position: relative;
  max-width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  padding: 0 25px;
}

.nbs-flexisel-ul {
  position: relative;
  width: 9999px;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
}

.nbs-flexisel-inner {
  overflow: hidden;
  float: left;
  width: 100%;
}

.nbs-flexisel-item {
  float: left;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  position: relative;
}

.nbs-flexisel-item img {
  width: 100%;
  cursor: pointer;
  position: relative;
  margin-top: 10px;
  margin-bottom: 0px;
  max-width: 205px;
  max-height: 205px;
}

/*每個產品的css*/
.ad_product {
  overflow: hidden;
}

.ad_product_title {
  text-align: center;
}

.ad_product_price {
  color: #333333;
  text-decoration: line-through;
}

.ad_product_price_sale {
  color: #FF0004;
}

.ad_product_price_normal {
  color: #333333;
}

/*** Navigation ***/

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
  width: 22px;
  height: 22px;
  position: absolute;
  cursor: pointer;
  z-index: 100;
  opacity: 0.5;
}

.nbs-flexisel-nav-left {
  left: 10px;
  background: url(../images/button-previous.png) no-repeat;
}

.nbs-flexisel-nav-right {
  right: 5px;
  background: url(../images/button-next.png) no-repeat;
}

@media (max-width: 769px) {
  .nbs-flexisel-item img {
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 180px;
    max-height: 180px;
  }

}

.product_category_hot_title {
  width: 100%;
  float: left;
  margin-top: 10px;
  margin-bottom: 5px;
  background: url(../images/product_hot_title.jpg) no-repeat 10px;
}

/*----- 熱銷商品輪播//end----*/


/*----下拉購物車///start----*/
/*樣板裡面每次都有改,把常改數值加上*/

#small_cart_list {
  width: 240px;
  background-color: #FFFFFF;
  border: 1px solid #cccccc;
  opacity: 0.95;
  padding: 2px 2px 30px 2px;
  height: auto !important;
  min-height: 100px;
  border-radius: 4px;
  z-index: 999;
}

#small_cart_list ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0px;
  width: 100%;
}

/*下拉購物車 -  每一筆資料*/
#small_cart_list ul li {
  margin: 0;
  width: 100%;
  display: block;
  height: 25px;
  border-bottom: 1px solid #cccccc;
  padding-top: 3px;
}

#small_cart_list ul li .scl_pic {
  height: 20px;
  display: block;
  float: left;
  width: 35px;
}

/*下拉購物車 -  每一筆資料的產品小圖*/
#small_cart_list ul li .scl_pic img {
  height: 20px;
  float: left;
}

#small_cart_list ul li.scl_addpic {
  height: 20px;
  display: block;
  float: left;
  width: 35px
}

/*下拉購物車 -  每一筆資料的加購產品小圖*/
#small_cart_list ul li.scl_addpic img {
  float: left;
  height: 17px;
  width: 33px;
}

#small_cart_list ul li .scl_title {
  font-size: 0.75rem;
  height: 20px;
  line-height: 20px;
  width: 160px;
  overflow: hidden;
  float: left;
}

#small_cart_list ul li .scl_number {
  font-size: 0.75rem;
  height: 20px;
  line-height: 20px;
  float: right;
  color: var(--accent);
  margin-right: 8px;
}

/*----下拉購物車///end----*/

/*------------------------------------*\
會員專區內功能
\*------------------------------------*/

/*----- 會員登入時的畫面 ///start----*/
/*一般會員登入時*/
.member-default-login {
  margin-left: 20%;
}

@media (max-width: 768px) {
  .member-default-login {
    margin-left: auto;
    margin-right: auto;
  }
}

.account-wall input {
  margin-bottom: 10px;
}

.account-wall div {
  margin-top: 15px;
}

@media (max-width: 380px) {

  /*會員登入時的fb登入和忘記密碼置中*/
  .account-wall .pull-left,
  .account-wall .pull-right {
    float: none !important;
    margin: 0 auto;
    text-align: center;
  }
}

/*----- 會員登入時的畫面(2014/10/20) ///end----*/

/*----- 會員登入(未開手機登入)///start----*/
#login-bt {
  margin-top: 25px;
}

#login-fb {
  margin-top: 10px;
}

#login-fb .btn-primary {
  border: 0px;
  background: #3A5897;
}

#login-fb .btn-primary:hover {
  border: 0px;
  background: #2a4680;
}

#login-line .btn-primary {
  border: 0px;
  background: #00b900;
}

/*----- 會員登入(未開手機登入)///end----*/

/*----- 會員專區的退貨狀態 ///start----*/
/*退貨狀態*/
ul.return_status {
  list-style: none;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

ul.return_status li {
  width: 110px;
  height: 80px;
  display: inline-block;
  border: 1px solid #ccc;
  margin-top: 5px;
  margin-right: 10px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 80px;
}

ul.return_status li.current {
  background-color: #FFC;
  font-weight: bold;
}

/*----- 會員專區的退貨狀態 ///end----*/
/*----- 社群按鈕///start-在/member_mobile.css裡面也有重複的----*/
.default-social-login {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.default-social-login button {
  flex: 1;
  /*按鈕均等分配*/
}

.default-social-login #facebook_login {
  background-color: #3b5998;
  border-color: #3b5998;
}

.default-social-login #line_login {
  background-color: #00c300;
  border-color: #00c300;
}

/*-----社群按鈕///end----*/
/*-----新增會員資料修改外框///start----*/
.member_form_content {
  border: 1px solid var(--sm-outline-variant);
  border-radius: 3px;
  padding: 0 12px 12px 12px;
  max-width: 840px;
  margin: 0 auto;
}

.member_form_content .member-title {
  font-size: 1rem;
  border-bottom: 1px solid var(--sm-outline-variant);
  padding: 8px 15px 0 15px;
  background: url(../images/sidebar-icon.png) no-repeat 10px center #eee;
  color: var(--sm-on-surface-variant);
}

/*會員專區基本資料、購物金結清提領表單-修正行高*/
.member_form_content .col-form-label,
#withdraw_form .col-form-label {
  line-height: 1;
}

[action*=base_save] .form-group {
  /* margin-bottom: 0px; */
  padding-right: 25px;
}

/*如果是MDB V1的會員專區，每列的距離避免太高，清除margin-bottom*/
.form-group.row.bmd-form-group {
  margin-bottom: 0;
}

/*社群連結取消的css*/
.social-link .form-control-static {
  border-bottom: 1px dotted #ccc;
}

.social-link .control-label {
  padding-top: 0px;
}

/*-----新增會員資料修改外框///end----*/


/*第一次購買頁面*/
.member_select li {
  list-style-type: none;
  display: inline-block;
  margin: 0 20px;
}

/*會員購物金列表-紅利的標示*/
.tr_bonus,
.tr_bonus .attribute {
  background-color: #FFFFBB;
}

/*會員序號*/
.site_location {
  margin-bottom: 12px;
}

.site_location nav ol {
  list-style: none outside none;
  padding: 0px;
}

.site_location nav ol li {
  display: inline-block;
  padding-left: 5px;
}


.member_level_show {
  background-color: #BDBDBD;
  padding: 3px 5px;
  border-radius: 3px;
  color: #FFFFFF;
  display: inline-block;
  margin-top: 10px;
}

.member_code_show {
  background-color: #F39BC0;
  padding: 3px 5px;
  border-radius: 3px;
  color: #FFFFFF;
  display: inline-block;
  margin-top: 10px;
}

/*-----會員專區-多筆地址///start----*/
.more-address-info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #eeeeee;
  border-radius: 4px;
  padding: 1rem;
}

.more-address-info p {
  margin-bottom: 0;
}

.more-address-info__ul {
  margin-bottom: 0;
}

.more-address-info__total {
  display: block;
  font-size: 1.125rem;
  margin-bottom: 1.2rem;
  padding-left: 2.4rem;
}

/*-----會員專區-多筆地址///end----*/

/*-----會員專區-訂單詳細///start----*/
/*訂單列表*/
.cart-order-list {
  font-size: 0.9rem;
}

/*贈品區塊*/
.cart-order-list__add-product {
  background: #eee;
  padding: 8px;
}

.cart-order-list__add-product ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/*總金額列表*/
.cart-order-list__total {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding: 1rem;
  text-align: right;
  border-top: 1px solid #ccc;
}

.cart-order-list__total table td {
  padding: 0 0.5rem;
}

@media (max-width: 767px) {
  .cssgrid-table .sm-w-60 {
    width: auto;
  }

  .cart-order-list item-container .attribute[data-name=小計] {
    display: none;
  }
}

@media (max-width: 425px) {
  .cart-order-list .item-container .attribute {
    grid-template-columns: minmax(6em, 35%) 1fr;
  }
}


/*-----會員專區-訂單詳細///end----*/


/*------------------------------------*\
通用-前台有開啟關鍵字設定跳出畫面
\*------------------------------------*/
/*----前台有開啟關鍵字設定跳出畫面///start----*/
#seoModal .modal-content {
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#seoModal .modal-content .modal-header {
  border-bottom: 1px solid #ccc;
}

#seoModal .form-group input {
  margin-bottom: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-position: center 0%;
}

#seoModal textarea.form-control {
  border: 1px solid #ccc;
  line-height: 1.5;
}

#seoModal .modal-title {
  font-weight: bold;
}

#seoModal #meta_title {
  box-shadow: none;
}

#seoModal .seoModal-title {
  background: #eee;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.table-condensed tr:last-child {
  border-bottom: 1px solid #ddd;
}

/*----前台有開啟關鍵字設定跳出畫面///end----*/

form.form-horizontal .form-control-static p {
  display: inline !important;
}

.well {
  padding: 15px !important;
}

/*------------------------------------*\
通用-購物車相關???
不確定這整段到底是在哪裡用到，找不到
\*------------------------------------*/
/*放入購物車時跳出的畫面*/
#msgbox {
  position: fixed;
  top: -250px;
  width: 100%;
  z-index: 999999;
  text-align: center;
  font-size: 1.1rem;
  padding: 15px 15px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #999;
  box-shadow: 0 0 10px #999;
}

#modalShade {
  display: none;
  background: #3B3013;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0, 0, 0, 0.2);
  border-right: 1.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.event_products .normal_price_number {
  text-decoration: line-through;
}

@media (max-width: 767px) {
  .normal_price_number::after {
    display: block;
    content: "";
  }
}

/*贈品類說明*/
.cart-remind {
  font-size: 14px;
}

.cart-remind ul {
  padding: 0 0 0 16px;
  margin: 0;
}

.cart-remind li {
  margin-bottom: 4px;
}

.cart-remind-number {
  color: #a00;
}


/*外框*/
ul.molpay_channel_icon {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.molpay_channel_icon li {
  float: left;
  padding: 2px;
  margin: 8px 10px;
  width: 200px;
  height: 80px;
  text-align: center;
  list-style-type: none;
  border: 1px solid #eee;
  position: relative;
}

.molpay_channel_icon li:hover {
  border: 1px solid #da2560;
}

.molpay_channel_icon li img {
  max-height: 100%;
  max-width: 100%;
}

/*已選擇*/
.molpay_channel_icon li.molpay_channel_icon_active {
  border: 1px solid #da2560;
}

.molpay_channel_icon_active::after {
  content: "";
  background: url(../images/ok.png);
  width: 30px;
  height: 30px;
  position: absolute;
  right: 2px;
  top: 2px;
}

@media (max-width: 767px) {}

@media (max-width: 426px) {
  .molpay_channel_icon li {
    margin: 8px 8px;
    width: 45%;
  }

  .molpay_channel_icon_active::after {
    width: 20px;
    height: 20px;
    background-size: cover;
  }
}

@media (max-width: 325px) {
  .molpay_channel_icon li {
    margin: 8px 4px;
    height: 55px;
  }
}

.deliver_no_portage {
  color: #A00;
}

.ui-dialog-titlebar-close {
  padding: 0 !important;
}

.ui-dialog-titlebar-close:after {
  content: '';
  width: 19px;
  height: 19px;
  display: inline-block;
  /* Change path to image*/
  background-image: url(/assets/javascript/vendor/jquery-ui/themes/base/images/ui-icons_777777_256x240.png);
  background-position: -96px -128px;
  background-repeat: no-repeat;
}


.ad_cart {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ad_cart img {
  display: block;
  max-width: 100%;
  height: auto;
}

.form-control-inline {
  min-width: 0;
  width: auto;
  display: inline;
}

/*RWD版、新版購物流程-標題*/
.cart_title {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.stuck {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  margin-top: 0px !important;
  z-index: 999;
}


@media (max-width: 767px) {
  form.form-horizontal .col-sm-10 p {
    display: inline !important;
  }
}

/*------------------------------------*\
各種通用
\*------------------------------------*/
/* 產品目錄下拉式的目錄切換 */
.product_category_select {
  text-align: right;
  margin-bottom: 0.75rem;
}

/*有下拉選單時左邊多空格*/
select.select {
  margin: 0 0 0 4px;
}

/*推薦商品-讓商品並排*/
.picture1 {
  float: left;
  margin: 0 4px;
}

/*--- 表格標題降行問題 ---*/
@media (max-width: 991px) {
  .table tr th {
    white-space: nowrap;
  }
}

/*有加span.text-div-wrap在手機上時會降行*/
@media (max-width: 767px) {
  .text-div-wrap {
    display: block;
  }
}

/*----在.table-responsive 增加可滑動提示///start----*/
@media (max-width: 767px) {
  .table-responsive {
    position: relative;
  }

  .table-responsive:before {
    content: "→";
    position: absolute;
    right: 10px;
    top: -1rem;
    z-index: 1;
    display: block;
    font-size: 1.5rem;
    color: #eee;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    font-weight: bold;
    animation-duration: 12s;
    animation-name: table-slidein;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 12s;
    -webkit-animation-name: table-slidein;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -moz-animation-duration: 12s;
    -moz-animation-name: table-slidein;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
  }

  @-webkit-keyframes table-slidein {
    0% {
      margin-right: 15px;
    }

    10% {
      margin-right: 0px;
    }

    20% {
      margin-right: 15px;
    }

    30% {
      margin-right: 0px;
    }

    40% {
      margin-right: 15px;
    }

    50% {
      margin-right: 0px;
    }

    60% {
      margin-right: 15px;
    }

    70% {
      margin-right: 0px;
    }

    80% {
      margin-right: 15px;
    }

    90% {
      margin-right: 0px;
      opacity: 1;
    }

    100% {
      margin-right: 15px;
      opacity: 0;
      display: none;
    }
  }

  @-moz-keyframes table-slidein {
    0% {
      margin-right: 15px;
    }

    10% {
      margin-right: 0px;
    }

    20% {
      margin-right: 15px;
    }

    30% {
      margin-right: 0px;
    }

    40% {
      margin-right: 15px;
    }

    50% {
      margin-right: 0px;
    }

    60% {
      margin-right: 15px;
    }

    70% {
      margin-right: 0px;
    }

    80% {
      margin-right: 15px;
    }

    90% {
      margin-right: 0px;
      opacity: 1;
    }

    100% {
      margin-right: 15px;
      opacity: 0;
      display: none;
    }
  }

  @keyframes table-slidein {
    0% {
      margin-right: 15px;
    }

    10% {
      margin-right: 0px;
    }

    20% {
      margin-right: 15px;
    }

    30% {
      margin-right: 0px;
    }

    40% {
      margin-right: 15px;
    }

    50% {
      margin-right: 0px;
    }

    60% {
      margin-right: 15px;
    }

    70% {
      margin-right: 0px;
    }

    80% {
      margin-right: 15px;
    }

    90% {
      margin-right: 0px;
      opacity: 1;
    }

    100% {
      margin-right: 15px;
      opacity: 0;
      display: none;
    }
  }
}

/*----在.table-responsive 增加可滑動提示///end----*/


/*----CSS grid 表格///start----*/
.cssgrid-table {
  display: grid;
  margin-top: 8px;
}

.cssgrid-table tbody,
.cssgrid-table thead,
.cssgrid-table caption {
  display: block;
}

/*標題*/
.item-header {
  color: #fff;
  font-weight: 600;
}

/*每一列*/
.item-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

/*每一格*/
.item-container>* {
  padding: 8px;
  border: 1px solid #eee;
}

.item-container:nth-child(2n) {
  background-color: #fafafa;
}

/*備註*/
.attribute-note {
  font-size: 0.85rem;
  padding-left: 5px;
}

@media (max-width: 767px) {
  .item-container {
    grid-template-columns: 1fr;
    margin-bottom: 24px;
  }

  .item-container .attribute {
    display: grid;
    grid-template-columns: minmax(7em, 30%) 1fr;
    /*每一列手機上增加一個左側的區塊*/
  }

  .item-container .attribute::before {
    content: attr(data-name) " ";
    display: block;
    background-color: #999999;
    margin: -8px 8px -8px -8px;
    padding: 8px;
    color: #fff;
  }

  /*標題隱藏*/
  .item-header {
    display: none;
  }
}

@media (max-width: 425px) {
  .item-container .attribute {
    grid-template-columns: minmax(8em, 35%) 1fr;
  }
}

/*電腦版不需要有display-grid的class,增加cssgrid-table--mobile即可*/
@media (min-width: 767px) {
  .cssgrid-table.cssgrid-table--mobile {
    display: table;
    width: 100%;
  }

  .cssgrid-table.cssgrid-table--mobile tbody,
  .cssgrid-table.cssgrid-table--mobile thead,
  .cssgrid-table.cssgrid-table--mobile caption {
    display: contents;
  }

  .cssgrid-table.cssgrid-table--mobile .item-container {
    display: table-row;
  }
}

/*----CSS grid 表格//end----*/

/*----只有單底線的表格-拆訂單的時候使用///start----*/
.sm-simple-table {
  width: 100%;
}

@media (max-width: 767.98px) {
  .sm-simple-table {
    font-size: 0.875rem;
  }
}

.sm-simple-table th,
.sm-simple-table td {
  padding: 0.5rem;
}

.sm-simple-table th {
  border-bottom: 2px solid #DEE2E6;
}

.sm-simple-table td {
  border-top: 1px solid #E7EBEF;
}

/*該表格內的標題製作字數限制*/
.sm-simple-table__title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*縮排*/
.sm-simple-table .sm-simple-table__indent {
  background-color: var(--sm-background);
}

.sm-simple-table .sm-simple-table__indent td:first-child {
  padding-left: 24px;
}

/*如果bs4 卡片內有sm簡易表格時，表格頭部會刪減距離*/
.card-body:has(>.sm-simple-table) {
  padding-top: 0;
}


/*如果卡片內有sm簡易表格時，表格最後一欄增加底線*/
.sm-card .sm-simple-table td {
  border-bottom: 1px solid #E7EBEF;
}

/*----只有單底線的表格-拆訂單的時候使用///end ----*/


/*faq、產品詳細頁、最新消息的回上一頁按鈕距離*/
.faq_content_button,
#product_content_button,
.news_content_button {
  margin-top: 8px;
}

.subtitle {
  display: block;
  opacity: 0.7;
  font-size: 85%;
}

/*表格下方的按鈕列 */
.table-bottom-button {
  margin-top: 8px;
  text-align: right;
}

.table-bottom-button .btn {
  margin: 0 4px;
}


/*------------------------------------*\
點圖片跳出影片的css
\*------------------------------------*/
/*跳出影片加上.videoBox 改變外觀*/
#colorbox.videoBox {
  background: transparent;
}

#colorbox.videoBox #cboxTopCenter {
  height: 48px;
  border-bottom: 0px;
  margin-bottom: 0px;
}

#colorbox.videoBox #cboxWrapper {
  background: transparent;
  border-radius: 0px;
}

#colorbox.videoBox #cboxContent {
  background: transparent;
}

/*關閉的x變圓形*/
#colorbox.videoBox #cboxClose {
  top: -40px;
  right: 0;
  background-position: -100px -25px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

/*不知道在哪裡的顏色??*/
.ecoupon_number {
  color: #AA0000;
  margin-left: 4px;
}


/*---- 20200507紅利點數已使用?----*/
.tr-bonus-used {
  opacity: 0.4;
  background-color: #ccc;
}

.tr-bonus-used .attribute {
  background-color: #ccc;
}

/*----最早期版的推薦商品-外框----*/
.special-products-border {
  border: 1px #999999 solid;
  padding: 6px 12px;
}

.special-products-border legend {
  font-weight: bold;
  width: auto;
  padding-right: 8px;
  padding-left: 4px;
}

/*包住的大區塊*/
.special-products-block {}

/*每張圖的欄位*/
.special-products {
  margin-bottom: 8px;

}

.special-products img {
  width: 100%;
}


/*----產品頁+購物列表的紅利css----*/
.product-detail-bonus,
.cart-bonus {
  line-height: 1.4;
  margin: 12px 8px 0 0;
}

.product-detail-bonus__text,
.cart-bonus__text {
  border-radius: 2px;
  padding: 0px 4px;
  background-color: #c62828;
  color: #ffffff;
  font-size: 0.8rem;
}

.product-detail-bonus__num,
.cart-bonus__num {
  /* font-size: 1.125rem; */
  line-height: 21px;
  font-weight: 700;
  color: var(--sm-badge--bonus);
  padding-left: 4px;
  padding-right: 4px;
}

.cart-bonus__num {
  margin: 0;
}

/*------------------------------------*\
常用功能-聯絡我們
\*------------------------------------*/

/*-----聯絡我們 ///start----*/
.sm-contact .media {
  background: url(/template/common/v2/images/dot_contact.png) no-repeat 0px 8px;
  padding-left: 10px;
  margin-top: 0px;
  margin-bottom: 15px;
}

.sm-contact .media-heading {
  font-weight: 700;
  padding-right: 0.5rem;
}

/*----聯絡我們 ///end----*/


/*------------------------------------*\
常用功能-最新消息-可上圖下文或左圖右文
\*------------------------------------*/
/*----圖文列表，由上而下：圖、標題、文、日期///start----*/
.sm-figure-a .card,
.sm-figure-b .card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  box-shadow: none;
  height: calc(100% - 1.5em);
  margin-bottom: 1.5rem;
  background: transparent;
}

.sm-figure-a .card img,
.sm-figure-b .card img {
  border-radius: 0.25rem;
}

.sm-figure-a .card-title,
.sm-figure-b .card-title {
  font-size: 1.125rem;
}

.sm-figure-a .card-title a,
.sm-figure-b .card-title a {
  color: #333333;
}

.sm-figure-a .card-title a:hover,
.sm-figure-a .card-title a:focus,
.sm-figure-b .card-title a:hover,
.sm-figure-b .card-title a:focus {
  color: var(--primary);
}

.sm-figure-a .card-body,
.sm-figure-b .card-body {
  padding: 1rem 0 0 0;
}

.sm-figure-a .card-text,
.sm-figure-b .card-text {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*日期*/
.sm-figure-date {
  font-size: 0.875rem;
  color: #999999;
}

/*----圖文列表，由上而下：圖、標題、文、日期///end----*/
/*----圖文列表，左圖+右標題、、日期、文///start----*/
.sm-figure-b .card {
  flex-direction: inherit;
}

.sm-figure-b .card .card-img {
  margin-right: 1rem;
  width: 30%;
}

.sm-figure-b .card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

.sm-figure-b .card-title {
  margin-top: 0;
  order: -2;
}

.sm-figure-b .sm-figure-date {
  order: -1;
}

/*----圖文列表，左圖+右標題、、日期、文///end----*/

@media (min-width: 767px) {
  .sm-main-md {
    max-width: 760px;
    margin: auto;
  }
}