.education-list { background: #f7f7f7; padding: 60px 0; } .education-head { margin-bottom: 40px; } .education-head ul { display: flex; flex-wrap: wrap; } .education-head ul li { width: auto; min-width: 160px; height: 60px; background: #fff; border-radius: 30px; color: #333333; text-align: center; line-height: 60px; margin: 0 10px; padding: 0 20px; margin-bottom: 20px; } .education-head ul li a { display: block; } .education-head ul li.active { background: #f08200; color: #fff; } .education-head ul li.active a { color: #fff; } .education-box { background: #fff; height: 114px; background: #ffffff; border-radius: 20px; margin-bottom: 20px; padding: 30px 35px; box-sizing: border-box; position: relative; } .education-box .title { font-size: 18px; font-weight: 400; color: #333333; transition: all 0.3s; margin-right: 150px; display: block; } .education-box .title:hover { transition: all 0.3s; color: #f08200; } .education-box .time { margin-top: 10px; font-size: 15px; font-weight: 400; color: #999999; } .education-box .more { width: 50px; height: 50px; border-radius: 50px; position: absolute; right: 35px; top: 0; bottom: 0; margin: auto; background: url(../images/touzi/al01.png) no-repeat center / 7px 13px; border: 1px solid rgba(108, 108, 108, 0.5); filter: opacity(50%); box-sizing: border-box; } .education-box .more:hover { border-color: #f08200; } .education-list .page-list { margin-top: 80px; } @media (max-width: 768px) { .education-list { padding: 40px 0; } .education-head ul { flex-wrap: nowrap; } .education-head ul li { margin: 0; height: 40px; line-height: 40px; font-size: 14px; width: auto; min-width: auto; padding: 0 20px; } .education-head { margin-bottom: 30px; } .education-box { height: auto; padding: 20px; border-radius: 10px; } .education-box .title { font-size: 16px; line-height: 24px; margin-right: 80px; } .education-box .more { width: 40px; height: 40px; right: 20px; } .education-box .time { font-size: 14px; } .education-list .page-list { margin-top: 40px; } }