:root{ --main_color:#528384; --swal2-confirm-button-background-color:#333 !important }
:root{ --sidebar-p:2rem; --sidebar-prod-w:10vw }
@media(max-width:1240px){ :root{--sidebar-p:1.7vw }
}
@media(max-width:990px){ :root{--sidebar-p:1.4vw }
}
@media(max-width:768px){ :root{--sidebar-p:2.4vw; --sidebar-prod-w:20vw }
}
.proddetail{ padding:3rem 0 0 0; display:flex; justify-content:space-between }
@media(max-width:768px){ .proddetail{flex-direction:column; padding:0 0 0 0 }
}
.proddetail .l._pc{ width:65%; display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-self:flex-start }
@media(max-width:768px){ .proddetail .l._pc{width:100% }
}
@media(max-width:570px){ .proddetail .l._pc{display:none }
}
.proddetail .l._pc .pic{ position:relative; overflow:hidden }
.proddetail .l._pc .pic:hover img{ transform:scale(1.1) }
.proddetail .l._pc .pic a{ display:block; overflow:hidden; background:#eee }
.proddetail .l._pc .pic img{ transition-property:all; transition-duration:0.2s; transition-timing-function:"ease"; aspect-ratio:1/1; cursor:zoom-in; object-fit:contain; width:100% }
.proddetail .l._pc .video{ background:#000 }
.proddetail .l._pc .video video{ width:100%; height:100%; display:block; aspect-ratio:1/1; object-fit:contain }
.proddetail .l._m{ display:none }
@media(max-width:570px){ .proddetail .l._m{display:block }
}
.proddetail .l._m .swiper{ position:relative }
.proddetail .l._m .swiper-slide .pic a{ display:block }
.proddetail .l._m .swiper-slide .pic a img{ width:100%; aspect-ratio:1/1; object-fit:contain }
.proddetail .l._m .swiper-slide .pic a video{ background:#000; width:100%; aspect-ratio:1/1; object-fit:contain }
.proddetail .l._m .button-prev{ position:absolute; left:4%; top:50%; transform:translateY(-50%); z-index:10; width:9vw; height:9vw; display:flex; border-radius:.5rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000000'%3E%3Cpath d='M 13.28125 6.78125 L 4.78125 15.28125 L 4.09375 16 L 4.78125 16.71875 L 13.28125 25.21875 L 14.71875 23.78125 L 7.9375 17 L 28 17 L 28 15 L 7.9375 15 L 14.71875 8.21875 Z' fill='%23666666'/%3E%3C/svg%3E") no-repeat center; background-size:5vw auto; opacity:.7 }
.proddetail .l._m .button-next{ position:absolute; right:4%; top:50%; transform:translateY(-50%); z-index:10; width:9vw; height:9vw; display:flex; border-radius:.5rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000000'%3E%3Cpath d='M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z' fill='%23666666'/%3E%3C/svg%3E") no-repeat center; background-size:5vw auto; opacity:.7 }
.proddetail .r{ width:31% }
@media(max-width:768px){ .proddetail .r{width:100%; margin:4vw 0 0 0 }
}
.proddetail .r .d_detail{ margin:0 0 2rem 0; line-height:1.8 }
.proddetail .r .d_title{ margin:0 0 1.5rem 0 }
.proddetail .r .d_title h1{ padding:0; margin:0; font-size:2.1rem }
.proddetail .r .d_var{ margin:0 0 2rem 0; border-top:1px solid #eee }
.proddetail .r .d_var ul{ font-size:1.1rem }
.proddetail .r .d_var ul li{ margin:1.5rem 0 0 0; display:flex }
.proddetail .r .d_var ul li b{ flex:1; font-size:1.2rem }
.proddetail .r .d_var ul li span{ flex:1 }
.proddetail .r .d_filter{ margin:0 0 2rem 0 }
.proddetail .r .d_filter>div p{ font-weight:bold }
.proddetail .r .d_filter .colors .group{ display:flex; flex-wrap:wrap; gap:1rem .7rem }
.proddetail .r .d_filter .colors .group a{ aspect-ratio:1/1; width:3.3rem; border-radius:5px; border:1px solid #ccc; position:relative }
.proddetail .r .d_filter .colors .group a b{ word-break:break-all; opacity:0; visibility:hidden; white-space:nowrap; position:absolute; font-weight:normal; background:#fff; color:#666; left:50%; top:0; padding:4px 6px; box-sizing:border-box; box-shadow:0px 0px 3px #aaa; border-radius:5px; text-transform:capitalize; transform:translateY(-130%) translateX(-50%) }
.proddetail .r .d_filter .colors .group a span{ display:flex; height:100%; width:100%; border-radius:5px; transform:scale(0.9) }
.proddetail .r .d_filter .colors .group a:hover{ background:#eee; border-color:#555; color:#222 }
.proddetail .r .d_filter .colors .group a:hover b{ opacity:1; visibility:initial }
.proddetail .r .d_filter .colors .group a.selected{ border:1px solid #666; box-shadow:0px 0px 0 2px #666 }
.proddetail .r .d_filter .size .group,.proddetail .r .d_filter .finish .group{ display:flex; flex-wrap:wrap; gap:1rem }
.proddetail .r .d_filter .size .group a,.proddetail .r .d_filter .finish .group a{ padding:.8rem 1rem; border:1px solid #aaa; box-shadow:2px 2px 0 #eee; border-radius:4px; color:#444 }
.proddetail .r .d_filter .size .group a:hover,.proddetail .r .d_filter .finish .group a:hover{ background:#eee; border-color:#555; color:#222 }
.proddetail .r .d_filter .size .group a.selected,.proddetail .r .d_filter .finish .group a.selected{ border:1px solid #3f5779; box-shadow:0px 0px 0 2px #3f5779; color:#012c44 }
.proddetail .r .d_link{ margin:0 0 2rem 0; display:flex; gap:1.2rem; flex-wrap:wrap }
.proddetail .r .d_link .vr{ display:inline-flex; align-items:center; background:#f9f9f9; border:1px solid #c2c2c2; border-radius:5px; padding:.5rem 1rem; box-shadow:0 0 10px rgba(0,0,0,.062745098); gap:.5rem }
.proddetail .r .d_link .vr i{ width:2rem; aspect-ratio:1/1; background:url(../img/icon_5.png) no-repeat; background-size:contain; display:inline-flex }
.proddetail .r .d_link .vr span{ font-size:1.2rem; font-weight:bold; color:#333 }
.proddetail .r .d_link .price_show{ display:inline-flex; align-items:center; background:#f9f9f9; border:1px solid #c2c2c2; border-radius:5px; padding:.5rem 1rem; box-shadow:0 0 10px rgba(0,0,0,.062745098); gap:.5rem }
.proddetail .r .d_link .price_show i{ width:2rem; aspect-ratio:1/1; background:url(../img/icon_8.png) no-repeat; background-size:contain; display:inline-flex }
.proddetail .r .d_link .price_show span{ font-size:1.2rem; font-weight:bold; color:#333 }
.proddetail .r .d_link .pdf{ display:inline-flex; align-items:center; background:#f9f9f9; border:1px solid #c2c2c2; border-radius:5px; padding:.5rem 1rem; box-shadow:0 0 10px rgba(0,0,0,.1); gap:.5rem; position:relative }
.proddetail .r .d_link .pdf:hover .list{ top:100%; opacity:1; visibility:inherit }
.proddetail .r .d_link .pdf .list{ transition-property:all; transition-duration:0.2s; transition-timing-function:"ease"; opacity:0; visibility:hidden; position:absolute; left:0; top:109%; width:100%; background:#fafafa; border:1px solid #c2c2c2; border-radius:5px; padding:.5rem 1rem; box-sizing:border-box }
.proddetail .r .d_link .pdf .list a{ line-height:1.8rem; display:block; color:#444; border-radius:5px; font-size:1.2rem }
.proddetail .r .d_link .pdf .list a:hover{ background:#eee }
.proddetail .r .d_link .pdf i{ width:2rem; aspect-ratio:1/1; background:url(../img/icon_7.png) no-repeat; background-size:contain; display:inline-flex }
.proddetail .r .d_link .pdf span{ font-size:1.2rem; font-weight:bold; color:#333 }
.proddetail .r .d_link .pricedown{ display:inline-flex; align-items:center; background:#f9f9f9; border:1px solid #c2c2c2; border-radius:5px; padding:.5rem 1rem; box-shadow:0 0 10px rgba(0,0,0,.062745098); gap:.5rem }
.proddetail .r .d_link .pricedown i{ width:2rem; aspect-ratio:1/1; background:url(../img/icon_6.png) no-repeat; background-size:contain; display:inline-flex }
.proddetail .r .d_link .pricedown span{ font-size:1.2rem; font-weight:bold; color:#333 }
.proddetail .r .d_type{ margin:0 0 2rem 0; padding:2rem; border:2px dashed #ccc; border-radius:10px }
@media(max-width:768px){ .proddetail .r .d_type{padding:4vw }
}
.proddetail .r .d_type.sign_off{ background:url(../img/icon_3.png) no-repeat 96% center; background-size:auto 77% }
.proddetail .r .d_type .gosign a{ font-size:1.1rem; font-weight:bold; color:#555; line-height:1.2; display:inline-block; text-decoration:underline; padding:0 1.7rem 0 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M 3 3 L 3 21 L 21 21 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 3 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z' fill='%23444444'/%3E%3C/svg%3E") no-repeat right; background-size:contain }
.proddetail .r .d_type .gosign a:hover{ color:#012c44 }
.proddetail .r .d_type .specification{ display:flex; flex-wrap:wrap; gap:1rem }
.proddetail .r .d_type .specification a{ padding:.6vw 1rem; display:inline-flex; border-radius:5px; border:1px solid #ddd; color:#444 }
@media(max-width:768px){ .proddetail .r .d_type .specification a{padding:1.5vw 2.4vw }
}
.proddetail .r .d_type .specification a:hover,.proddetail .r .d_type .specification a.selected{ background:#3f5779; color:#fff; border-color:#3f5779 }
.proddetail .r .d_type .stock{ margin:1.5rem 0 0 0; display:flex; align-items:center; gap:.4rem }
.proddetail .r .d_type .stock .instock{ font-size:1.2rem }
.proddetail .r .d_type .stock span{ color:#888 }
.proddetail .r .d_type .stock .table{ width:100%; box-shadow:4px 4px 10px rgba(0,0,0,.062745098) }
.proddetail .r .d_type .stock .table ul{ display:flex }
.proddetail .r .d_type .stock .table ul li{ flex:1; outline:1px solid #ddd; background:#fff; padding:.6rem }
@media(max-width:768px){ .proddetail .r .d_type .stock .table ul li{word-break:break-word }
}
.proddetail .r .d_type .stock .table ul li:nth-of-type(1){ flex:1.7 }
.proddetail .r .d_type .stock .table ul:nth-of-type(1) li{ background:#f7f7f7 }
.proddetail .r .d_type .price{ margin:1.5rem 0 0 0 }
.proddetail .r .d_type .price.hide{ display:none }
.proddetail .r .d_type .price b{ font-size:1.5rem; color:#3f5779 }
@media(max-width:768px){ .proddetail .r .d_type .price b{font-size:1.3rem }
}
.proddetail .r .d_type .price span{ font-size:2.2rem; color:#3f5779; font-weight:bold }
@media(max-width:768px){ .proddetail .r .d_type .price span{font-size:1.8rem }
}
.proddetail .r .d_shopcar{ margin:1rem 0 0 0 }
.proddetail .r .d_shopcar .addcar{ display:inline-flex; align-items:center; background:#f4f4f4; border:1px solid #c2c2c2; border-radius:5px; padding:.5vw 1rem; box-shadow:0 0 10px rgba(0,0,0,.062745098); gap:.5rem }
@media(max-width:768px){ .proddetail .r .d_shopcar .addcar{padding:.8rem 1rem }
}
.proddetail .r .d_shopcar .addcar i{ width:1.8rem; aspect-ratio:1/1; background:url(../img/icon_4.svg) no-repeat; opacity:.8; background-size:contain; display:inline-flex }
.proddetail .r .d_shopcar .addcar span{ font-size:1.2rem; font-weight:bold; color:#333 }
.proddetail .r .d_back{ margin:1rem 0 0 0 }
.proddetail .r .d_back .return{ display:inline-flex; align-items:center; background:#f4f4f4; border:1px solid #c2c2c2; border-radius:5px; padding:.5vw 1rem; box-shadow:0 0 10px rgba(0,0,0,.062745098); gap:.5rem }
@media(max-width:768px){ .proddetail .r .d_back .return{padding:.8rem 1rem }
}
.proddetail .r .d_back .return i{ width:1.8rem; aspect-ratio:1/1; background:url(../img/icon_2.png) no-repeat; opacity:.8; background-size:contain; display:inline-flex }
.proddetail .r .d_back .return span{ font-size:1.2rem; font-weight:bold; color:#333 }
.related{ margin:4rem auto 4rem auto }
.related .hhh{ font-size:1.8rem; color:#444; border-bottom:1px solid #ddd; padding:0 0 1rem 0 }
.related .list{ display:grid; width:100%; grid-template-columns:1fr 1fr 1fr 1fr; grid-column-gap:2rem; margin:2rem 0 0 0 }
@media(max-width:768px){ .related .list{grid-template-columns:1fr 1fr; grid-column-gap:1rem; grid-row-gap:1.6rem; margin:2rem 0 2.5rem 0 }
}
.related .list .li{ min-width:0 }
.related .list .li:hover .fm::after{ opacity:1 }
.related .list .li:hover .fm::before{ opacity:1 }
.related .list .li .fm{ position:relative; overflow:hidden; background:#eee }
.related .list .li .fm img{ width:100%; aspect-ratio:1/1; object-fit:cover }
.related .list .li .info{ padding:.6rem 0 .4rem 0; border-bottom:2px solid rgba(0,0,0,0) }
.related .list .li .info .title{ font-size:1.25rem; text-decoration:none; color:#012c44; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
@media(max-width:768px){ .related .list .li .info .title{font-size:1.1rem }
}
.related .list .li .info .size{ font-size:1rem; color:#999; margin:.3rem 0 0 0 }