.list-content-box { margin: 0 20px; } .teacher-info-box { padding-right: 189px; padding-top: 30px; position: relative; min-height: 770px; } .teacher-info-flow { position: absolute; margin-top: 20px; top: 0px; right: 0px; width: 143px; padding: 13px; background-color: #6F1685; } .teacher-info-flow.current { position: fixed; top: 69px; right: 50%; margin: 0 -580px 0 0; } .teacher-info-item p { word-break: break-all; } .teacher-info-imgBox { width: 143px; height: 200px; flex-shrink: 0; } .teacher-info-imgBox>img { width: 100%; height: 100%; } .teacher-info-fontBox { padding-top: 20px; } .teacher-info-title { font-size: 16px; color: white; font-weight: 700; } .teacher-info-normal { display: block; font-size: 12px; color: white; } .teacher-info-item { padding-top: 20px; } .teacher-info-itemTitle { font-size: 12px; font-weight: 700; color: white; } .teacher-info-contentTitle>span:first-child { font-size: 20px; font-weight: 700; color: #333333; } .teacher-info-contentTitle>span:last-child { font-size: 16px; color: #333333; } .teacher-info-contentTitle { padding-bottom: 40px; } @media screen and (max-width: 700px) { .teacher-info-box { padding-top: 20px; padding-right: 0px; } .teacher-info-flow { position: static; width: auto; padding: 10px; background-color: rgba(111, 22, 133, 0.7); box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.16); display: flex; margin-bottom: 20px; align-items: center; } .teacher-info-fontBox { padding-top: 0px; padding-left: 15px; flex-grow: 1; } .teacher-info-item { padding-top: 6px; } }