.cpzx .hd { background: #f5f5f5; } .cpzx .bd { margin-top: 61px; } .cpzx .bd ul li { float: left; margin-right: 38px; } .cpzx .bd ul li:nth-child(3n) { margin-right: 0; } .cpzx .bd ul li a { display: block; border: 1px solid #eaeaea; } .cpzx .bd ul li a:hover h3 { background: #ffb015; color: #fff; } .cpzx .bd ul li a .img { position: relative; } .cpzx .bd ul li a .img img { width: 348px; height: 220px; } .cpzx .bd ul li a .img span { background: url(../images/pro_bg.jpg) no-repeat center center; display: block; position: absolute; top: 0; left: 0; } .cpzx .bd ul li a h3 { font-size: 16px; color: #333333; line-height: 41px; background: #dcdcdc; text-align: center; font-weight: 400; } .cpzx .bd ul a.more { font-size: 16px; color: #333333; background: #f5f5f5; text-align: center; line-height: 56px; display: block; margin-top: 36px; } .main2 { padding-top: 32px; background: #f5f5f5; } .cp-sort{width:80%;margin:0 auto;} .cp-sort ul li{background:#eeeeee;width:18%;text-align: center;margin:1.56vw 0px;} .cp-sort ul li a{font-size:20px;color:#000000;line-height: 50px;} .cp-sort ul li.cur{background:#fea501;} .cp-sort ul li.cur a{color:#fff;} .sy-cpimg ul li{width:32.5%;margin-bottom:1.56vw;border:1px solid #eeeeee;} .sy-cpimg ul li:hover{border:1px solid #fea501;} .sy-cpimg ul li:hover a h3{background:#fea501; color:#fff} .sy-cpimg ul li:hover a img{transform: scale(1.1);} .sy-cpimg ul li a img{width:100%;transition: all 0.8s} .sy-cpimg ul li a .img{overflow: hidden;} .sy-cpimg{display:none;} .sy-cpimg ul li a h3{line-height: 60px;text-align: center;font-size: 18px;color:#000000;font-weight:400;} .flex{display:flex;justify-content: space-between; flex-wrap: wrap;} @media (max-width: 1024px) { .cp-sort{width:90%;} .cp-sort ul li a{font-size: 18px;} .sy-cpimg ul li a h3{font-size: 16px;line-height: 45px;} } @media (max-width: 768px) { .cp-sort ul li{width:49%;} .cp-sort ul li{font-size: 15px;} .sy-cpimg ul li a h3{font-size: 13px;line-height: 35px;} .sy-cpimg ul li{width:49%;} }