.content{ padding-top: 80px; padding-bottom: 100px; .txt{ font-size: 15px; color: #333436; line-height: 32px; font-weight: 300; margin-top: 40px; } } .content2{ background: #F1F3F5; overflow: hidden; .titleContainer{ margin-bottom: 40px; } .honorInfo{ display: flex; .titleInfo{ position: relative; width: 300px; .year{ font-size: 44px; color: #E60012; letter-spacing: 0; font-weight: bold; } .barBox{ position: absolute; height: 100%; width: 1px; left: 56px; top: 0; padding-top: 74px; .bar{ height: 100%; width: 1px; border-left: dashed 1px #CED3D8; } } } .honorList{ padding-bottom: 40px; .honorText{ font-size: 15px; line-height: 40px; color: #333436; font-weight: 300; .kuai{ color: #E60012; margin-right: 20px; } } } &:last-child{ .titleInfo{ .barBox{ display: none; } } } } } @media (max-width: 767px) { .content{ padding-top: 40px; padding-bottom: 40px; .logo{ // width: 300px; margin-top: 40px; } .txt{ margin-top: 20px; font-size: 14px; line-height: 30px; } } .content2{ .titleContainer{ margin-bottom: 30px; } .honorInfo{ display: block; .titleInfo{ margin-bottom: 10px; .year{ font-size: 36px; color: #E60012; line-height: 44px; font-weight: bold; } .barBox{ display: none; } } .honorList{ padding-bottom: 30px; .honorText{ font-size: 13px; color: #333436; line-height: 38px; font-weight: 300; .kuai{ margin-right: 10px; } } } } } }