@charset "utf-8";

.list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.3125rem;
}
.list.cols-news {grid-template-columns: repeat(var(--cols-news-ld), 1fr);}
.list.cols-product {grid-template-columns: repeat(var(--cols-product-ld), 1fr);}
.list.cols-article {grid-template-columns: repeat(var(--cols-article-ld), 1fr);}
.list.cols-file {grid-template-columns: repeat(var(--cols-file-ld), 1fr);}
.list.cols-album {grid-template-columns: repeat(var(--cols-album-ld), 1fr);}

@media (max-width: 1409px) {
.list {grid-template-columns: repeat(3, 1fr);}
.list.cols-news {grid-template-columns: repeat(var(--cols-news-md), 1fr);}
.list.cols-product {grid-template-columns: repeat(var(--cols-product-md), 1fr);}
.list.cols-article {grid-template-columns: repeat(var(--cols-article-md), 1fr);}
.list.cols-file {grid-template-columns: repeat(var(--cols-file-md), 1fr);}
.list.cols-album {grid-template-columns: repeat(var(--cols-album-md), 1fr);}
}

@media (max-width: 767px) {
.list {grid-template-columns: repeat(2, 1fr);}
.list.cols-news {grid-template-columns: repeat(var(--cols-news-sm), 1fr);}
.list.cols-product {grid-template-columns: repeat(var(--cols-product-sm), 1fr);}
.list.cols-article {grid-template-columns: repeat(var(--cols-article-sm), 1fr);}
.list.cols-file {grid-template-columns: repeat(var(--cols-file-sm), 1fr);}
.list.cols-album {grid-template-columns: repeat(var(--cols-album-sm), 1fr);}
}

@media (max-width: 480px) {
.list {grid-template-columns: repeat(1, 1fr);}
.list.cols-news {grid-template-columns: repeat(var(--cols-news-xs), 1fr);}
.list.cols-product {grid-template-columns: repeat(var(--cols-product-xs), 1fr);}
.list.cols-article {grid-template-columns: repeat(var(--cols-article-xs), 1fr);}
.list.cols-file {grid-template-columns: repeat(var(--cols-file-xs), 1fr);}
.list.cols-album {grid-template-columns: repeat(var(--cols-album-xs), 1fr);}
}

.list .item {
border: var(--border1);
padding: var(--padding2);
}
.list .item > a {
height: 100%;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.list .item .IMG {
width: 35%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bs-gray-100);
}
.list .item .TXT {width: 65%;}
.list .TXT h4 {
font-size: 1rem;
padding: 0.9375rem 0 0;
text-align: left;
}
.list .TXT .brief {
font-size: 0.875rem;
opacity: 0.8;
border-top: 1px solid;
padding: 0.5rem 0 0.75rem;
margin: 0.75rem 0 0;
}

.categoryDate {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.9375rem;
flex-wrap: wrap;
}
.categoryTag {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.825rem;
line-height: 1.35;
color: #fff;
background-color: var(--bs-gray-400);
border-radius: var(--bs-border-radius);
padding: 0.35rem 0.65rem;
transition: 0.25s;
}
.item:hover .categoryTag {background-color: var(--hoverC1);}
.date1 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
font-family: sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 1;
color: var(--bs-gray-400);
transition: color 0.25s;
}
.item:hover .date1 {color: var(--hoverC1);}
.date1 .line {
width: 6px;
height: 1px;
background-color: var(--bs-gray-400);
transition: background 0.25s;
}
.item:hover .line {background-color: var(--hoverC1);}

@media (max-width: 1409px) {
.list .item .IMG {width: 45%;}
.list .item .TXT {width: 55%;}
}

@media (max-width: 1199px) {
.list .TXT h4 {font-size: 0.975rem;}
}

@media (max-width: 480px) {
.list .item .IMG, .list .item .TXT {width: 100%;}
}


/* 1. 純標題文字列表 */
.list.list_Txt .item > a {align-items: flex-start;}
.list.list_Txt .item .IMG {display: none;}
.list.list_Txt .item .TXT {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.9375rem;
flex-wrap: wrap;
}
.list.list_Txt .TXT .categoryDate {width: auto;}
.list.list_Txt .TXT h4 {
padding: 0;
flex: 1;
}

@media (max-width: 1199px) {
.list.list_Txt .item .TXT {gap: 0.5rem;}    
.list.list_Txt .TXT h4 {flex: 1 1 100%;}
}

/* 2. 圖左標題右列表 */
.list.list_lIrT .item > a {
height: auto;
align-items: flex-start;
flex-wrap: nowrap;
gap: 1.875rem;
}
.list.list_lIrT .item .TXT {
display: flex;
flex-direction: column-reverse;
}
.list.list_lIrT .TXT h4 {padding: 0 0 0.9375rem;}

@media (max-width: 1199px) {
.list.list_lIrT .item > a {
flex-direction: column;
gap: 1.25rem;
}
.list.list_lIrT .item .IMG, .list.list_lIrT .item .TXT {width: 100%;}
.list.list_lIrT .TXT h4 {padding: 0;}
}

/* 3. 圖上標題下列表 */
.list.list_tIbT .item > a {
height: auto;
align-items: flex-start;
gap: 1.25rem;
}
.list.list_tIbT .item .IMG, .list.list_tIbT .item .TXT {width: 100%;}
.list.list_tIbT .item .TXT {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.list.list_tIbT .TXT h4 {padding: 0;}


/* ======== */
/* product */
.list.list_tIbT .item .product-link .TXT {flex-direction: column;}
.product-link .IMG {position: relative;}
.product-badge {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0.35rem 0.5rem;
font-size: 0.75rem;
line-height: 1;
font-weight: bold;
color: #fff;
border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) var(--bs-border-radius);
pointer-events: none;
}
.product-badge.badge-new { background: #28a745; }
.product-badge.badge-hot { background: #dc3545; }
.product-badge.badge-sale { background: #fd7e14; }
.product-actions {
padding-top: 0.75rem;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.25rem;
flex-wrap: wrap;
}
.product-actions .btn {flex: 1 1 auto;}

@media (max-width: 1199px) {
.product-actions .btn:nth-child(1) {flex: 1 1 100%;}
}