.wo-pro-wrap{width:min(1280px,95vw);margin:50px auto 80px;min-height:400px}
.wo-pro-title{width:90%;text-align:center;line-height:1.2;font-size:clamp(1.75rem,4vw,3em);font-weight:300;margin:0 auto 10px;color:#1a1a1a;letter-spacing:.02em}
.wo-pro-line{width:100px;margin:0 auto;border-top:3px solid #007c3a;padding-bottom:40px}
.wo-pro-list#listdiv{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:28px 22px}
.wo-pro-cat-card{flex:0 0 calc(33.333% - 16px);max-width:calc(33.333% - 16px);box-sizing:border-box}
.wo-pro-cat-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(0,60,120,.06);box-shadow:0 10px 36px rgba(37,63,120,.1);transition:transform .35s ease,box-shadow .35s ease}
.wo-pro-cat-card:hover .wo-pro-cat-link{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,124,58,.14)}
.wo-pro-cat-media{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(165deg,#f9fbfc 0%,#eef3f8 55%,#e8edf4 100%);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,28px);box-sizing:border-box}
.wo-pro-cat-media::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -1px 0 rgba(0,0,0,.04)}
.wo-pro-cat-media img{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;transition:transform .6s cubic-bezier(.25,.46,.45,.94);filter:drop-shadow(0 8px 16px rgba(0,0,0,.08))}
.wo-pro-cat-card:hover .wo-pro-cat-media img{transform:scale(1.06)}
.wo-pro-cat-name{padding:20px 18px 22px;text-align:center;font-size:1.125rem;font-weight:600;color:#1c1c1c;letter-spacing:.04em;line-height:1.4;border-top:1px solid rgba(0,0,0,.05);background:#fff;position:relative}
.wo-pro-cat-name::before{content:'';display:block;width:28px;height:3px;margin:0 auto 12px;background:#007c3a;border-radius:2px;opacity:.85}
.wo-pro-item{flex:0 0 calc(25% - 18px);max-width:calc(25% - 18px);box-sizing:border-box}
.wo-pro-item-link{display:block;height:100%;text-decoration:none;color:inherit;transition:transform .35s ease}
.wo-pro-item-link:hover{transform:translateY(-4px)}
.wo-pro-item .wo-pro-pic-box{width:100%;aspect-ratio:1/1;margin:0;background:linear-gradient(165deg,#fff 0%,#f4f7fb 100%);border-radius:18px 18px 0 0;border:1px solid rgba(0,60,120,.06);border-bottom:none;box-shadow:none;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14%;box-sizing:border-box;position:relative}
.wo-pro-item .wo-pro-pic-box img{position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;transform:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.06));transition:transform .55s ease}
.wo-pro-item-link:hover .wo-pro-pic-box img{transform:scale(1.06)}
.wo-pro-item .wo-pro-card-body{background:#fff;border-radius:0 0 18px 18px;border:1px solid rgba(0,60,120,.06);border-top:1px solid rgba(0,0,0,.05);box-shadow:0 12px 36px rgba(37,63,120,.1);padding:16px 14px 20px;min-height:100px;box-sizing:border-box}
.wo-pro-item .wo-pro-meta{width:100%;text-align:left;margin:0}
.wo-pro-item .wo-pro-code{font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:300;color:#5a5a5a;line-height:1.2;margin-bottom:10px;letter-spacing:.03em}
.wo-pro-item .wo-pro-desc{font-size:.9rem;font-weight:600;color:#1c1c1c;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.banner.bgFix.wo-pro-banner video{width:100%;height:100%;object-fit:cover}
@media(max-width:991px){.wo-pro-cat-card,.wo-pro-item{flex:0 0 calc(50% - 14px);max-width:calc(50% - 14px)}}
@media(max-width:767px){.wo-pro-cat-card,.wo-pro-item{flex:0 0 100%;max-width:100%}.wo-pro-list#listdiv{gap:20px}}