.service-content * { box-sizing: border-box; } .service-efficient { width: 100%; display: flex; background-color: white; flex-wrap: wrap; } .service-efficient .top { width: 100%; padding: 0.5rem; font-size: 0.2rem; text-align: left; } .service-efficient .image { width: 100%; } .service-efficient img { width: 100%; height: 100%; } .service-efficient-else { flex-wrap: wrap-reverse; } .service-experience { width: 100%; display: flex; justify-content: space-around; margin: auto; flex-wrap: wrap; } .service-experience .image { width: 100%; position: relative; } .service-experience .image .top { font-size: 0.4rem; background-color: #e4e4e4; padding: 0.3rem 0; margin-top: -0.25rem; } .service-major { width: 100%; position: relative; display: flex; justify-content: space-around; margin: auto; flex-wrap: wrap; } .service-major .image { width: 100%; } .service-major .main-title { width: 100% !important; background-color: #fff; padding: 0.4rem; font-size: 0.25rem; text-align: left; } .service-major .main-title p { margin-bottom: 0.2rem; } .service-increment { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .service-increment .image { width: 48%; position: relative; margin-bottom: 0.3rem; overflow: hidden; } .service-increment .image:hover img { transform: scale(1.2); transition: all 0.5s; } .service-increment .image .share { width: 100%; height: 40%; font-size: 0.2rem; padding: 0.2rem; text-align: left; color: #ffffff; position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.7); } .example-image { height: 5rem; } .example-experience { display: flex; justify-content: space-between; flex-wrap: wrap; } .example-experience .image { width: 30%; } .example-experience .image .top { font-size: 0.1rem; background-color: #e4e4e4; margin-top: -0.15rem; text-align: left; padding: 0.2rem 0; } .pain-point-img { min-height: 3rem; margin-top: 0.1rem; } .pain-point { height: 100%; display: flex; position: absolute; top: 0; justify-content: space-around; align-items: center; } .pain-point .box { width: 16%; } .pain-point .box img { width: 100%; } .pain-point .box p { font-size: 0.25rem; color: #ffffff; padding-top: 0.2rem; } .pain-point .box:hover img { transform: scale(1.1); transition: all 0.5s; } .industry-img { min-height: 4rem; } .industry { height: 80%; display: flex; position: absolute; top: 10%; justify-content: space-around; align-items: center; } .industry .box-left { margin-left: 0.5rem; } .industry .box-right { margin-right: 0.5rem; } .industry .box img { width: 50%; } .industry .box p { font-size: 0.25rem; color: #ffffff; padding-top: 0.2rem; } .industry .box { width: 22%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .industry .box:hover img { transform: scale(1.1); transition: all 0.5s; } .section { color: #fff; text-align: center; padding: 0.66rem 0; background-color: #838383; } .section .title .desc { font-size: 0.3rem; margin-bottom: 0.22rem; } .section .title .info { font-size: 0.22rem; /* margin-bottom: 0.76rem; */ } #myMap { width: 100%; height: 6rem; } .beianinfo { display: inline-block; margin-left: 0.65rem; }