/* product_list */

/* 產品列表 */
#product_list{display:flex;flex-wrap:wrap;width:100%;margin:0;padding:0;gap:28px;white-space:normal;align-items:stretch;}
#product_list>li{position:relative!important;display:flex!important;flex:0 0 calc((100% - 84px)/4);width:calc((100% - 84px)/4)!important;max-width:calc((100% - 84px)/4)!important;margin:0!important;padding:0!important;flex-direction:column;background:#fff;border:1px solid #dce6ee;border-radius:4px;box-shadow:0 12px 28px rgba(18,63,107,.08)!important;vertical-align:top;overflow:hidden;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;}
#product_list>li:before{content:"";position:absolute;z-index:4;top:-1px;left:-1px;width:55px;height:3px;background:#2789cd;transition:width .4s ease;}
#product_list>li:after{content:"";position:absolute;z-index:1;top:0;right:0;width:72px;height:72px;background:linear-gradient(135deg,transparent 50%,rgba(39,137,205,.055) 50%);pointer-events:none;}
#product_list>li:hover{transform:translateY(-6px);border-color:#bfd6e6;box-shadow:0 18px 40px rgba(18,63,107,.12)!important;}
#product_list>li:hover:before{width:105px;}

/* 圖片 */
#product_list>li>img{position:relative!important;z-index:2;display:block;width:100%!important;height:auto!important;aspect-ratio:4/3;padding:9%;background-color:#f5f8fa;background-repeat:no-repeat;background-position:center;background-size:contain;object-fit:contain;transform:none!important;transition:background-color .4s ease,transform .45s ease;}
#product_list>li:hover>img{background-color:#f1f6f9;transform:scale(1.025)!important;}

/* 內容 */
#product_list .info_box{position:relative!important;z-index:3;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;display:block!important;width:100%!important;min-height:0!important;padding:25px 20px 22px!important;background:#fff!important;border-top:1px solid #e1e9ef;flex:1;margin-left: 0;margin-right: 0;}
#product_list .left_box{display:flex!important;width:100%!important;height:100%;padding:0!important;flex-direction:column;}
#product_list .left_box:before{content:"PRODUCT";display:block;margin:0 0 9px;color:#2789cd;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.16em;}
#product_list .left_box .h3{display:-webkit-box;height:auto!important;min-height:31px;margin:0 0 7px;padding:0!important;color:#123f6b!important;font-size:18px;font-weight:700;line-height:1.55;letter-spacing:.01em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
#product_list .left_box article{display:-webkit-box;height:auto!important;min-height:53px;margin:0 0 18px;color:#76899a;font-size:14px;font-weight:400;line-height:1.9;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
#product_list .left_box:after{content:"查看產品  →";display:inline-flex;width:max-content;margin-top:auto;color:#60778b;font-size:13px;font-weight:700;line-height:32px;letter-spacing:.04em;align-items:center;transition:color .35s ease,transform .35s ease;}
#product_list>li:hover .left_box:after{color:#2789cd;transform:translateX(4px);}

/* 售價 */
#product_list .right_box{position:absolute!important;top:24px;right:20px;display:block;width:auto!important;padding:0!important;text-align:right;}
#product_list .right_box p{margin:0;}
#product_list .right_box .price span,#product_list .right_box .price font{color:#2789cd!important;font-size:15px;font-weight:700;line-height:1.5;}
#product_list .right_box .old{margin-top:2px;}
#product_list .right_box .old span,#product_list .right_box .old font{color:#9aa8b4!important;font-size:12px;line-height:1.5;text-decoration:line-through;}

/* 移除舊箭頭避免重複 */
#product_list .info_box:after{display:none!important;}

/* 整張產品卡可點 */
#product_list .atag_item{position:absolute!important;z-index:10;top:0!important;right:0!important;bottom:0!important;left:0!important;display:block!important;width:100%!important;height:100%!important;}

/* hover */
#product_list>li:hover .left_box .h3{color:#2789cd!important;}

@media screen and (max-width:1399px){
#product_list{gap:24px;}
#product_list>li{flex:0 0 calc((100% - 48px)/3);width:calc((100% - 48px)/3)!important;max-width:calc((100% - 48px)/3)!important;}
}

@media screen and (max-width:991px){
#product_list{gap:22px;}
#product_list>li{flex:0 0 calc((100% - 22px)/2);width:calc((100% - 22px)/2)!important;max-width:calc((100% - 22px)/2)!important;}
#product_list .info_box{padding:22px 18px 20px!important;}
#product_list .left_box .h3{font-size:17px;}
#product_list .left_box article{font-size:13px;}
}

@media screen and (max-width:575px){
#product_list{display:block;}
#product_list>li{display:flex!important;width:100%!important;max-width:100%!important;margin:0 0 22px!important;}
#product_list>li>img{padding:8%;}
#product_list .info_box{padding:21px 18px 20px!important;}
#product_list .left_box .h3{min-height:0;font-size:18px;-webkit-line-clamp:2;}
#product_list .left_box article{min-height:0;margin-bottom:15px;font-size:14px;}
#product_list .right_box{display:none!important;}
}


/* productdetail */
#productdetail { margin: 50px 0; }

/* productinfo */
#productinfo .item { margin-bottom: 10px; padding: 30px 25px; box-shadow: 0 0 20px rgba(var(--black-rgb), .08); }
#productinfo .item ul { margin: 15px 0 35px; }
#productinfo .item ul li { padding: 5px; border-bottom: 1px rgba(var(--gray-rgb), .1) solid; }
#productinfo .item ul li label { margin-right: 10px; width: 90px; }
#productinfo .item ul li font { width: calc(100% - 100px); }
#productinfo .item .sell_box { margin-bottom: 10px; }
#productinfo .item .sell_box >* { line-height: 100%; font-size: 17px; vertical-align: baseline; }
#productinfo .item .sell_box span { margin: 0 3px 0 15px; }
#productinfo .item .sell_box b { font-size: 36px; }
#productinfo .item .ask { padding: 0 35px; }

