.main1 { position: relative; } .bannerInfo { position: absolute; top: 0; left: 0; z-index: -1; } .main2 { display: flex; padding: 1rem 0 1.1rem; align-items: center; } .main2 > div { flex-basis: 50%; box-sizing: border-box; } .main2 > div:first-child h3 { margin: 0; color: #595959; font-size: 0.3rem; margin-bottom: 0.6rem; } .main2 > div:first-child p { font-size: 0.2rem; color: #595959; line-height: 0.36rem; } .main2 > div:last-child { padding: 0 0.5rem; position: relative; } .swiper-container { width: 290px; overflow: hidden; } .swiper-button-next { background-image: url("../images/right.png"); background-size: 38px 38px; width: 38px; height: 38px; } .swiper-button-prev { background-image: url("../images/left.png"); background-size: 38px 38px; width: 38px; height: 38px; } .main3 > div > div { width: 50%; } .main3 .flexText { background-color: #e60012; color: #ffffff; padding: 1.7rem 1rem 2.3rem 1.1rem; } .main3 .flexText h4 { font-size: 0.36rem; margin: 0; margin-bottom: 0.5rem; } .main3 .flexText p { font-size: 0.24rem; margin-bottom: 0.35rem; } .main3 .flexText p img { margin-right: 0.1rem; width: 0.29rem; } @media (max-width: 767px) { .main2 { flex-flow: column; padding: 30px 0; } .main2 > div { flex-basis: 100%; } .main2 > div:first-child h3 { font-size: 30px; } .main2 > div:first-child p { font-size: 20px; line-height: normal; } .swiper-container { width: 300px; } .main3 > div { display: block; } .main3 > div > div { width: 100%; } .main3 .flexText h4 { font-size: 36px; margin-bottom: 50px; } .main3 .flexText p { font-size: 24px; margin-bottom: 35px; } .main3 .flexText { padding: 1.7rem 1.1rem 2.3rem; } .main3 .flexText p img { width: 29px; margin-right: 10px; } }