$IconSale$
$PrdImgM$
加入購物車
售完
補貨中
請洽客服
$PrdTitle$
$PrdPrice$
$IconSale$
$PrdImgM$
$PrdTitle$
$PrdDesc$
$PrdPrice$
加入購物車
售完
補貨中
請洽客服
.PrdList .tdCol {vertical-align:top; padding:8px; }
.PrdList .PrdListCont { text-align:center; }
.PrdList .PrdCell { width:100%; }
.PrdList .PrdCell .PrdImgM { margin-bottom:8px; }
.PrdList .PrdCell .PrdImgM img { max-width:300px; max-height:300px; }
.PrdList .PrdCell .PrdImgB { margin-bottom:8px; }
.PrdList .PrdCell .PrdImgB img { max-width:300px; max-height:300px; }
.PrdList .PrdCell .PrdContent { margin-bottom:4px; }
.PrdList .PrdCell .PrdTitle { line-height:125%; margin-top:4px; margin-bottom:4px; color:#222222;}
.PrdList .PrdCell .PrdDesc { line-height:125%; margin-bottom:4px; color:#666666; text-align:left; }
.PrdList .PrdCell .PrdPrice { margin-bottom:4px; }
.PrdList .PrdCell .PriceName {}
.PrdList .PrdCell .DollarSign { font-weight:600;}
.PrdList .PrdCell .PriceAmt {}
.PrdList .PrdCell .DollarUnit { display: none;}
.PrdList .PrdCell .PrdCtrl { margin-bottom:8px; }
.PrdList .PrdCell .PrdQty {}
.PrdList .PrdCell .PrdBtn {}
.PrdList .PrdCell .PrdExt {}
/* 預設 */
.PrdList .SaleBtn1 { border:1px solid #aa0000; background:#cc0000; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn1:hover { background:#ff0000; }
/* 正常 */
.PrdList .SaleBtn2 { border:1px solid #aa0000; background:#cc0000; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn2:hover { background:#ff0000; }
/* 預購 */
.PrdList .SaleBtn3 { border:1px solid #0000aa; background:#000088; color:#ffff00; padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn3:hover { background:#0000cc; }
/* 郵購 */
.PrdList .SaleBtn4 { border:1px solid #0000aa; background:#000088; color:#ffff00; padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn4:hover { background:#0000cc; }
/* 補貨 */
.PrdList .SaleBtn5 { border:1px solid #006600; background:#008800; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn5:hover { background:#00cc00; }
/* 停售 */
.PrdList .SaleBtn6 { border:1px solid #666666; background:#888888; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; }
.PrdList .SaleBtn6:hover { background:#cccccc; }
/* 售完 */
.PrdList .SaleBtn7 { border:1px solid #666666; background:#888888; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; }
.PrdList .SaleBtn7:hover { background:#cccccc; }
/* 競標 */
.PrdList .SaleBtn8 { border:1px solid #aa0000; background:#cc0000; color:#ffff00; padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .SaleBtn8:hover { background:#ff0000; }
/* 推薦 */
.PrdList .PrdListExtBtn { border:1px solid #998800; background:#aa8800; color:var(--white); padding-left:4px;
padding-right:4px; white-space:nowrap; cursor:pointer; }
.PrdList .PrdListExtBtn:hover { background:#ddcc00; }
/* 紅利兌換 */
.tableExchg { width:100%; }
.tableExchg th , .tableExchg td { padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right:4px;
white-space:nowrap; font-weight:normal; color:#444444; border-radius:4px; }
.tableExchg th { text-align:center; background:#dddddd; }
.tableExchg td { text-align:center; }
.tableExchg .tdExchgBtn div { border-radius:4px; background:#cc0000; color:var(--white); padding-left:4px;
padding-right:4px; text-align:center; }
.tableExchg .tdExchgBtn div:hover { background:#ff0000; cursor:pointer; }
.tableExchg .spanExchgPt , .tableExchg .spanExchgAmt { font-weight:bold; color:red; }
/* 基本定義 */
#id_Content {
width: 100%;
}
.lmPrdListCard .PrdImgURL {
display: flex;
width: fit-content;
}
.lmPrdListCard .PrdImgURL img {
width: var(--prd-width);
height: var(--prd-width);
transition: all .4s ease-in;
object-fit: contain;
}
.PrdTitleText {
font-size: var(--h4-font-size);
font-weight: 500;
line-height: 150%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.PrdImgBlock {
position: relative;
}
.lmPrdListCard ul {
padding: 0;
margin: 0 0 0 0;
position: absolute;
left: 0;
top: 0;
max-width: 40px;
}
.lmPrdListCard li {
list-style: none;
}
.PriceName {
display: none;
}
.PrdPriceBox {
display: flex;
justify-content: center;
align-items: center;
column-gap: 12px;
}
.PrdPriceText {
font-size: var(--h4-font-size);
}
.PrdPriceText .USD {
font-size: var(--regular-font-size);
}
.PrdPriceAmt {
font-weight: 600;
}
.AddBtn a {
display: block;
background-color: var(--dark-theme-color);
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
}
/* 促銷圖示 */
.lmPrdListCard .ulIconSale {
width: var(--prd-width);
left: calc((100% - var(--prd-width)) / 2);
max-width: none;
pointer-events: none;
}
.lmPrdListCard .ulIconSale li {
text-align: left;
}
.lmPrdListCard.blockStyle {
/*display: none;*/
}
.lmPrdListCard.listStyle {
display: none;
}
/* 格狀排列 */
.blockStyle .AddBtn {
position: absolute;
left: calc((100% - var(--prd-width)) / 2);
bottom: 1px;
display: none;
}
.blockStyle .PrdImgBlock {
margin-bottom: 10px;
}
.PrdList .PrdCell .blockStyle .PrdTitle {
max-width: var(--prd-width);
}
.blockStyle .PrdImgBlock:hover .AddBtn {
display: block;
}
/* 列表排列 */
@media screen and (min-width: 768px) {
.lmPrdListCard.listStyle {
display: none;
}
.lmListStyle .lmPrdListCard.listStyle {
display: flex;
align-items: center;
padding: 0 0 20px 0;
column-gap: 28px;
border-bottom: 1px solid #bbb066;
}
.lmListStyle .lmPrdListCard.blockStyle {
display: none;
}
.lmListStyle .PrdList .trRow>table>tbody>tr {
display: flex;
flex-direction: column;
}
.lmListStyle .PrdList .tdCol {
width: 100%;
}
.lmListStyle .PrdPriceText,.lmListStyle .PrdPriceBox .USD {
width: var(--prd-width);
text-align: left;
/* margin-bottom: 12px; */
font-size: var(--big-font-size);
}
.lmListStyle .lmPrdListCard .PrdImgURL img {
min-width: 180px;
min-height: 180px;
}
.lmListStyle .lmPrdListCard .PrdTitleText {
text-align: left;
font-size: var(--big-font-size);
margin-top: 16px;
}
.lmListStyle .lmPrdListCard .PrdTitle {
width: 100%;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
grid-gap: 8px;
padding-right: 20px;
}
.lmListStyle .lmPrdListCard .PrdPriceBox {
flex-direction: column;
align-items: flex-end;
}
.lmListStyle .lmPrdListCard .PrdDesc {
flex: 1 1 60px;
}
.lmListStyle .AddBtn a {
background-color: var(--theme-color);
}
.lmListStyle .AddBtn a:hover{
background-color: var(--dark-theme-color);
}
}
/* 喜愛 */
.FaveBtn {
position: absolute;
top: -6px;
left: calc(((100% - var(--prd-width)) / 2) + 8px);
width: var(--prd-width);
justify-content: end;
display: flex;
}
.cssPrdInfoFave {
cursor: pointer;
width: 32px;
height: 32px;
background: url(/shop/shop/ClassInfo/270836890_20230912_10465343_bTN.svg) no-repeat;
background-position: 50% 60%;
background-color: var(--grey-lighter);
border-radius: 50%;
display: none;
}
.cssPrdInfoFave1 {
background-image: url(/shop/shop/ClassInfo/1722618121_20230912_10481295.svg);
display: block
}
.blockStyle .PrdImgBlock:hover .cssPrdInfoFave {
display: block;
}
.lmListStyle .FaveBtn {
width: var(--prd-width);
left: calc(((100% - var(--prd-width)) / 2) + 8px);
}
.lmPrdListCard.listStyle:hover .cssPrdInfoFave {
display: block;
}
.USDcoin .lmPrdListCard.listStyle .USD {
/* display: inline; */
font-size: var(--regular-font-size);
font-weight: 400;
margin: 4px 0 8px;
}
/* 售完 */
.blockStyle .SoldOutBtn {
position: absolute;
left: calc((100% - var(--prd-width)) / 2);
bottom: 1px;
}
.soldOut {
background-color: var(--grey-dark);
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
display: none;
}
.stocking {
background-color: var(--grey-dark);
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdImgBlock .AddBtn, .tdCol[s1='停售'] .lmPrdListCard .PrdImgBlock .AddBtn,
.tdCol[s1='補貨'] .lmPrdListCard .PrdImgBlock .AddBtn {
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdImgBlock .MailBtn, .tdCol[s1='停售'] .lmPrdListCard .PrdImgBlock .MailBtn,
.tdCol[s1='補貨'] .lmPrdListCard .PrdImgBlock .MailBtn {
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdImgBlock .soldOut {
display: block;
}
.tdCol[s1='停售'] .lmPrdListCard .PrdImgBlock .soldOut {
display: block;
}
.tdCol[s1='補貨'] .lmPrdListCard .PrdImgBlock .stocking {
display: block;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdPriceBox .AddBtn, .tdCol[s1='停售'] .lmPrdListCard .PrdPriceBox .AddBtn, .tdCol[s1='補貨']
.lmPrdListCard .PrdPriceBox .AddBtn {
display: none;
}
.tdCol[s1='售完'] .lmPrdListCard .PrdPriceBox .soldOut {
display: block;
}
.tdCol[s1='停售'] .lmPrdListCard .PrdPriceBox .soldOut {
display: block;
}
.tdCol[s1='補貨'] .lmPrdListCard .PrdPriceBox .stocking {
display: block;
}
/* 郵購按鈕 */
.blockStyle .MailBtn {
position: absolute;
left: calc((100% - var(--prd-width)) / 2);
bottom: 1px;
display: none;
}
.mail {
background-color: midnightblue;
font-family: var(--chinese-font);
font-weight: 500;
color: var(--white);
width: var(--prd-width);
padding: 8px 0;
display: none;
cursor: pointer;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdImgBlock .mail {
display: block;
}
.blockStyle .PrdImgBlock:hover .MailBtn {
display: block;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdTitle .mail {
display: block;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdImgBlock .AddBtn, .tdCol[s1='郵購'] .lmPrdListCard .PrdTitle .AddBtn {
display: none;
}
.tdCol[s1='郵購'] .lmPrdListCard .PrdImgBlock .SoldOutBtn, .tdCol[s1='郵購'] .lmPrdListCard .PrdTitle .SoldOutBtn {
display: none;
}
@media screen and (max-width: 768px) {
.tdCol[s1='郵購'] .blockStyle .MailBtn {
display: block;
}
}
/* 優惠價格 */
.lmPrdListCard .spanPrdExPrice {
display: block;
font-weight: 600;
}
.lmPrdListCard .spanPrdDisPrice {
display: block;
font-weight: 600;
}
.lmPrdListCard.listStyle .spanPrdExPrice {
margin-bottom: 4px;
}
.spanPrdExPrice[style=""] + .PriceName + .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdExPrice[style=""] ~ .PriceName ~ .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdExPrice[style=""] + .PriceName + .DollarSign + .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.spanPrdExPrice[style=""] ~ .PriceName ~ .DollarSign ~ .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.spanPrdDisPrice[style=""] + .PriceName + .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdDisPrice[style=""] ~ .PriceName ~ .DollarSign {
text-decoration: line-through;
color: var(--grey-dark);
}
.spanPrdDisPrice[style=""] + .PriceName + .DollarSign + .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.spanPrdDisPrice[style=""] ~ .PriceName ~ .DollarSign ~ .PrdPriceAmt {
text-decoration: line-through;
color: var(--grey-dark);
padding-left: 0;
}
.PrdPriceBox:has(.spanPrdExPrice[style=""] .USD) + .USD {
text-decoration: line-through;
color: var(--grey-dark);
}
.PrdPriceText:has(.spanPrdExPrice[style=""]) +.USD {
text-decoration: line-through;
color: var(--grey-dark);
}
.PrdPriceBox:has(.spanPrdDisPrice[style=""]) + .USD {
text-decoration: line-through;
color: var(--grey-dark);
}
.PrdPriceText:has(.spanPrdDisPrice[style=""]) + .USD {
text-decoration: line-through;
color: var(--grey-dark);
}
/* RWD */
@media screen and (max-width: 1120px) and (min-width: 1020px) {
:root {
--prd-width: 165px;
}
}
@media screen and (max-width: 900px) and (min-width: 768px) {
:root {
--prd-width: 165px;
}
}
@media screen and (max-width: 768px) {
.PrdList {
padding: 0 8px;
}
.PrdList .ColN_4 > tbody > tr {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 8px;
}
.PrdList .tdGap {
display: none;
}
.PrdList td.tdCol {
width: 100%;
}
.PrdList td.tdCol > center {
display: block;
height: 100%;
}
.tdCol > center > .PrdCell {
height: 100%;
}
.lmListStyle .lmPrdListCard.listStyle {
column-gap: 12px;
}
.lmListStyle .lmPrdListCard .PrdImgURL img {
min-width: unset;
}
.PrdList .PrdCell .DollarSign {
font-size: var(--big-font-size);
}
.lmPrdListCard.listStyle {
display: none;
}
/* 直接顯示按鈕 */
.PrdImgBlock {
position: unset;
}
.lmPrdListCard {
position: relative;
padding-bottom: 48px;
height: 100%;
}
.blockStyle .AddBtn {
display: block;
}
.cssPrdInfoFave {
display: block;
}
}
@media screen and (max-width: 480px) {
:root {
--prd-width: 150px;
}
.lmListStyle .lmPrdListCard .PrdTitle {
padding-right: 10px;
}
.PrdList {
padding: 0 4px;
}
}