.teacher-content{ margin: 50px 0 0 50px; width: 77%; } .teacher-inner-content{ width: 100%; } .teacher-index-message{ display: flex; justify-content: space-between; width: 100%; } .teacher-inner-meaasge{ display: none; /* width: 70%; */ } .teacher-inner-active{ display: block!important; margin-bottom: 40px; font-family: 微软雅黑!important; } .teacher-inner-active h1,h2,h3{font-size: 16px !important;color: #8C4D92;margin-bottom: 24px;margin-top:34px;} .teacher-inner-active p{line-height: 26px;font-size: 14px !important;font-family: 微软雅黑;} .teacher-name{ font-size: 24px !important; color: #814487; margin-bottom: 30px; } .teacher-job{ font-size: 16px; } .teacher-job:last-child{ padding-right: 100px; } .teacher-email{ margin: 10px; margin-left: 0; margin-top: 20px; color: #555555; } .teacher-email span{ padding-left: 10px; font-size: 14px; } .teacher-phone span{ padding-left: 11px; font-size: 14px; } .teacher-location span{ padding-left: 12px; font-size: 14px; } .teacher-location img{ padding-left: 1px; } .teacher-phone{ margin: 10px; margin-left: 0; color: #555555; } .teacher-location{ margin: 10px; margin-left: 0; color: #555555; } .teacher-research{ margin-top: 30px; font-size: 16px; color: #8C4D92; } .teacher-leason{ margin-top: 40px; color: #814487; font-size: 16px; } .teacher-right{ /* width: 30%; */ } .teacher-photo{ position: relative; width: 100%; } .teacher-photo img:last-child{ position: absolute; left: 23px; top: 0; width: 176px; max-height: 220px; } .teacher-photo img:first-child{ position: relative; } .teacher-button-change{ } .teacher-button-change ul li{ list-style: none; cursor: pointer; margin: 10px auto; width: 178px; padding: 10px; text-align: center; background: #F1F1F1; } .teacher-button-selected{ background-color: #814487!important; color: white!important; } .teacher-research-content{ margin-top: 24px; font-size: 14px; white-space: wrap; } .teacher-leason-content{ font-size: 14px; margin-top: 24px; } .teacher-left{ padding-right: 40px; } .teacher-left table{display: none;} @media only screen and (max-width: 768px) { .teacher-content { margin: 50px 0 0 0; width: 100%; } } @media only screen and (max-width: 500px) { .teacher-index-message { display: flex; flex-direction: column-reverse; justify-content: space-between; width: 100%; } .teacher-left{ padding: 0; } .teacher-right { display: flex; margin-bottom: 40px; } } @media only screen and (max-width: 444px) { .teacher-photo img:last-child { width: 153px; left: 16px; } .teacher-photo img:first-child { width: 185px; } .teacher-button-change ul li { width: 130px; } .teacher-button-change ul li:first-child{ margin-top: 0; } }