.work { display: flex; align-items: center; }

.work .work-left { width: 40%; margin-right: 60px; }

.work .work-left > .work-left-circle { position: absolute; }

.work .work-left-circle { border: 1px solid #eee; border-radius: 50%; padding: 36px; }

.work .work-left-circle { width: 100%; height: 100%; display: block; }

.work .work-left-circle .work-left-image { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; }

.work .work-right { flex: 1; min-height: 100%; }

.work .work-right .work-item { margin-bottom: 40px; display: block; }

.work .work-right .work-item .work-item__time { color: #979797; font-family: "Arial"; }

.work .work-right .work-item .work-item__title { display: block; font-size: 24px; font-weight: bold; margin: 20px 0; color: #464646; }

.work .work-right .work-item .work-item__title:hover { color: #da0c11; }

.work .work-right .work-item .work-item__content { color: #6e6e6e; line-height: 24px; }

.work .work-right .work-item .work-item__more { display: block; margin-top: 20px; width: 120px; text-align: center; border-radius: 50px; height: 40px; line-height: 38px; border: 1px solid #eee; font-size: 12px; }

.work .work-right .work-item .work-item__more:hover { background: #da0c11; border-color: #da0c11; color: #fff; }

@media (max-width: 768px) { .work { display: block; }
  .work .work-right .work-item { display: flex; }
  .work .work-right .work-item .work-item__right { flex: 1; overflow: hidden; }
  .work .work-right .work-item .work-item__right .work-item__title { font-size: 16px; margin: 6px 0 10px 0; }
  .work .work-right .work-item .work-item__right .work-item__more { margin-top: 10px; width: 80px; font-size: 10px; height: 28px; line-height: 26px; }
  .work .work-right .work-item .work-item__right .work-item__content { -webkit-line-clamp: 2; line-height: 1.6; }
  .work .work-right .work-item__image { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin-right: 10px; } }