.ask-content { padding: 60px 0; } .ask-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; grid-auto-rows: 240px; } .ask-list .ask-box { background: #fafafa; padding: 40px; position: relative; } .ask-list .ask-box p { font-size: 24px; font-weight: 400; color: #333333; position: relative; padding-bottom: 23px; margin-bottom: 25px; } .ask-list .ask-box p::after { display: none; content: ""; width: 40px; height: 3px; background: #f08200; border-radius: 2px; position: absolute; bottom: 0; left: 0; } .ask-list .ask-box .ask-box-desc { font-size: 16px; font-weight: 400; color: #666666; line-height: 28px; margin-right: 80px; display: block; } .ask-list .ask-box .img { position: absolute; right: 50px; top: 50px; width: 48px; } .ask-message { background: #fafafa; padding: 60px 0; } .message-table .layui-table thead th { padding: 20px 0; color: #f7f7f7; font-size: 16px; text-align: center; line-height: 28px; } .message-table .layui-table td { text-align: center; padding: 15px 0; font-size: 14px; } @media (max-width: 1024px) { .ask-list .ask-box span { margin-right: 0px; line-height: 28px; } } @media (max-width: 768px) { .ask-content { padding: 40px 0; } .ask-list { grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto; grid-row-gap: 20px; } .ask-list .ask-box { padding: 20px; } .ask-list .ask-box p { font-size: 18px; padding-bottom: 20px; margin-bottom: 15px; } .ask-list .ask-box .img { right: 20px; top: 20px; width: 35px; } .ask-list .ask-box span { font-size: 14px; line-height: 26px; } .ask-message { padding: 40px 0; } .message-table { margin-top: 30px; } .ask-list .ask-box .ask-box-desc{ margin-right: 0; } }