.procat { margin-top: 3rem; margin-bottom: 6rem; }
.procat-content { margin-top: 3rem; }
.procat-list { padding: 1rem 2rem; }
.procat-list .row { margin: -2rem; }
.procat-list .row .item { position: relative; padding: 1rem; }
.procat-list .row .item .bd { overflow: hidden; }
.procat-list .row .item img { display: block; width: 100%; height: auto; transition: transform .5s; }
.procat-list .row .item .fg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: center; text-align: center; color: #fff; }
.procat-list .row .item .fg h2 { font-size: 2rem; padding-bottom: .1rem; padding-left: .5rem; }
.procat-list .row .item .fg h2::after { content: ""; display: inline-block; margin-left: .5rem; width: 2.75rem; height: 2.75rem; vertical-align: top; background-size: contain; background-image: url("data:image/svg+xml;base64, PHN2ZyB0PSIxNjE3NTY1ODUyNzc1IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcC1pZD0iMTEzOTAiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCI+PHBhdGggZD0iTTgwMy45IDQ4MS41TDUyMi4xIDE5OS4zYTQwLjE4IDQwLjE4IDAgMCAwLTI4LjUtMTEuOGMtMTAuNyAwLTIwLjkgNC4yLTI4LjUgMTEuOC03LjUgNy42LTExLjggMTcuOC0xMS44IDI4LjVzNC4yIDIwLjkgMTEuOCAyOC41TDcxOC41IDUxMCA0NjUuMSA3NjMuNmMtNy4zIDcuNi0xMS40IDE3LjgtMTEuMyAyOC40IDAuMSAxMC42IDQuMyAyMC43IDExLjggMjguMiA3LjUgNy41IDE3LjYgMTEuNyAyOC4xIDExLjggMTAuNiAwLjEgMjAuNy00IDI4LjMtMTEuM2wyODEuOS0yODIuMmM3LjUtNy42IDExLjgtMTcuOCAxMS44LTI4LjVzLTQuMi0yMS0xMS44LTI4LjV6IiBwLWlkPSIxMTM5MSIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjxwYXRoIGQ9Ik01NzAuNyA1MTQuNWMwLTEwLjctNC4yLTIwLjktMTEuOC0yOC41TDI3NyAyMDMuOWE0MC4xOCA0MC4xOCAwIDAgMC0yOC41LTExLjhjLTEwLjcgMC0yMC45IDQuMi0yOC41IDExLjgtNy41IDcuNi0xMS44IDE3LjgtMTEuOCAyOC41czQuMiAyMC45IDExLjggMjguNWwyNTMuNCAyNTMuNy0yNTMuMyAyNTMuNmMtNy4zIDcuNi0xMS40IDE3LjgtMTEuMyAyOC40IDAuMSAxMC42IDQuMyAyMC43IDExLjggMjguMiA3LjUgNy41IDE3LjYgMTEuNyAyOC4xIDExLjggMTAuNiAwLjEgMjAuNy00IDI4LjMtMTEuM0w1NTguOSA1NDNjNy41LTcuNSAxMS44LTE3LjggMTEuOC0yOC41eiIgcC1pZD0iMTEzOTIiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4="); }
.procat-list .row .item .fg p { font-size: 1.25rem; margin: 0; padding: 0 1.5rem; line-height: 2; }
.procat-list .row .item:hover img { transform: scale(1.1); }
@media (max-width: 768px) {
    .procat-list .row .item .bd { border-radius: .5rem;  }
    .procat-list .row .item .fg h2 { font-size: 1.75rem; }
    .procat-list .row .item .fg h2::after { margin-left: .25rem; width: 2.1rem; height: 2.1rem; }
    .procat-list .row .item .fg p { font-size: 1.125rem; }
}

.prod { margin-top: 3rem; padding-bottom: 6rem; min-height: 40rem; }
.prod-content { margin-top: 3rem; }
.prod-list { }
.prod-item { display: flex; padding: 1.25rem; background-color: #eee; }
.prod-item + .prod-item { margin-top: 1.25rem; }
.prod-item .left { flex: none; width: 12.5rem; height: 12.5rem; margin-right: 1.25rem; }
.prod-item .left img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod-item .right { position: relative; flex: auto; overflow: hidden; padding: 0 2.5%; background-color: #fff; }
.prod-item .title { padding: 1.5rem 0; margin-bottom: .8rem; font-size: 1.125rem; border-bottom: solid 1px #eee; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prod-item .title a { cursor: pointer; }
.prod-item .attrs { font-size: .875rem; color: #666; line-height: 2.4; }
.prod-item .attrs p { margin-bottom: 0; }
.prod-item .attrs p span { }
.prod-item .attrs p span + span { margin-left: 1.5rem; }
.prod-item .oper { position: absolute; right: 3%; bottom: 1.5rem; }
.prod-item .oper .btn { height: 2.5rem; line-height: 2.25rem; padding: 0; background-color: #d0111b; border: none; width: 9rem; box-shadow: none !important; }
.prod-item .oper .btn:hover { background-color: #db2932; }
@media (max-width: 992px) {
    .prod-item { padding: 1rem; }
    .prod-item .left { width: 7rem; height: 7rem; margin-right: 1rem; }
    .prod-item .right { padding: 0 1rem; }
    .prod-item .title { padding: .9rem 0; margin: 0; border-bottom: none; white-space: pre-line; height: 7rem; overflow: hidden; line-height: 1.5; }
    .prod-item .title a { text-decoration: none; }
    .prod-item .attrs { display: none; }
    .prod-item .oper { display: none; }
}