.container .contentNav { display: flex; justify-content: center; flex-wrap: wrap; margin:34px 0 ; } .container .contentNav .menuBtn { position: relative; margin: 0 62px 24px; height: 36px; font-size: 18px; font-family: Adobe Heiti Std; font-weight: normal; color: #999999; cursor: pointer; } .container .contentNav .menuBtn.active { color: #004080; } .container .contentNav .menuBtn.active::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 42px; height: 1px; background: #004080; transform: translateX(-50%); } .container .mainContent{ display: flex; flex-wrap: wrap; margin: 0 auto 80px; width: 1200px; } .container .mainContent img{ margin-right: 46px; width: 496px; transition: width 1s,margin 1s; } .container .mainContent img:hover{ margin-right: 36px; width: 506px; } .container .mainContent .text{ max-width: 644px; } .container .mainContent .text h1{ margin: 20px 0 28px; font-size: 24px; font-family: PingFang; font-weight: bold; color: #333333; line-height: 25px; } .container .mainContent .text p{ font-size: 14px; font-family: PingFang; font-weight: 500; color: #666666; line-height: 25px; } @media only screen and (max-width:1200px ){ .container .contentNav{ margin: 18px 0; } .container .contentNav .menuBtn{ margin-left: 10px; margin-right: 10px; margin-bottom: 0; font-size: 12px; height: auto; line-height: 30px; } .container .contentNav .menuBtn.active::after{ width: 22px; } .container .mainContent{ width: 100%; } .container .mainContent img{ padding: 0 20px; margin: 0; width: 100%; box-sizing: border-box; } .container .mainContent img:hover{ margin-right: 0; width: 100%; } .container .mainContent .text{ margin: 0 20px; } }