.newsNavigation{ width: 100%; height: 67px; background: #FFFFFF; box-shadow: 0px 2px 40px 0px rgba(182,182,182,0.3300); } .newsNavigation .mainNav{ margin: 0 auto; width: 1200px; font-size: 20px; font-family: PingFang; font-weight: 500; color: #004080; line-height: 67px; } .newsNavigation .mainNav span{ cursor: pointer; } .newsNavigation .mainNav span::after{ margin-left: 4px; content: '-'; } .newsNavigation .mainNav span:last-child{ color: #333333; } .newsNavigation .mainNav span:last-child::after{ display: none; } .introduceBox{ margin: 42px auto 0; width: 1200px; box-sizing: border-box; background: #FFFFFF; box-shadow: 0px 2px 60px 0px rgba(182,182,182,0.3400); border-radius: 2px; } .introduceBox p{ font-size: 16px; font-family: PingFang; font-weight: 500; color: #333333; line-height: 26px; } .introduceBox:last-child{ margin-bottom: 64px; } .introduceBox .itdMain{ padding: 40px 20px; text-align: center; } .introduceBox .itdMain .pImg3{ margin: 10px auto 0; width: 910px; } .introduceBox .itdMain .pImg3 img{ width: 100%; } .introduceBox .itdTitle{ padding-left: 18px; width: 100%; height: 44px; background: #004080; font-size: 16px; font-family: PingFang; font-weight: 800; color: #FFFFFF; line-height: 44px; box-sizing: border-box; } .introduceBox .itdTitle.next{ background: #A1A3B3; color: #333333; text-align: center; } .introduceBox .itdContent{ display: flex; flex-wrap: wrap; margin-top: 45px; } .introduceBox .itdContent .pImg{ margin: 0 0 45px 45px; padding: 50px 80px; width: 563px; height: 490px; background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 2px; box-sizing: border-box; } .introduceBox .itdContent .pImg img, .introduceBox .itdContent .itdText .pImg2 img{ width: 100%; height: 100%; } .introduceBox .itdContent .itdText{ margin: 0 20px; } .introduceBox .itdContent .itdText .f-b{ display: flex; justify-content: space-between; width: 550px; } .introduceBox .itdContent .itdText .pImg2{ padding: 20px; width: 170px; height: 154px; background: #FFFFFF; border: 1px solid #E3E3E3; border-radius: 2px; box-sizing: border-box; } .introduceBox .itdContent .itdText .pImg2 + .pImg2{ margin-left: 20px; } .introduceBox .itdContent .itdText h1{ margin: 42px 0 0 0; font-size: 18px; font-family: PingFang; font-weight: 800; color: #999999; text-align: center; } .introduceBox .itdContent .itdText .pdBtn{ margin: 20px auto 0; width: 268px; background: #004080; border-radius: 4px; line-height: 38px; } .introduceBox .itdContent .itdText .csBtn{ margin: 58px auto 30px; width: 158px; height: 47px; background: #A1A3B3; border-radius: 8px; line-height: 47px; } .introduceBox .itdContent .itdText .pdBtn, .introduceBox .itdContent .itdText .csBtn{ font-size: 18px; font-family: PingFang; font-weight: 800; color: #FFFFFF; text-align: center; cursor: pointer; word-break: break-all; } @media only screen and (max-width:1200px ){ .newsNavigation{ height: auto; } .newsNavigation .mainNav{ width: 100%; } .introduceBox{ width: auto; margin: 42px 10px 0; } .introduceBox .itdContent .pImg{ margin: 0 20px; padding: 10px 20px; width: auto; height: auto; } .introduceBox .itdMain .pImg3{ width: auto; } .introduceBox .itdContent .itdText .pImg2{ width: 33%; height: auto; padding: 10px; margin-top: 20px; } .introduceBox .itdContent .itdText{ width: 100%; } .introduceBox .itdContent .itdText .f-b{ width: auto; } }