.content{ padding-top: 80px; padding-bottom: 100px; } #content1{ padding-bottom: 70px; } .infoList{ display: flex; justify-content: center; flex-wrap: wrap; margin-top: 50px; margin-left: -30px; margin-right: -30px; .item{ display: block; cursor: pointer; width: 270px; height: 270px; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05); text-align: center; padding-top: 51px; margin-bottom: 30px; margin-left: 15px; margin-right: 15px; .icon{ width: 88px; height: 88px; } .title{ font-size: 20px; font-weight: bolder; color: #515356; margin-top: 10px; } .bar{ width: 48px; height: 5px; background: #EAECEE; border-radius: 3px; margin: auto; margin-top: 15px; } } } #content2{ background: #F1F3F5; padding-top: 100px; padding-bottom: 80px; } .contentInfo{ position: relative; margin-bottom: 20px; .infoPic{ width: 100%; } .infoBox{ position: absolute; left: 0; top: 0; width: 440px; height: 100%; padding: 78px 80px; padding-right: 0; .enTitle{ position: absolute; left: 30px; top: 31px; font-size: 72px; line-height: 66px; color: #222325; opacity: 0.06; font-family: Montserrat; font-weight: bold; } .cnTitle{ font-size: 30px; line-height: 40px; font-weight: bold; color: #333436; } .text{ font-size: 15px; line-height: 32px; font-weight: 300; color: #515356; margin-top: 20px; } } } #content3{ .formBox{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 50px; } .inputBox{ width: 46%; height: 42px; margin-bottom: 15px; .text{ min-width: 112px; margin-left: 0; font-size: 15px; line-height: 20px; color: #333436; } .input{ height: 100%; font-size: 15px; color: #333436; padding: 8px 10px; margin-right: 0; } .yzmBox{ width: 100%; height: 100%; margin-right: 0; .input{ height: 100%; font-size: 15px; color: #333436; padding: 8px 10px; margin-right: 0; } .yzm{ width: auto; height: 100%; margin-left: 15px; } } } .button_v2{ width: 200px; margin: auto; margin-top: 15px; } } @media (max-width: 991px) { .contentInfo{ .infoBox{ padding: 40px; .enTitle{ left: 10px; top: 10px; } .cnTitle{ font-size: 24px; line-height: 30px; } .text{ font-size: 14px; line-height: 26px; } } } } @media (max-width: 767px) { .content{ padding-top: 40px; padding-bottom: 50px; } .infoList{ margin-top: 20px; justify-content: center; margin-left: -14px; margin-right: -14px; .item{ width: 168px; height: 168px; padding-top: 30px; margin-bottom: 14px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); margin-right: 7px; margin-left: 7px; .icon{ width: 56px; height: 56px; } .title{ font-size: 15px; line-height: 21px; margin-top: 10px; } .bar{ margin-top: 15px; width: 40px; height: 4px; } } } .contentInfo{ background: #E3E5E7; padding: 20px; .infoBox{ position: relative; padding: 20px 10px; padding-bottom: 20px; width: 100%; left: auto; top: auto; .cnTitle{ font-size: 26px; line-height: 34px; } .text{ font-size: 14px; line-height: 26px; margin-top: 15px; } } } #content1{ padding-top: 40px; padding-bottom: 36px; } #content2{ padding-top: 40px; padding-bottom: 30px; } #content3{ .formBox{ margin-top: 20px; } .inputBox{ width: 100%; height: 38px; margin-bottom: 10px; } .button_v2{ margin-top: 10px; } } }