.mod-panel{ width: 960px; margin:0 auto 50px; overflow: hidden; _width:870px; } .mod-panel a{ text-decoration: none; } .mod-panel .hd{ padding-top: 25px; margin-bottom: 25px; line-height: 30px; text-align: center; } .mod-panel .hd h1{ font-weight: normal; font-size: 24px; color:#212121; } .mod-panel .box{ margin-bottom: 10px; } .mod-panel .c-hd{ background: #f8f8f8; padding: 10px; margin-bottom: 10px; line-height: 16px; font-weight: bold; border-radius: 5px; } .mod-panel .c-hd span{ display: inline-block; border-left: 3px solid #2095f2; padding-left: 10px; } .mod-panel .c-bd ul{ overflow: hidden; } .mod-panel .c-bd li{ float: left; width: 20%; } .mod-panel .bd .item{ display: block; border: 1px solid #f0f0f0; padding: 10px; background: #fcfcfc; border-radius: 4px; margin: 0 4px 8px; font-size: 14px; overflow: hidden; } .mod-panel .bd .item:hover{ background: #fff7e6; border: 1px solid #f0d5b0; cursor: pointer; } .mod-panel .bd .item img{ float: left; height: 36px; margin: 2px 0; } .mod-panel .bd .item .name{ display: block; margin-left: 45px; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mod-panel .bd .item .phone{ display: block; margin-left: 45px; font-size: 13px; color: #999; } @media screen and (max-width: 1023px){ .mod-panel{ width: auto; } .mod-panel .c-bd li{ width: 25%; } } @media screen and (max-width: 800px){ .mod-panel .c-bd li{ width: 50%; } }