/* orderfunction */
#orderfunction a[data-action="plusBtn"] { margin: 0 2px; width: 35px; height: 35px; background: rgba(var(--black-rgb), .1); border-radius: 5px; line-height: 30px; font-weight: 600; font-size: 28px; }
#orderfunction a.limit[data-action="plusBtn"] { line-height: 27px; font-size: 33px; }
#orderfunction input { margin: 0 5px; width: 30px; border-width: 0 0 1px; }
#orderfunction .addcar { float: right; }

/* productTabs */
#productTabs .tabs { margin-bottom: 15px; background: rgba(var(--black-rgb), .08); }
#productTabs .tabs li a { padding: 15px 30px; }
#productTabs .tabs li a:before { position: absolute; width: 0; height: 3px; background: var(--primary); display: block; bottom: 0; left: 0; content: ""; }
#productTabs .tabs li.active a:before { width: 100%; }


/* PRODUCT IMAGE SLICK */
.productimg{position:relative;margin-top:50px;}
.productimg #imglist{margin: 0 -12px 100px;}
.productimg #imglist .slick-slide{padding:0 12px;}
.productimg #imglist .slick-slide>div{height:100%;}
.productimg #imglist a{display:block;position:relative;width:100%;overflow:hidden;background:#f7f9fb;border:1px solid #e4ebf1;transition:border-color .35s ease;}
.productimg #imglist a:before{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#1685c5;z-index:2;transition:width .4s ease;}
.productimg #imglist a:hover{border-color:#1685c5;}
.productimg #imglist a:hover:before{width:100%;}
.productimg #imglist .bgBox{display:block;width:100%;aspect-ratio:4/3;background-size:contain;background-position:center;background-repeat:no-repeat;transition:transform .5s ease;}
.productimg #imglist a:hover .bgBox{transform:scale(1.035);}

/* ARROW */
.productimg .slick-arrow{position:absolute;top:50%;width:44px;height:44px;padding:0;border:1px solid #d7e2ea;border-radius:50%;background:#fff;font-size:0;cursor:pointer;z-index:5;transform:translateY(-50%);transition:.3s ease;}
.productimg .slick-prev{left:-65px;}
.productimg .slick-next{right:-65px;}
.productimg .slick-arrow:before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-top:1px solid #0a5181;border-right:1px solid #0a5181;}
.productimg .slick-prev:before{transform:translate(-35%,-50%) rotate(-135deg);}
.productimg .slick-next:before{transform:translate(-65%,-50%) rotate(45deg);}
.productimg .slick-arrow:hover{background:#0a5181;border-color:#0a5181;}
.productimg .slick-arrow:hover:before{border-color:#fff;}
.productimg .slick-disabled{opacity:.25;cursor:default;}

/* DOTS */
.productimg .slick-dots{display:flex!important;align-items:center;justify-content:center;gap:8px;margin:25px 0 0;padding:0;list-style:none;}
.productimg .slick-dots li{width:auto;height:auto;margin:0;}
.productimg .slick-dots button{display:block;width:6px;height:6px;padding:0;border:0;border-radius:10px;background:#bfd0dc;font-size:0;cursor:pointer;transition:.3s ease;}
.productimg .slick-dots .slick-active button{width:24px;background:#1685c5;}
.productimg .slick-dots button:before{display:none;}
@media screen and (max-width:1400px){
.productimg .slick-prev{left:-20px;}
.productimg .slick-next{right:-20px;}
}

@media screen and (max-width:991px){
.productimg{margin-top:40px;}
.productimg #imglist{margin:0 -8px;}
.productimg #imglist .slick-slide{padding:0 8px;}
.productimg .slick-arrow{width:38px;height:38px;}
.productimg .slick-prev{left:-8px;}
.productimg .slick-next{right:-8px;}
}

@media screen and (max-width:767px){
.productimg{margin-top:30px;}
.productimg #imglist{margin:0;}
.productimg #imglist .slick-slide{padding:0 5px;}
.productimg .slick-arrow{width:36px;height:36px;}
.productimg .slick-prev{left:8px;}
.productimg .slick-next{right:8px;}
.productimg .slick-dots{margin-top:18px;}
}


@media screen and (min-width: 1281px){
	#productdetail { gap: 2%; }
	#productdetail #productinfo { position: sticky; width: 370px; height: 100%; top: 110px; }
	#productdetail #productTabs { width: 1%; flex: 1 1 auto; }
	#productinfo #community { margin-top: 10px; }
	#productTabs .tabs li:hover a:before { width: 100%; }
}
@media screen and (max-width: 1280px){
	.list_page { width: 100%; }
	#productTabs { margin-top: 30px; }
}
@media screen and (max-width: 1280px) and (min-width: 761px){
	#productinfo .item .sell_box { text-align: left; }
	#orderfunction { width: calc(100% - 300px); }
	#productinfo .item .btns { width: 150px; }
}
@media screen and (max-width: 1024px) and (min-width: 769px){
	.list_page { width: 768px; }
}

@media screen and (max-width: 640px) and (min-width: 421px){
	.list_page { width: 400px; }
}
@media screen and (max-width: 450px){
	#productinfo .item .sell_box { text-align: left; }
	#orderfunction { width: 100%; margin-bottom: 15px; }
	#productinfo .item .btns { width: 50%; }
	#productinfo .item .btns a { padding: 10px 0; display: block; text-align: center; }
}