@charset "UTF-8";
/* bootstrap 客製樣式 | ├── badge標籤 ├── alert注意事項 ├── Button按鈕 ├── form表單 ├── pagination頁數 ├── Table表格 ├── modal跳窗 ├── tab └──
*/
/* reset */
html { height: 100%; font-size: 16px; }

body { display: -ms-flex; display: flex; -ms-flex-direction: column; flex-direction: column; min-height: 100%; margin: 0; padding: 0; font-size: 1rem; font-family: "Roboto", Helvetica, "Helvetica Neue", Arial, "微軟正黑體", "Microsoft JhengHei", "Microsoft YaHei", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "LiHei Pro", sans-serif; line-height: 1.25; word-wrap: break-word; word-break: break-word; background: #fff; color: #171616; overflow-x: hidden; }

a { color: inherit; text-decoration: none; transition: all .3s ease; outline: none; }

a:hover { color: initial; text-decoration: none; }

/*=============== 共用style/單一樣式 ==================*/
/*背景色*/
.con-bgStyle01 { background-color: #F2F2F2; }

.section-bg01 { background: #F2F2F2; }

.bg-brand-light { background-color: #efe8dd; }

.bg-brand { background-color: #b89864; }

.bg-facebook { background-color: #0084ff; }

.bg-line { background-color: #3ace01; }

.bg-white { background-color: #fff; }

.bg-black { background-color: #000; }

.bg-dark { background-color: #171616; }

.bg-body { background-color: #fff; }

/* color */
.font-color01 { color: #dc3545 !important; }

.font-color02 { color: #FFDD00 !important; }

.font-color03 { color: #1d1d1d !important; }

.text-brand { color: #b89864; }

.text-brand-dark { color: #ae8440; }

.text-gray { color: #888; }

/* 文字 */
h3 { font-weight: bold; }

/* 放在舊header的樣式 */
h4, .h4 { font-size: 1.0rem; }

/* END of 放在舊header的樣式 */
.big { font-size: 1.125em; }

.font-10 { font-size: 0.625rem; }

.font-11 { font-size: 0.688rem; }

.font-12 { font-size: 0.75rem; }

.font-13 { font-size: 0.813rem; }

.font-14 { font-size: 0.875rem; }

.font-15 { font-size: 0.938rem; }

.font-16 { font-size: 1rem; }

.font-17 { font-size: 1.063rem; }

.font-18 { font-size: 1.125rem; }

.font-19 { font-size: 1.188rem; }

.font-20 { font-size: 1.25rem; }

.font-21 { font-size: 1.313rem; }

.font-22 { font-size: 1.375rem; }

.font-23 { font-size: 1.438rem; }

.font-reset { font-family: "Roboto", Helvetica, "Helvetica Neue", Arial, "微軟正黑體", "Microsoft JhengHei", "Microsoft YaHei", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "LiHei Pro", sans-serif; }

.font-serif { font-family: "Playfair Display", "Time New Romans", "微軟正黑體", "Microsoft JhengHei", "Microsoft YaHei", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "LiHei Pro", serif; }

.leading-none { line-height: 1; }

.leading-tight { line-height: 1.25; }

.leading-snug { line-height: 1.375; }

.leading-normal { line-height: 1.5; }

.leading-relaxed { line-height: 1.75; }

.leading-loose { line-height: 2; }

.tracking-normal { letter-spacing: 0em; }

.tracking-wide-xs { letter-spacing: 0.05em; }

.tracking-wide { letter-spacing: 0.1em; }

.tracking-wider { letter-spacing: 0.15em; }

.tracking-widest { letter-spacing: 0.2em; }

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

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

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

@media (min-width: 992px) { .truncate-lg, .truncate-lg-1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .truncate-lg-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .truncate-lg-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } }
/* hr */
.hr-style01 { margin: 0; border-top: 1px solid #333333; }

.hr-style02 { margin: 30px 0; border-top: 1px solid #ececec; }

/* width */
.w-6em { width: 6em; }

.minw-6em { min-width: 6em; }

.mw-50 { max-width: 50%; }

.mw-60 { max-width: 60%; }

.mw-70 { max-width: 70%; }

.mw-80 { max-width: 80%; }

.mw-90 { max-width: 90%; }

@media (min-width: 992px) { .w-lg-75 { width: 75%; } }
/* height */
.winH { height: 100vh; }

.winH-cutHeader { height: calc(100vh - 4.75rem); }
@media (min-width: 1200px) { .winH-cutHeader { height: calc(100vh - 8.438rem); } }
@media (min-width: 1600px) { .winH-cutHeader { height: calc(100vh - 11.438rem); } }

/* padding */
.py-px { padding-top: 1px; padding-bottom: 1px; }

.pt-px { padding-top: 1px; }

.pb-px { padding-bottom: 1px; }

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

.pt-section { padding-top: 40px; }

.pb-section { padding-bottom: 40px; }

.py-section { padding-top: 40px; padding-bottom: 40px; }

@media (min-width: 768px) { .pt-md-80 { padding-top: 80px; }
  .pt-section { padding-top: 90px; }
  .pb-section { padding-bottom: 90px; }
  .py-section { padding-top: 90px; padding-bottom: 90px; } }
/* margin */
.m-npx { margin: -1px; }

/* display */
.pc-d-none { display: none; }

@media (max-width: 767px) { .pc-d-none { display: block; } }
.m-d-none { display: block; }

@media (max-width: 767px) { .m-d-none { display: none; } }
/* shadow */
.shadow { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }

.shadow-2 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }

.shadow-3 { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06); }

/* 頁面邊距 */
.gutter { padding-left: 1rem; padding-right: 1rem; }

.gutter-offset { margin-left: -1rem; margin-right: -1rem; }

@media (min-width: 768px) { .gutter { padding-left: 7%; padding-right: 7%; }
  .gutter-offset { margin-left: -7%; margin-right: -7%; } }
@media (min-width: 1200px) { .gutter { padding-left: 9%; padding-right: 9%; }
  .gutter-offset { margin-left: -9%; margin-right: -9%; } }
/* 主要區塊 */
.section01 { padding-top: 30px; padding-bottom: 30px; }

.section02 { padding-top: 60px; padding-bottom: 60px; }

.section-bg01 { background: #F2F2F2; }

/* layout */
.wrap { -ms-flex-grow: 1; flex-grow: 1; }
.wrap::after { display: block; clear: both; content: ""; }

.body-gradient .wrap { background: linear-gradient(#f8f8f8, transparent 250px); }

/*固定錨點區塊*/
.anchor-box { width: 100%; position: fixed; top: 77px; z-index: 998; }

.anchor-box .container { white-space: nowrap; overflow-x: auto; padding: 20px 15px; }

.anchor-box a { margin: 0 2px; }

/* 放在舊header的樣式 */
.anchor-nextCon { padding-top: 120px; }

@media (max-width: 1199.98px) { /*固定錨點區塊*/
  .anchor-box { top: 4.75rem; }
  .anchor-box .container { padding: 15px; }
  .anchor-nextCon { padding-top: 100px; } }
/* END of 放在舊header的樣式 */
/*header icon功能*/
.header_icons { display: flex; align-items: center; }

.header_icons a { position: relative; display: block; width: 1em; height: 1em; }

.header_icons .badge { position: absolute; top: 0; right: 0; margin-top: -0.166em; min-width: 1.5em; font-size: 12px; font-weight: normal; padding: 0.25em; }

.iconStyle { background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }

.icon:before { content: ""; display: inline-block; vertical-align: middle; width: 1em; height: 1em; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; }

.icon_times:before { background-image: url("../images/common_icon/icon_times.svg"); background-size: contain; background-position: center center; }

.icon_header_menu { background-image: url("../images/header/icon_menu.svg"); background-size: 56.25% auto; background-position: center center; }

.icon_header_cart { background-image: url("../images/header/icon_header_cart.svg"); }

.icon_header_user { background-image: url("../images/header/icon_header_user.svg"); }

.icon_header_coin { background-image: url("../images/header/icon_header_coin.svg"); }

.icon_header_search { background-image: url("../images/header/icon_header_search.svg"); }

/*mask*/
.mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }

/*header
--------------------------------------------------------------------------------------------------*/
.header { position: fixed; z-index: 999; top: 0; left: 0; right: 0; text-align: center; background: #fff; /* background: rgba(255, 255, 255, 0.95); */ transition: .3s ease; }
.header.isSticky { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); }

.header-logo img { width: auto; vertical-align: middle; }

/* 首頁header */
.fixHeader .headerH { min-height: 0; }

.fixHeader .header:not(.isSticky) { background: transparent; }

@media (min-width: 1200px) { .headerH { min-height: 8.438rem; }
  .header { padding: 1.75rem 0 0.75em; } }
@media (min-width: 1600px) { .headerH { min-height: 11.438rem; }
  .header { padding: 3.25rem 0 2.25rem; } }
@media (max-width: 1199.98px) { .header-m-hide.header-m-hide { display: none; }
  .headerH, .header { min-height: 4.75rem; }
  .header_inner { display: flex; height: 50px; line-height: 50px; padding-left: 0.5rem; padding-right: 0.5rem; }
  .header_icons { min-width: 2.25em; height: 100%; font-size: 2rem; }
  .header_icons a + a { margin-left: 0.125em; }
  .header_icons .badge { margin-left: -0.125em; }
  .header-logo { margin: auto; padding: 0 0.5em; }
  .header-logo img { max-height: 1rem; }
  .header_quickMenu.tab { margin-top: -0.75rem; font-size: 0.875rem; line-height: 1; }
  .header_quickMenu.tab .tab_item + .tab_item::before { content: ""; position: absolute; left: 0; top: 50%; height: 1em; border-left: solid 1px #b89864; transform: translate(-50%, -50%) rotate(30deg); }
  .header_quickMenu.tab .tab_item > a { padding: 0.75rem 0.75em; }
  .header_nav { position: fixed; z-index: -1; top: 0; bottom: 0; left: 0; /* right: 0; */ opacity: 0; visibility: hidden; transition: all ease .3s; }
  .header_nav .mask { display: none; top: inherit; }
  .header_nav_close { position: absolute; z-index: 1; top: 0; right: 100%; font-size: 12px; line-height: 1; padding: 2em; opacity: .3; }
  .header_nav_close:active { opacity: 1; }
  .header_nav_cont { height: 100%; width: 300px; max-width: 80vw; padding: 50px 45px; text-align: left; line-height: 1.25; background: #fff; overflow-y: auto; transform: translateX(-100%); transition: all ease .3s; }
  /* open nav */
  .header_nav.open { z-index: 999; visibility: visible; opacity: 1; }
  .header_nav.open .mask { display: block; }
  .header_nav.open .header_nav_close { right: 0; }
  .header_nav.open .header_nav_cont { transform: translateX(0); }
  /* nav social icon */
  .nav_socialicon img { height: 2em; margin-right: 8px; }
  /* search */
  .header-search { display: block; margin: 2.25rem 0; }
  .header-search-text { width: 100%; height: 2rem; margin: 0 -2rem 0 0; line-height: 2rem; font-size: 0.875rem; outline: 0; border: 0; border-bottom: 1px solid #171616; }
  .header-search-btn { position: relative; float: right; width: 2rem; height: 2rem; font-size: 0; border: 0; outline: 0; background-color: transparent; }
  /* menu */
  .header_menu { margin: 0; font-size: 1rem; }
  .header_menu .badge { margin-top: -0.25em; vertical-align: middle; min-width: 1.5em; font-size: 12px; padding: 0.25em; }
  .header_menu a { display: block; text-decoration: none; }
  .header_menu_trigger { padding: 0.5em 0; }
  .header_menu_trigger-down:after { content: ""; display: inline-block; /* vertical-align: -0.125em; */ vertical-align: middle; width: 1em; height: 1em; margin: 0 0.5em; background: url(../images/common_icon/icon_arrowR.svg) center center no-repeat; transition: .3s ease; }
  .header_menu_dropdown { opacity: 0; max-height: 0; padding: 0; margin-left: 1rem; font-size: 0.875em; overflow: hidden; transform: translateY(-1em); transition: .3s linear; transition-property: opacity, transform; }
  .header_menu_dropdown a { padding: 0.4em 0; opacity: .6; }
  .header_menu_dropdown a:active { opacity: 1; }
  /* nav dropdown open */
  .header_menu_item.open .header_menu_trigger-down:after { transform: rotate(90deg); }
  .header_menu_item.open .header_menu_dropdown { opacity: 1; transform: translateY(0); max-height: 9999px; padding: 0.125em 0 1.25em; } }
@media (max-width: 360px) { .header_icons { min-width: auto; } }
@media (min-width: 1200px) { .header-d-hide { display: none; }
  .header-logo { transition: .3s ease; }
  .header.isSticky { padding: 0.75rem 0; transform: translateY(-2.5rem); }
  .header.isSticky .header-logo { opacity: 0; }
  .header_cont { display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; margin-top: 1rem; padding-left: 150px; padding-right: 0.5em; }
  .header_icons { min-width: 150px; font-size: 40px; }
  .header_icons a { margin-right: 10px; }
  .iconStyle:hover { background-position: bottom center; }
  .header_nav { -ms-flex-grow: 1; flex-grow: 1; }
  /*header menu*/
  .header_menu { margin: 0; text-align: center; letter-spacing: 0; }
  .header_menu a { display: block; text-decoration: none; white-space: nowrap; }
  .header_menu_item { position: relative; display: inline-block; vertical-align: top; margin-right: -0.125em; }
  .header_menu_item-home { display: none; }
  .header.isSticky .header_menu_item-home { display: inline-block; }
  .header_menu_trigger { position: relative; padding: 1em 1.875em; line-height: 1.25; border-bottom: solid 2px transparent; }
  /* hover */
  .header_menu a:hover, .header_menu_item:hover .header_menu_trigger { font-weight: bold; color: #B89864 !important; }
  .header_menu_trigger:hover, .header_menu_item:hover .header_menu_trigger { border-color: initial; }
  /* menu dropdown */
  .header_menu_dropdown { z-index: -999; opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 50%; width: 100%; min-width: 9em; margin-top: -2px; padding: 1.5em 0; font-size: 14px; text-align: center; line-height: 1.5; background: #fff; border-top: solid 2px #B89864; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05); transform: translate(-50%, -1em); transition: transform .3s ease; }
  .header_menu_dropdown a { padding: 0.5em; }
  .header_menu_item:hover .header_menu_dropdown { z-index: 1; opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  /* header search */
  .header-search { position: relative; }
  .header-search input:focus { outline: none; }
  input.header-search-text { position: absolute; top: 0; right: 0; z-index: 2; height: 40px; line-height: 40px; padding-left: 8px; padding-right: 48px; width: 0px; /* font-family: "Lato"; */ font-size: 1rem; font-weight: 100; border: none; outline: none; background: none; color: #555; cursor: pointer; transition: width 0.4s cubic-bezier(0, 0.795, 0, 1); }
  input.header-search-text:focus { width: 240px; z-index: 1; background: #fff; border: 1px solid #d8d8d8; border-radius: 3px; cursor: text; }
  input.header-search-text:focus ~ input.header-search-btn { background-color: #fff; border: 1px solid #d8d8d8; border-left: 0; border-radius: 5px; }
  input.header-search-btn { height: 40px; width: 40px; float: right; background-color: transparent; background-image: url("../images/header/icon_header_search.svg"); text-indent: -10000px; border: none; position: absolute; top: 0; right: 0; z-index: 1; cursor: pointer; opacity: 0.9; transition: opacity .4s ease; } }
/* @media (max-width:767px) { .header-logo img { width: 90px; } .header-nav { order: 2; } .user-features { order: 1; padding: 0 10px 0 0; margin-right: 20px; } .user-features::before { left: auto; right: 0px; } .mNav-loginBtn { position: absolute; display: block; width: calc(100% - 30px); bottom: 15px; left: 15px; } .mNav-loginBtn img { margin-right: 5px; } input.header-search-text:focus { width: 170px; }
} */
/*內頁-左側submenu*/
.left-submenu { padding-left: 10px; }

.left-submenu .row { margin: 0; }

.left-submenu .col-md-12 { padding: 0; }

.left-submenu a { width: 100%; height: 55px; font-size: 1.125rem; display: flex; align-items: center; padding: 0 15px; }

.left-submenu a.active, .left-submenu a:hover { background: #ffffff; text-decoration: none; border-left: 3px solid #000000; }

@media (max-width: 767px) { /*內頁-左側submenu*/
  .left-submenu { padding-left: 0; }
  .left-submenu .col-3, .left-submenu .col-4, .left-submenu .col-6 { padding: 0; }
  .left-submenu a { height: 50px; font-size: 1rem; justify-content: center; padding: 0 5px; }
  .left-submenu a.active, .left-submenu a:hover { border-left: 0; border-top: 3px solid #000000; } }
/* footer */
.footer { padding: 2.25em 0 1px; text-align: center; color: #fff; background: #171616; }
.footer a:hover { color: inherit; }
.footer_menu { margin: 0; }
.footer_menu_item { display: inline-block; padding: 0.25em 0.375em; }
.footer_companyInfo { margin-top: 0.5em; font-size: 13px; line-height: 1.6; opacity: .7; }
.footer .copyright { margin: 2em 0; font-size: 12px; opacity: .5; }
@media (min-width: 768px) { .footer { padding: 2.25em 0; }
  .footer_menu { margin: 0 0 1em; }
  .footer_companyInfo { margin: 0; }
  .footer .copyright { margin: 0; font-size: 13px; opacity: .7; } }

.fixedBtns { position: fixed; z-index: 999; bottom: 0; right: 0; margin: 10px; font-size: 24px; text-align: center; }
.fixedBtns_btn { display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; margin-top: 0.5em; box-sizing: content-box; border-radius: 50%; color: #fff !important; cursor: pointer; }
.fixedBtns_btn:hover, .fixedBtns_btn:active { color: #fff; }
.fixedBtns_btn_txt { font-size: 12px; line-height: 1; }
.fixedBtns_btn img { max-width: 100%; height: auto; }
.fixedBtns_trigger { position: relative; }
.fixedBtns_trigger .far { transition: .3s ease; }
.fixedBtns_cont { opacity: 0; visibility: hidden; transform: translateY(50%); transition: .3s ease; }
.fixedBtns_checkbox:checked ~ .fixedBtns_cont { opacity: 1; visibility: visible; transform: translateY(0); }
.fixedBtns_checkbox:checked ~ .fixedBtns_trigger .far { transform: rotate(360deg); }
.fixedBtns_checkbox:checked ~ .fixedBtns_trigger .far:before { content: "\f00d"; font-weight: 900; }
@media (min-width: 992px) { .fixedBtns { margin: 50px; } }

/* tabbar */
/*gotop功能*/
.goTop-btn { width: 60px; height: 60px; padding: 0; margin: 0; border: 0; border-radius: 5px; background: #000; cursor: pointer; position: fixed; right: 10px; top: 30vh; margin-top: -62px; display: none; z-index: 999; }

@media (max-width: 767px) { .goTop-btn { width: 40px; height: 40px; right: 10px; top: auto; bottom: 280px; margin-top: 0px; } }
/*GetButton*/
.sc-7dvmpp-1, .q8c6tt-2 { margin-bottom: 10px; }

.sc-1s18q3d-0 .q8c6tt-2 { margin-bottom: 0px; }

@media (min-width: 768px) { .sc-7dvmpp-1, .q8c6tt-2 { margin-bottom: 30px; } }
/*scrollbar*/
.scrollbar { -webkit-overflow-scrolling: touch; }

.scrollbar::-webkit-scrollbar { height: 8px; width: 8px; background-color: transparent; }

.scrollbar::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(0, 0, 0, 0.1); }

.scrollbar::-webkit-scrollbar-track { background-color: transparent; }

/* 放在舊header的樣式 */
/*滾動條裡面軌道樣式*/
.scrollbar::-webkit-scrollbar-track { border-radius: 0; background: rgba(0, 0, 0, 0.05); }

@media (max-width: 767px) { /*滾動條*/
  .scrollbar::-webkit-scrollbar { width: 3px; height: 3px; } }
/* 斜體link */
.link { font-size: 1.25rem; font-weight: bold; font-style: italic; letter-spacing: 0.1em; color: #b89864; }
.link:hover { color: #b89864; }
.link_small { font-size: 0.65em; font-style: normal; font-weight: normal; letter-spacing: 0; }

/*標題*/
.headline { font-weight: bold; text-align: center; letter-spacing: 0.1em; line-height: 1.25; }
.headline_title { display: block; font-size: 1.5rem; color: #b89864; }
.headline_small { display: block; margin-top: 0.286em; font-size: 1rem; }
@media (min-width: 768px) { .headline_title { font-size: 2.25rem; }
  .headline_small { margin-top: 0.75em; font-size: 1.25rem; } }

.headline-style01, .headline-style02 { font-size: 26px; font-weight: bold; text-align: center; position: relative; margin: 0 0 30px 0; padding-bottom: 10px; }

.headline-style01::after { position: absolute; content: ""; width: 60px; height: 3px; background-color: #9B9B9B; left: 50%; margin-left: -30px; bottom: 0px; }

.headline-style02 { margin: 0; padding-bottom: 0; }

.headline-style02 span { font-size: 14px; color: #9B9B9B; display: block; margin-top: 3px; }

.headline-block01 { padding: 20px 0; }

.bg-cart { background: url("../images/headline_cart.jpg") no-repeat; background-size: cover; }

/*小標*/
.subtitle-style01 { position: relative; font-size: 20px; font-weight: bold; text-align: center; margin: 0 0 20px 0; padding-bottom: 8px; }

.subtitle-style01::after { position: absolute; content: ""; width: 50px; height: 2px; background-color: #9B9B9B; left: 50%; margin-left: -25px; bottom: 0px; }

.subtitle-style02 { font-size: 20px; font-weight: bold; border-left: 3px solid #9B9B9B; padding-left: 10px; margin-bottom: 20px; }

@media (max-width: 767px) { /*標題*/
  .headline-style01, .headline-style02 { font-size: 20px; }
  .headline-style01 { margin: 0 0 20px 0; padding-bottom: 6px; }
  .headline-style01::after { width: 50px; height: 2px; margin-left: -25px; }
  /*小標*/
  .subtitle-style02 { font-size: 18px; margin-bottom: 15px; } }
.list-unstyled { list-style: none; margin: 0; padding: 0; }

.list-decimal { list-style: decimal; padding-left: 1.25em; }

.imgfit, .avatar { /*需要裁切的圖 (比例須個別另下) */ display: block; position: relative; overflow: hidden; text-align: left; }

.avatar { border-radius: 50%; }

.imgfit-1x1, .avatar { /* 寬高 1:1; */ padding-top: 100%; }

.imgfit-3x2 { /* 寬高 3:2 */ padding-top: 66.66%; }

.imgfit-3x4 { /* 寬高 3:4 */ padding-top: 133.33%; }

.imgfit img, .avatar img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; }

.imgfit-contain img { object-fit: contain; }

.imgfit-scale-down img { object-fit: scale-down; }

@media screen\0 { .imgfit, .avatar { z-index: 0; }
  .imgfit img, .avatar img { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100% !important; height: auto !important; } }
/*圖文編輯器*/
.editor { font-size: 1rem; font-weight: 400; line-height: 1.75; word-wrap: break-word; word-break: break-word; clear: both; }

.editor:after { content: ""; display: block; height: 0; clear: both; }

.editor img { max-width: 100%; height: auto !important; vertical-align: middle; }

.editor-imgCenter img { display: block; margin-left: auto; margin-right: auto; }

.editor iframe { max-width: 100%; }

@media (max-width: 991.98px) { .editor iframe[src*="youtube"], .editor iframe[src*="vimeo"], .editor iframe[src*="facebook"], .editor iframe[src*="instagram"] { width: 100%; /*height: 56.25%;*/ height: -webkit-calc( (100vw - 20px) * 0.5625); height: -moz-calc( (100vw - 20px) * 0.5625); height: calc( (100vw - 20px) * 0.5625); } }
.pager { clear: both; font-size: 0.875rem; text-align: center; }
.pager_item { display: inline-block; padding: 0.5em; opacity: .3; }
.pager_item:hover { color: #b89864; opacity: 1; }
.pager_item.active { font-weight: bold; opacity: 1; }
@media (min-width: 768px) { .pager { font-size: 1rem; }
  .pager_item { padding: 0.75em; } }

.tab { padding: 0; list-style: none; font-size: 0.938rem; letter-spacing: 0.1em; text-align: center; border-bottom: 1px solid #e5e5e5; }
.tab a { cursor: pointer; }
.tab a:hover { color: #b89864; }
.tab_cont { margin-bottom: -1px; padding: 0 0.5em; list-style: none; }
@supports (-webkit-overflow-scrolling: touch) { .tab_cont-scroll { -webkit-overflow-scrolling: touch; } }
@media (pointer: coarse) { .tab_cont-scroll { white-space: nowrap; overflow-x: auto; }
  .tab_cont-scroll::-webkit-scrollbar { display: none; } }
.tab_item { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; }
.tab_item > a { display: block; padding: 0.8em 0.5em; }
.tab_item > a::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 0.75em; border-bottom: solid 3px transparent; }
.tab_item:hover > a { color: #b89864; }
.tab_item.active a { color: #b89864; }
.tab_item.active a::before { border-color: initial; }
.tab_item .dropdown-menu { margin-top: -1px; padding: 1em 0; font-size: 1em; }
.tab_item .dropdown-item { padding: 0.4em 1em; }
@media (min-width: 768px) { .tab_cont { padding: 0 1.9em; }
  .tab .owl-item { position: relative; }
  .tab_item + .tab_item::before, .tab .owl-item + .owl-item:before { content: ""; position: absolute; left: 0; top: 50%; height: 1em; border-left: solid 1px #b89864; transform: translate(-50%, -50%) rotate(30deg); }
  .tab_item > a { padding: 1.5em 1.9em; }
  .tab_item > a::before { margin: 0 1.9em; }
  .tab_item .dropdown-menu { font-size: 0.8em; }
  .tab_item .dropdown-item { padding: 0.6em 1.5em; } }

.switchBtns .active { color: #fff; background-color: #b89864; border-color: #b89864; }

/*商品列表 old style*/
.pdList-item { position: relative; margin-bottom: 1.875rem; text-align: center; }

.pdList-item .list-text { text-align: center; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.625rem; }

.pdList-item h3 { font-size: 16px; margin: 0 0 5px 0; }

.pdList-item p { margin: 0; }

.pdList-item .btn { width: 120px; padding: 0.375rem 0.75rem; }

@media (max-width: 768px) { .pdList-item { margin-bottom: 1.25rem; }
  .pdList-item .pdImg { margin-bottom: 10px; }
  .pdList-item .list-text { color: #000000; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.625rem; }
  .pdList-item h3 { font-size: 14px; margin: 0 0 5px 0; }
  .pdList-item p { margin: 0; }
  .pdList-item .btn { font-size: 14px; padding: 0.25rem 0.75rem; } }
/*商品列表 - NEW STYLE*/
.pdList { font-size: 0.75rem; text-align: center; letter-spacing: 0.1em; line-height: 1.5; }
.pdList_item { display: block; margin-bottom: 3rem; }
.pdList .imgfit { margin-bottom: 1.25em; }
.pdList_name, .pdList_price { margin: 0.55em 0; }
.pdList_btn { display: block; width: 9.5em; margin: 0.75em auto 0; font-size: 1em; }
.pdList_item:hover .imgfit { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06); }
@media (max-width: 575.98px) { .pdList-center [class^="col"]:last-child:nth-child(3) { margin-right: auto; } }

/* 客製 owl-theme */
.owl-carousel { display: block; }

.owl-theme .owl-dots .owl-dot span { width: 8px; height: 8px; margin: 0 10px; background: #171616; opacity: .1; }

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #B89864; opacity: 1; }

/* 首頁 */
/*排行*/
/*首頁-大廣告*/
.conBg-home-text { color: #ffffff; }

.conBg-home-text h2, .conBg-home-text p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conBg-home-text h2 { font-size: 36px; }

.conBg-home-text p { font-size: 24px; margin: 0; }

.conBg-home-btn { display: flex; align-items: center; }

@media (max-width: 767px) { .conBg-home-text { width: 80%; text-align: right; }
  .conBg-home-text h2 { font-size: 20px; margin-bottom: 5px; }
  .conBg-home-text p { font-size: 14px; margin-bottom: 5px; }
  .conBg-home-btn { width: 35%; margin-left: auto; }
  .conBg-home-btn .btn { font-size: 14px; padding: 0.4rem 0.75rem; } }
/*登入註冊*/
.login.con-block { padding: 20px 0 0; }

.login .tabs-style02 + .tab-content { padding: 1.875rem 0 0 0; }

.forget-input { position: relative; }

.forget-input .form-control { padding-right: 90px; }

.btn-forget { color: #0E81A5; position: absolute; right: 25px; top: 50%; margin-top: -10px; font-size: 14px; }

.btn-forget:hover { color: #0E81A5; }

.verify-code { width: calc(100% - 100px); margin-right: 0.625rem; }

.verify-code + img { width: 90px; height: 40px; }

.login .img-foil01, .login .img-foil02 { position: absolute; z-index: 2; }

.login .img-foil01 { left: -450px; bottom: -60px; }

.login .img-foil02 { right: -200px; bottom: -20px; }

.other-login-block { background: #ececec; display: flex; justify-content: center; align-items: center; margin-top: 2.5rem; padding: 20px; }

.other-login-block span { margin-right: 0.375rem; }

.other-login-block .other-login-btn { cursor: pointer; margin: 0 0.375rem; transition: all 0.3s ease-in 0s; }

.other-login-block .other-login-btn:hover { transform: scale(1.15); }

/*註冊*/
.consent { padding: 1em; height: 180px; max-height: 80vh; font-size: 14px; line-height: 1.5; overflow-y: auto; border-radius: 4px; border: solid 1px #ced4da; }

@media (max-width: 768px) { .login.con-block { padding: 10px 0 0; }
  .login-title { display: none; }
  .login .con-inpage { padding: 1rem 0 0 0; }
  .login .tabs-style02 + .tab-content { padding: 1.25rem 0 0 0; }
  .login .img-foil01, .login .img-foil02 { display: none; }
  .login-content { width: 100%; padding: 10px; }
  .other-login-block { margin-top: 1.875rem; padding: 1.25rem 1rem; }
  .other-login-block .other-login-btn img { width: 40px; } }
/* 商品列表 */
.productList .headline_title_small { display: block; margin-top: 0.25em; font-size: 0.75em; font-weight: inherit; }

/* 商品內頁 */
.pdInfo { font-size: 0.875rem; }
.pdInfo_photo img { display: block; max-width: 100%; margin: auto; border: solid 1px #e5e5e5; }
.pdInfo_title { margin-bottom: 0.313em; font-size: 1.375rem; line-height: 1.3; font-weight: bold; }
.pdInfo_subtitle { font-size: 1rem; font-weight: bold; color: #ae8440; }
.pdInfo_price { margin: 2em 0 1.429em; }
.pdInfo_price_label { font-size: 1rem; color: #ae8440; }
.pdInfo_price_sale { font-size: 2.438rem; color: #ae8440; }
.pdInfo_cart { margin-top: 1.429em; margin-bottom: 2.143em; }
.pdInfo_activity { font-size: 1.143em; font-weight: bold; }
@media (max-width: 767.98px) { .pdInfo_photo { padding: 0; margin: 0 -1rem 1.5rem; flex-grow: 1; width: auto; } }
@media (min-width: 992px) { .pdInfo_detail { padding-left: 2rem; }
  .pdInfo_title { font-size: 1.625rem; }
  .pdInfo_subtitle { font-size: 1.125rem; } }

/*購物車*/
/*step*/
.stepper-horizontal { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

ul.stepper { counter-reset: section; padding: 0; margin-bottom: 40px; }

.stepper-horizontal li { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: .5s; transition: .5s; }

ul.stepper > li:not(:last-of-type) { margin-bottom: .625rem; -webkit-transition: margin-bottom .4s; -o-transition: margin-bottom .4s; transition: margin-bottom .4s; }

.stepper-horizontal > li:not(:last-of-type) { margin-bottom: 0 !important; }

.stepper-horizontal li:not(:last-child):after, .stepper-horizontal li:not(:first-child):before { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 2px; margin: -29px 0 0 0; content: ""; background-color: #ececec; }

ul.stepper li .step { padding: 0 1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }

ul.stepper li .circle { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; width: 60px; height: 60px; color: #9B9B9B; text-align: center; background: #ececec; border-radius: 50%; }

ul.stepper li .circle span { display: block; }

ul.stepper li .circle .circle-text1 { margin: 0.25em 0; font-size: 12px; }

ul.stepper li .circle .circle-text2 { font-size: 24px; font-weight: bold; margin-top: -8px; }

ul.stepper li.active .circle { background-color: #b89864; color: #fff; }

.stepper-horizontal li .label { font-size: 14px; margin-top: 10px; }

ul.stepper li .label { color: #1D1D1D; }

@media (max-width: 767.98px) { /*step*/
  ul.stepper { margin-bottom: 20px; }
  .stepper-horizontal li:not(:last-child):after, .stepper-horizontal li:not(:first-child):before { margin: -24px 0 0 0; }
  ul.stepper li .step { padding: 0 5px; }
  ul.stepper li .circle { width: 50px; height: 50px; }
  ul.stepper li .circle .circle-text2 { font-size: 20px; margin-top: -6px; }
  .stepper-horizontal li .label { font-size: 12px; margin-top: 5px; } }
/*購物清單*/
.cart-list-pdName { display: flex; align-items: center; text-align: left; /*    justify-content: center;*/ }

.img-cart-pd { width: 100px; }

.cart-pd-name { margin: 0 0 0 10px; }

.total-block { display: flex; align-items: center; padding: 0 10px; }

.total-title { width: 80%; }

.total-text { width: 20%; }

.total-text.text-lg { font-size: 18px; color: #dc3545; }

a .cart-delete { opacity: 0.8; }

a:hover .cart-delete { opacity: 1.0; }

@media (max-width: 767.98px) { /*購物清單*/
  .cart-list-pdName { flex-wrap: wrap; text-align: left; }
  .img-cart-pd { width: 80px; }
  .cart-pd-name { display: block; margin: 5px 0 0 0; }
  .cart-delete { width: 16px; }
  .total-title { width: 70%; }
  .total-text { width: 30%; }
  /*訂單概要*/
  .order-summary { display: none; } }
/*客服廣告*/
.service-block { position: relative; margin-top: 20px; }

.service-block img { width: 100%; }

.service-content { width: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; bottom: 5px; }

.service-content h3 { font-size: 20px; color: #ffffff; margin: 0; }

.service-content p { font-size: 12px; color: #C8C8C8; margin: 0; }

.service-text { width: calc(100% - 80px); }

/*收件資料*/
.con-item { margin-bottom: 30px; }

@media (max-width: 768px) { .con-item { margin-bottom: 25px; } }
/*會員中心*/
.member-block { background: #ececec; border: 1px solid #ececec; border-top: 5px solid #ececec; }

.member-conL { padding-right: 0; }

.member-conR { padding-left: 0; }

.alert-danger.form-text { padding: 5px; }

@media (max-width: 768px) { .member-conL { padding-right: 10px; }
  .member-conR { padding-left: 10px; } }
/*賺錢*/
.income-btn-block { margin-bottom: 30px; }

@media (max-width: 768px) { .income-btn-block { margin: 15px 0; } }
/* news */
.newsPic { padding-top: 62.5%; border: solid 1px #e5e5e5; }

.newsList { font-size: 0.875rem; line-height: 1.5; }
.newsList_item { display: block; margin-bottom: 30px; }
.newsList_title { margin: 0.5em 0 0; font-size: 1.286em; font-weight: bold; }
@media (min-width: 992px) { .newsList_item-standout { font-size: 1rem; }
  .newsList_item-standout .newsList_title { margin: 1em 0 0.5em; font-size: 1.5em; } }

/* news_detail */
.newsDetail_top { margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #e5e5e5; }
.newsDetail_title { font-size: 1.125em; line-height: 1.5; }
.newsDetail_date { margin: 0; font-size: 0.875em; color: #b89864; letter-spacing: 0.1em; }
.newsDetail_date img { display: inline-block; margin-top: -0.25em; margin-right: 0.5em; }
@media (min-width: 992px) { .newsDetail_top { margin-bottom: 1.875em; padding-bottom: 1.875em; }
  .newsDetail_title { font-size: 1.5em; } }

/*內頁-新聞*/
/*問題教學*/
.tab-qa { position: sticky; background: #fff; }
.tab-qa:before, .tab-qa:after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 2em; pointer-events: none; }
.tab-qa:before { left: 0; background: linear-gradient(to right, #fff 10%, rgba(255, 255, 255, 0)); }
.tab-qa:after { right: 0; background: linear-gradient(to left, #fff 10%, rgba(255, 255, 255, 0)); }
.tab-qa .tab_cont { padding: 0; white-space: nowrap; overflow-y: visible; overflow-x: auto; cursor: -webkit-grab; -webkit-overflow-scrolling: touch; }
.tab-qa .tab_cont::-webkit-scrollbar { display: none; }
.tab-qa .tab_cont:active { cursor: -webkit-grabbing; }
.tab-qa .tab_cont a { cursor: -webkit-grab; }
.tab-qa .tab_cont a:active { cursor: -webkit-grabbing; }
.tab-qa .tab_cont_gutter { display: inline-block; width: 1em; }
@media (min-width: 768px) { .tab-qa:before, .tab-qa:after { width: 4em; }
  .tab-qa .tab_cont_gutter { width: 2em; } }

.qaNav { position: sticky; padding: 20px 15px; text-align: center; background: #f8f9f9; }
.qaNav .btn { margin: 0.25em; }
@supports (-webkit-overflow-scrolling: touch) { .qaNav { -webkit-overflow-scrolling: touch; } }
@media (pointer: coarse) { .qaNav { white-space: nowrap; overflow-x: auto; } }
@media (max-width: 1599.98px) { .qaNav { padding: 10px 15px; }
  .qaNav .btn { font-size: 12px; } }

.qa-item { margin-bottom: 2em; }

.qa-item:last-child { margin-bottom: 0; }

.qa-item .qa-title { font-size: 1.125em; letter-spacing: 0.05em; line-height: 1.5; margin-bottom: 1em; }

.qa-item .qa-title img { margin-right: 0.5rem; }

.qa-title .qa-num { margin-right: 0.125em; font-size: 1.255em; font-weight: bold; letter-spacing: 0.1em; color: #b89864; }

.qa-item .qa-text { padding: 1rem; font-size: 14px; line-height: 1.5; border-radius: 4px; background: #f8f9f9; }

@media (min-width: 768px) { .qa-title .qa-num { font-size: 1.75em; } }
.mapouter, .gmap_canvas { max-width: 100%; }
.mapouter iframe, .gmap_canvas iframe { width: 100%; }

@media (max-width: 575.98px) { .about { font-size: 3.75vw; letter-spacing: 0.2em; line-height: 2; }
  .about big { font-size: inherit; } }

/*# sourceMappingURL=common.css.map */