@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----*/

/*----圖片置中///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 {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.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;
}

.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----*/

/*---- 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;
}
.sm-list-dl dt {
  grid-column: span 12;
  font-size: 0.875rem;
}
.sm-list-dl dd {
  grid-column: span 12;
  margin-bottom: 0.8rem;
}
.sm-list-dl__note {
  background-color: #eee;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  min-height: 2.5rem;
}
/*會員專區的訂單詳細頁-條列式帶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);
}

/*------------------------------------*\
通用-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;
}
.sm-product-price--discount .product_list_discount , .sm-product-price--event  .product_list_discount{
    display: table;
    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;
    }
  /*** 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----*/

/*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;
    }
}