.top { position: relative; margin-top: 50px; height: 551px; } .top h3 { height: 58px; color: #333333; font-size: 24px; } .top h3 span { color: #bbbbbb; font-size: 10px; } .conten { display: flex; justify-content: space-between; } .conten .con_l { width: 714px; } .conten .con_l .title { margin-top: 70px; color: #333333; font-size: 18px; } .conten .con_l p { margin-top: 30px; font-size: 14px; color: #666666; line-height: 30px; } .more { width: 105px; height: 33px; background-color: #3273c9; margin-top: 55PX; line-height: 33px; text-align: center; } .more a { display: inline-block; width: 100%; height: 100%; color: #FFFFFF; font-size: 14PX; } .con_r { margin: 0 0 80px 64px; } .top_data { position: absolute; left: 100px; bottom: -80px; display: flex; justify-content: space-around; align-items: center; width: 1199px; height: 151px; background-color: #ffffff; box-shadow: 3px 4px 13px 0px rgba(221, 221, 221, 0.32); } .top_data .box { color: #333333; font-size: 40px; line-height: 20px; } .top_data .box i { color: #333333; font-size: 20px; font-style: normal; } .top_data .box span{ color: #666666; font-size: 16px; } .cent { /*width: 1920px;*/ height: 615px; background-color: #f8f8f8; padding-top: 150px; } .cent_c { display: flex; justify-content: space-between; } .cent_c .cen_r { width: 717px; } .cent_c .cen_r h3 { color: #333333; font-size: 24px; line-height: 24px; text-align: center; font-weight: bold; } .cent_c .cen_r h3 span { color: #bbbbbb; font-size: 10px; } .cent_c .cen_r .title { margin-top: 70px; color: #333333; font-size: 18px; } .cent_c .cen_r p { margin-top: 30px; color: #666666; font-size: 14px; line-height: 30px; } .bottom { width: 1050px; height: 225px; margin:77px auto 0; } .bottom_t { display: flex; justify-content: space-between; } .bottom_t>div { height: 210px; } .bottom_t .item:hover img{ transform: rotate(360deg); } .bottom_t .item img{ transition: all 2s; } .jiagou { width: 195px; } .jiesao { width: 193px; } .dashijian { width: 145px; } .bottom_t div .img { margin: auto; } .bottom_t .img { position: relative; } .jiagou .img { width: 44px; height: 43px; } .bottom_t .img::before { content: ''; position: absolute; height: 2px; width: 32px; background-color: #ccc; bottom: -25px; left: 50%; transform: translateX(-50%); } .bottom_t .active .img::before { background-color: #3273c9; } .jiagou .img img { width: 100%; height: 100%; } .jiesao .img { width: 41px; height: 41px; } .jiesao .img img { width: 100%; height: 100%; } .jiagou .img img { width: 100%; height: 100%; } .dashijian .img { width: 40px; height: 42px; } .dashijian .img img { width: 100%; height: 100%; } .bottom_t h3 { margin-top: 56px; color: #333333; font-size: 20px; text-align: center; font-weight: bold; } .bottom_t .title { text-align: center; } .bottom_t .title span { color: #bbbbbb; font-size: 10px; white-space:nowrap } .bottom .bot_more { width: 193px; height: 42px; background-color: #3273c9; box-shadow: 3px 4px 13px 0px rgba(186, 135, 97, 0.32); border-radius: 21px; line-height: 42px; text-align: center; margin:43px auto 0; } .bottom .bot_more a { display: inline-block; height: 100%; width: 100%; color: #ffffff; font-size: 20px; } @media all and (min-width: 0px) and (max-width: 1024px) { .conten .con { width: 100%; margin: 0 auto; } .top { } .top h3 { text-align: center; } .m_img { height: 100%; } .conten { display: block; width: 100%; margin-top: 20px; padding: 0 ; } .news_top .conten { height: 190px; } .conten .con_l { width: 100%; } .conten .con_l .title { margin-top: 0px; } .conten .con_l p { margin-top: 10px; } .more { margin-top: 10px; margin-bottom: 20px; } .con_r { margin: 0; width: 100%; } .con_r img { width: 100%; } .top_data { width: 100%; left: 0; bottom: -223px; } .cent { height: 100%; padding: 227px 16px 0 16px; background-color: #fff; } .cent_c { display: block; } .cen_l img { width: 100%; } .cent_c .cen_r p { margin-top: 10px; } .bottom{ width: 100%; } .bottom .bot_more { width: 80px; } .bottom .bot_more a { font-size: 10px; } .bottom_t { padding: 0 16px; } .bottom_t .title span { white-space: normal; } .jiagou { width: 30%; } .jiesao { width: 30%; } .dashijian { width: 30%; } .cent_c .cen_r { width: 100%; } .cent_c .cen_r .title { margin-top: 10px; } .cent_c .cen_r h3 { margin-top: 20px; } }