:root{ --main_color:#528384; --swal2-confirm-button-background-color:#333 !important }
:root{ --swiper-theme-color:#444 }
body,html{ overflow-x:hidden }
.acard{ display:flex; gap:1rem; flex-direction:column }
.acard .li_c0 .pic{ position:relative }
.acard .li_c0 .pic img{ width:100%; height:auto }
.acard .li_c0 .info{ position:absolute; top:20%; left:0; display:flex; flex-direction:column; gap:1rem; width:100%; justify-content:center; align-items:center }
.acard .li_c0 .info .ttt{ font-size:2.4rem; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,.1254901961) }
.acard .li_c0 .info .button{ display:flex; gap:1rem }
.acard .li_c0 .info .button a{ color:#fff; background:#667994; border:1px solid #667994; border-radius:10rem; padding:calc(.3rem + .3vw) calc(1rem + 1vw) }
.acard .li_c0 .info .button span{ border-radius:10rem; color:#fff; padding:calc(.3rem + .3vw) calc(1rem + 1vw); border:1px solid #667994 }
.acard .li_c1{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media(max-width:768px){ .acard .li_c1{grid-template-columns:1fr }
}
.acard .li_c1 .pic{ position:relative }
.acard .li_c1 .pic img{ width:100%; height:auto; aspect-ratio:10/6; object-fit:cover }
.acard .li_c1 .info{ position:absolute; top:20%; left:0; display:flex; flex-direction:column; gap:1rem; width:100%; justify-content:center; align-items:center }
.acard .li_c1 .info .ttt{ font-size:2.1rem; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,.1254901961) }
@media(max-width:768px){ .acard .li_c1 .info .ttt{font-size:1.6rem }
}
.acard .li_c1 .info .button{ display:flex; gap:1rem }
.acard .li_c1 .info .button .a1{ color:#fff; background:#667994; border:2px solid #667994; border-radius:10rem; padding:calc(.3rem + .3vw) calc(1rem + 1vw) }
@media(max-width:768px){ .acard .li_c1 .info .button .a1{padding:calc(.5rem + .5vw) calc(1.3rem + 1.3vw) }
}
.acard .li_c1 .info .button .a2{ border-radius:10rem; color:#667994; background:#fff; padding:calc(.3rem + .3vw) calc(1rem + 1vw); border:2px solid #667994 }
@media(max-width:768px){ .acard .li_c1 .info .button .a2{padding:calc(.5rem + .5vw) calc(1.3rem + 1.3vw) }
}
.prodbanner{ width:100% }
.prodbanner .swiper{ margin:0rem 0 2rem 0; width:100% }
.prodbanner .swiper .swiper-slide{ position:relative; background:url("data:image/svg+xml,%3Csvg fill='%239E9E9EFF' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25'/%3E%3Cpath d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='0.75s' values='0 12 12; 360 12 12' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat center; background-size:calc(2rem + 2vw) auto }
.prodbanner .swiper .swiper-slide .vdo{ width:100%; height:auto; object-fit:cover; aspect-ratio:69/38 }
@media(max-width:570px){ .prodbanner .swiper .swiper-slide .vdo{aspect-ratio:initial; height:74vh }
}
.prodbanner .swiper .conl{ position:absolute; right:5%; bottom:5%; display:flex; gap:.5rem; z-index:10; background:hsla(0,0%,100%,.7333333333); border-radius:2rem; padding:.7rem 1rem; align-items:center }
.prodbanner .swiper .conl .spage{ width:4rem; text-align:center; font-size:1.1rem }
@media(max-width:768px){ .prodbanner .swiper .conl .spage{width:12vw; font-size:.9rem }
}
.prodbanner .swiper .conl .next,.prodbanner .swiper .conl .prev::after{ cursor:pointer; display:inline-flex; padding:0 7px; font-family:swiper-icons; font-size:1.1rem }
@media(max-width:768px){ .prodbanner .swiper .conl .next,.prodbanner .swiper .conl .prev::after{padding:0 2px; font-size:.9rem }
}
.prodbanner .swiper .conl .next::after{ content:"next" }
.prodbanner .swiper .conl .prev::after{ content:"prev" }
.prodtype{ margin:calc(2vw + 3rem) auto 3rem auto; background:#f7f7f7; padding:1.4vw 2vw; box-sizing:border-box; border-radius:6px; position:relative; z-index:20 }
@media(max-width:768px){ .prodtype{padding:3.5vw; margin:4vw auto 4.6vw auto; border:1px solid #ddd }
}
.prodtype .ficon{ display:none }
@media(max-width:768px){ .prodtype .ficon{display:flex; justify-content:space-between; align-items:center }
.prodtype .ficon i{ display:inline-flex; width:1.3rem; height:1.3rem; 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 10 2 C 8.6983906 2 7.5978609 2.8387486 7.1835938 4 L 2 4 L 2 6 L 7.1835938 6 C 7.5978609 7.1612514 8.6983906 8 10 8 C 11.654 8 13 6.654 13 5 C 13 3.346 11.654 2 10 2 z M 15 4 L 15 6 L 22 6 L 22 4 L 15 4 z M 15 9 C 13.698391 9 12.597861 9.8387486 12.183594 11 L 2 11 L 2 13 L 12.183594 13 C 12.597861 14.161251 13.698391 15 15 15 C 16.654 15 18 13.654 18 12 C 18 10.346 16.654 9 15 9 z M 20 11 L 20 13 L 22 13 L 22 11 L 20 11 z M 7 16 C 5.6983906 16 4.5978609 16.838749 4.1835938 18 L 2 18 L 2 20 L 4.1835938 20 C 4.5978609 21.161251 5.6983906 22 7 22 C 8.654 22 10 20.654 10 19 C 10 17.346 8.654 16 7 16 z M 12 18 L 12 20 L 22 20 L 22 18 L 12 18 z' fill='%23000000'/%3E%3C/svg%3E") center no-repeat }
.prodtype .ficon span{ font-size:14px; font-weight:bold; color:#444 }
}
.prodtype .hhh{ font-size:1.8rem; font-weight:bold; color:#444 }
@media(max-width:570px){ .prodtype .hhh{font-size:1.3rem; margin:0 0 1rem 0; padding:.3rem 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23000000'%3E%3Cpath d='M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 10.71875 12.78125 L 9.28125 14.21875 L 15.28125 20.21875 L 16 20.90625 L 16.71875 20.21875 L 22.71875 14.21875 L 21.28125 12.78125 L 16 18.0625 Z' fill='%23555555'/%3E%3C/svg%3E") no-repeat right; background-size:auto 90% }
.prodtype .hhh:nth-last-of-type(1){ margin:0 }
}
.prodtype .filter_group{ display:flex; gap:1rem 2rem; flex-wrap:wrap }
@media(max-width:768px){ .prodtype .filter_group{display:none; gap:1rem; grid-template-columns:1fr 1fr }
}
.prodtype .filter_group .f_select{ position:relative; z-index:10; cursor:pointer }
@media(max-width:768px){ .prodtype .filter_group .f_select{width:100% }
}
.prodtype .filter_group .f_select:hover{ z-index:11 }
@media(any-hover:hover){ .prodtype .filter_group .f_select:hover ul{opacity:1; visibility:initial }
}
.prodtype .filter_group .f_select:focus ul{ opacity:1; visibility:initial }
.prodtype .filter_group .f_select>span{ border:1px solid #eee; display:inline-flex; padding:.4vw .7vw; font-size:1.1rem; border-radius:5px; background:#fff; display:inline-flex; align-items:center; min-width:11vw; justify-content:space-between }
@media(max-width:768px){ .prodtype .filter_group .f_select>span{padding:2vw; box-sizing:border-box; min-width:100%; justify-content:flex-end; width:100%; font-size:.95rem; flex-direction:row-reverse }
}
.prodtype .filter_group .f_select>span b{ content:""; display:inline-flex; margin:0 0 0 1rem; 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 5.40625 8.9921875 L 3.9921875 10.40625 L 11.996094 18.410156 L 20.001953 10.511719 L 18.597656 9.0878906 L 12.003906 15.589844 L 5.40625 8.9921875 z' fill='%23000000'/%3E%3C/svg%3E") center no-repeat; background-size:contain; width:1rem; height:1rem }
@media(max-width:768px){ .prodtype .filter_group .f_select>span b{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 10 2 C 8.6983906 2 7.5978609 2.8387486 7.1835938 4 L 2 4 L 2 6 L 7.1835938 6 C 7.5978609 7.1612514 8.6983906 8 10 8 C 11.654 8 13 6.654 13 5 C 13 3.346 11.654 2 10 2 z M 15 4 L 15 6 L 22 6 L 22 4 L 15 4 z M 15 9 C 13.698391 9 12.597861 9.8387486 12.183594 11 L 2 11 L 2 13 L 12.183594 13 C 12.597861 14.161251 13.698391 15 15 15 C 16.654 15 18 13.654 18 12 C 18 10.346 16.654 9 15 9 z M 20 11 L 20 13 L 22 13 L 22 11 L 20 11 z M 7 16 C 5.6983906 16 4.5978609 16.838749 4.1835938 18 L 2 18 L 2 20 L 4.1835938 20 C 4.5978609 21.161251 5.6983906 22 7 22 C 8.654 22 10 20.654 10 19 C 10 17.346 8.654 16 7 16 z M 12 18 L 12 20 L 22 20 L 22 18 L 12 18 z' fill='%23000000'/%3E%3C/svg%3E") center no-repeat; margin:0 .7rem 0 0 }
}
.prodtype .filter_group .f_select ul{ position:absolute; top:100%; width:100%; box-sizing:border-box; padding:.3vw 0; background:#fafafa; box-shadow:0 10px 3px rgba(0,0,0,.062745098); border-radius:5px; overflow:hidden; opacity:0; visibility:hidden }
.prodtype .filter_group .f_select ul li a{ display:block; color:#444; padding:.5rem .6vw }
@media(max-width:768px){ .prodtype .filter_group .f_select ul li a{padding:.5rem 2vw }
}
.prodtype .filter_group .f_select ul li a:hover{ background:#3f5779; color:#fff }
.hhh_title{ text-align:center }
.hhh_title h2{ padding:4rem 0; color:#6b6b6b; font-weight:bold; font-size:2.5rem }
@media(max-width:768px){ .hhh_title h2{padding:8vw 0 4vw 0; font-size:5.7vw }
}
.prodrecomm .ms{ text-align:center; line-height:1.8; font-size:1.2rem; color:#6b6b6b; padding:3rem 0 }
@media(max-width:768px){ .prodrecomm .ms{font-size:1rem; padding:5vw 0 }
}
.prodrecomm .ms p{ margin:1px 0 }
.prodrecomm .list .swiper-slide a{ display:flex; flex-direction:column; gap:1.7rem; border-radius:.5rem; overflow:hidden; position:relative }
.prodrecomm .list .swiper-slide a:hover .more span{ background:#444 }
.prodrecomm .list .swiper-slide .pic{ width:100%; height:auto }
.prodrecomm .list .swiper-slide .pic img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.prodrecomm .list .swiper-slide .info{ position:absolute; inset:0; width:100%; box-sizing:border-box; padding:1.5rem; display:flex; flex-direction:column; justify-content:flex-end }
.prodrecomm .list .swiper-slide .title{ font-size:1.4rem; color:#333 }
@media(max-width:768px){ .prodrecomm .list .swiper-slide .title{font-size:1.1rem }
}
.prodrecomm .list .swiper-slide .more{ margin:1rem 0 0 0 }
.prodrecomm .list .swiper-slide .more span{ display:inline-flex; border-radius:.3rem; padding:.5rem 1rem; background:#3f5779; color:#fff }
.prodlist{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-column-gap:4rem; grid-row-gap:3rem; margin:0 auto 3rem auto }
@media(max-width:1240px){ .prodlist{grid-template-columns:1fr 1fr 1fr; grid-column-gap:3vw; grid-row-gap:3vw; margin:0 auto 2.5rem auto }
}
@media(max-width:768px){ .prodlist{grid-template-columns:1fr 1fr; grid-column-gap:1rem; grid-row-gap:1.6rem; margin:0 auto 2.5rem auto }
}
.prodlist>.li{ min-width:0; position:relative }
.prodlist>.li:hover{ background:#fff; outline:10px solid #fff; box-shadow:0 0 40px rgba(0,0,0,.1882352941) }
.prodlist>.li .hasvr{ width:2.4vw; box-shadow:0 0 10px rgba(0,0,0,.1882352941); aspect-ratio:1/1; border-radius:100px; background:#fff url(../img/icon_5.png) no-repeat center; background-size:auto 56%; z-index:10; position:absolute; right:5%; top:5% }
@media(max-width:1240px){ .prodlist>.li .hasvr{width:3.5vw }
}
@media(max-width:768px){ .prodlist>.li .hasvr{width:8vw }
}
.prodlist>.li .fm{ position:relative; overflow:hidden; background:#eee; transition-property:all; transition-duration:1s; transition-timing-function:"ease" }
.prodlist>.li .fm img{ width:100%; aspect-ratio:1/1; object-fit:contain }
.prodlist>.li .stock{ margin:.4rem 0 0 0 }
.prodlist>.li .stock .status{ display:flex; align-items:center }
.prodlist>.li .stock .status b{ width:9px; height:9px; background:#ccc; border-radius:10px }
.prodlist>.li .stock .status span{ font-weight:bold; margin:0 0 0 .4rem }
.prodlist>.li .stock .status.s0 b{ background:#399918 }
.prodlist>.li .stock .status.s0 span{ color:#399918 }
.prodlist>.li .stock .status.s1 b{ background:#ff9100 }
.prodlist>.li .stock .status.s1 span{ color:#ff9100 }
.prodlist>.li .stock .status.s2 b{ background:#a02334 }
.prodlist>.li .stock .status.s2 span{ color:#a02334 }
.prodlist>.li .info{ padding:.6rem 0 .4rem 0; border-bottom:2px solid rgba(0,0,0,0) }
.prodlist>.li .info .title{ font-size:1.4rem; text-decoration:none; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.prodlist>.li .info .title a{ color:#0e1a3b; word-break:break-word }
@media(max-width:990px){ .prodlist>.li .info .title{font-size:1.1rem }
}
.prodlist>.li .info .size{ font-size:1.1rem; color:#999; margin:.3rem 0 0 0 }
.prodlist>.li .colors{ display:flex; gap:.6rem; margin:.8rem 0 0 0; flex-wrap:wrap }
.prodlist>.li .colors .li a{ display:flex; border-radius:5px; border:1px solid #ddd }
.prodlist>.li .colors .li a:hover{ border-color:#555 }
.prodlist>.li .colors .li a img{ margin:2px; border-radius:5px; box-sizing:border-box; width:1.5rem; height:1.5rem; object-fit:cover }
.prodpage{ margin:0 0 3rem 0 }
.prodpage .link{ display:flex; justify-content:center; margin:0 0 1rem 0; gap:.7rem }
.prodpage .link a{ height:2.4rem; line-height:2.5rem; aspect-ratio:1/1; text-align:center; border:1px solid #ddd; border-radius:5px; font-size:1.1rem; color:#444 }
.prodpage .link a:hover{ background:#3f5779; border:1px solid #3f5779; color:#fff }
.prodpage .link a.selected{ background:#3f5779; border:1px solid #3f5779; color:#fff }
.prodpage .total{ text-align:center; color:#999 }