.newsMainBox{ margin: 48px auto 55px; width: 1200px; background: #FFFFFF; box-shadow: 0px 2px 60px 0px rgba(182,182,182,0.3400); box-sizing: border-box; } .newsMainBox h1{ padding: 40px 0 66px; font-size: 20px; font-family: PingFang; font-weight: 500; color: #333333; line-height: 24px; text-align: center; } .newsMainBox p{ margin: 0 auto; max-width: 1042px; font-size: 14px; font-family: PingFang; font-weight: 500; color: #333333; line-height: 22px; } .newsMainBox .mainImg { margin: 48px auto 0; width: 902px; } .newsMainBox .mainImg img{ width: 100%; } .newsMainBox .mainImg + .mainImg{ margin-top: 20px; } .newsMainBox .nextPrevBtn{ padding: 114px 0 65px 96px; } .newsMainBox .nextPrevBtn h2{ margin: 0; font-size: 14px; font-family: PingFang; font-weight: 500; color: #333333; line-height: 29px; text-align: left; cursor: pointer; } .newsMainBox .nextPrevBtn h2.active{ color:#004080; } .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; } @media only screen and (max-width:1200px ){ .newsMainBox{ width: auto; margin: 20px 10px; } .newsMainBox .mainImg{ width: auto; } .newsMainBox .nextPrevBtn{ padding: 30px 10px; } .newsNavigation{ height: auto; } .newsNavigation .mainNav{ width: 100%; padding: 0 10px; box-sizing: border-box; font-size: 15px; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }