.banner-wrapper { height: 70rem; overflow: hidden; position: relative; width: 100%; } .banner-wrapper img { width: 100%; } .banner-wrapper:before, .philosophy-wrapper:before { position: absolute; width: 100%; height: 100%; content: ""; z-index: 1; } .banner-content { position: absolute; top: 35%; width: 40%; left: 30%; z-index: 2; text-align: center; } .banner-content h6 { font-size: 4.6rem; color: #ffffff; letter-spacing: 0.8rem; line-height: 7rem; font-weight: 500; } .banner-content p { font-size: 2.2rem; color: #ffffff; letter-spacing: 0.4rem; margin-top: 5.5rem; } /* 兼容不同分辨率样式 */ @media screen and (max-width: 1919px) and (min-width: 1680px) { .banner-content { width: 50%; left: 25%; } .banner-content h6 { line-height: 8rem; font-size: 4.4rem; } } @media screen and (max-width: 1679px) and (min-width: 1600px) { .banner-wrapper { height: 65rem; } .banner-content { width: 50%; left: 25%; } .banner-content h6 { line-height: 8rem; font-size: 4.2rem; } } @media screen and (max-width: 1599px) and (min-width: 1440px) { .banner-wrapper { height: 60rem; } .banner-content { width: 60%; left: 20%; } .banner-content h6 { line-height: 7.6rem; font-size: 4rem; } } @media screen and (max-width: 1439px) and (min-width: 1280px) { .banner-wrapper { height: 60rem; } .banner-content { width: 66%; left: 17%; } .banner-content h6 { line-height: 7rem; font-size: 3.6rem; } .banner-content p { font-size: 2rem; } }