.lifehack-detail-top { display: flex; align-items: flex-start; padding: 29px 0 18px; flex-wrap: wrap; } .lifehack-detail-top h1{ font-size: 24px; color: #000; } .lifehack-detail-tleft{ flex-shrink: 0; padding-right: 45px; padding-bottom: 15px; } .lifehack-detail-tfirst{ display: flex; } .lifehack-detail-date, .lifehack-detail-section{ font-size: 18px; padding: 0 18px; display: inline-block; line-height: 28px; background-color: #279e03; color: #fff; min-width: 128px; text-align: center; } .lifehack-detail-shows{ font-size: 22px; color: #bebebe; padding: 0 20px; line-height: 28px; } .lifehack-detail-shows i{ font-size: 1.25em; margin-right: 3px; } .lifehack-detail-tsecond{ padding-top: 10px; } .lifehack-block-1 { display: flex; justify-content: space-between; margin: 0 -16px; font-size: 16px; line-height: 1.6; padding: 21px 0; flex-wrap: wrap; } .lifehack-block-1 .lifehack-block-left{ width: 66%; padding: 0 16px; } .lifehack-block-1 .lifehack-block-right{ width: 34%; padding: 0 16px; } .lifehack-block-1 .lifehack-photo{ display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center } .lifehack-block-1 .lifehack-photo-main{ width: 100%; } .lifehack-block-1 .lifehack-photo-pic1, .lifehack-block-1 .lifehack-photo-pic2{ padding-top: 30px; } .lifehack-block-2{ font-size: 16px; line-height: 1.6; padding-top: 21px; } .lifehack-detail-notes{ display: flex; align-items: center; } .lifehack-detail-notes-left{ flex-shrink: 0; min-width: 120px; padding-left: 25px; padding-right: 50px; } .text-cutes{ background-color: #f5f5f5; font-size: 19px; font-weight: 700; line-height: 1.46; padding: 25px 45px; position: relative; } .text-cutes:after, .text-cutes:before { content: ""; border-style: solid; border-color: #279e03; position: absolute; top: 0; bottom: 0; width: 20px; } .text-cutes:before { border-width: 7px 0 7px 7px; left: 0; } .text-cutes:after { border-width: 7px 7px 7px 0; right: 0; } .lifehack-message{ padding-left: 105px; position:relative; margin: 30px 0; } .lifehack-message:before{ content: ""; position:absolute; left: 2px; top: 0; background-image: url(/local/lib/img/info.png); background-repeat: no-repeat; width: 82px; height: 82px; } .lifehack-message>div{ background-color: #bce1b1; font-size: 16px; font-weight: 700; line-height: 1.46; padding: 20px 23px; } @media (max-width: 1110px){ .lifehack-block-1 .lifehack-block-left, .lifehack-block-1 .lifehack-block-right{ width: 100%; } .lifehack-block-1 .lifehack-photo{ justify-content: center; padding-bottom: 10px; } .lifehack-detail-notes-left{ padding-left: 5px; padding-right: 15px; } } @media (min-width: 805px) and (max-width: 1110px){ .lifehack-block-1 .lifehack-photo-pic1, .lifehack-block-1 .lifehack-photo-pic2 { padding-left: 20px; padding-right: 20px; } } @media (max-width: 800px){ .lifehack-detail-notes-left{ display: none; } .text-cutes{ padding: 15px 30px; } .lifehack-message>div{font-size: 18px} .lifehack-message{padding-left: 95px} } @media (max-width: 400px){ .lifehack-message:before{ background-size: 50px; width: 50px; height: 50px; } .lifehack-message{padding-left: 60px} }