* { margin: 0; padding: 0; } body { font-size: 12px; font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; line-height: inherit; background: #ccc; } .survey { padding-top: 20px; width: 60%; box-shadow: 5px 5px 5px #999; width: 700px; margin: auto; background: #fff; padding: 0 20px 0 20px; } img { max-width: 100% } .center_img img { width: 100% } .footer_img { width: 15% !important; } h1 { line-height: 1.4; font-weight: 400; font-size: 24px; border-bottom: 1px solid #e7e7eb; padding-bottom: 10px; } h4 { font-weight: 500; font-size: 16px; color: red; line-height: 40px; width: 100%; height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } img { } p { line-height: 30px; font-size: 14px } .top_p { height: 40px; line-height: 40px; } .top_p em { font-size: 16px; font-style: normal; color: #8c8c8c; } .top_p .ren_s { color: #607fa6; font-size: 16px; } .footer { width: 740px; height: 55px; line-height: 35px; background: #f3f3f3; margin: auto; } .footer img { padding-top: 5px; } .footer .foot_s { font-size: 12px; color: #999999; float: right; margin-top: 10px; margin-right: 10px; } @media screen and (min-width: 1024px) { .survey { width: 700px; margin: auto; background: #fff; padding: 0 20px 0 20px; } .img { max-width: 100% } .footer { width: 740px; height: 55px; line-height: 35px; background: #f3f3f3; margin: auto; } .footer img { padding-top: 5px; width: 15% !important; } } @media screen and (max-width: 500px) { .survey { width: 90%; margin: auto; padding: 0 20px 0 16px; } .footer { width: 100%; height: 55px; line-height: 35px; background: #f3f3f3; } img { max-width: 100% } .footer_img { width: 26% !important; margin-top: 5px; margin-left: 3%; } }