.footer { width: 100%; height: auto; display: inline-block; position: relative; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-size: cover; padding: 5% 0; padding-bottom: 4%; margin-top: 5%; } .f-left { float: left; margin-top: 0%; width: 25%; } .f-center { width: 45%; float: left; margin-left: 5%; margin-top: 0%; } .f-right { float: right; margin-top: 0%; } .header { width: 100%; height: auto; display: inline-block; padding: 22px 0; position: unset; } .banner{ width: 100%; height: auto; display: inline-block; } .banner img{ width: 100%; } .pro-nav { width: 100%; height: auto; display: inline-block; background: #f8f8f8; padding: 1% 0; margin-top: -4px; } .pn-left { float: left; width: 30%; } .pn-left img { float: left; width: 6%; margin-right: 2%; margin-top: 1px; } .pn-left a { color: #707070; font-size: 16px; } .pn-right { float: right; } .pn-right ul { list-style: none; margin: 0; padding: 0; } .pn-right li { display: inline-block; margin-left: 30px; } .pn-right li a { font-size: 18px; font-weight: bold; } .news-box{ width: 100%; height: auto; display: inline-block; margin-top: 3%; } .article { align-items: center; padding: 10px 0; border-bottom: 1px dashed #d2d2d2; width: 49%; height: auto; display: inline-block; float: left; margin-right: 2%; margin-bottom: 2%; padding-bottom: 2%; } .pl-left{ float: left; width: 10%; text-align: center; color: #98999e; } .pl-left h3{ font-size: 45px; color: #98999e; } .pl-left p{ color: #98999e; font-size: 15px; } .pl-center{ width: 2px; height: 80px; float: left; background: #d4d4d4; margin: 0 15px; } .pl-right{ float: left; margin-left: 3%; position: relative; width: 79%; height: auto; display: inline-block; } .pl-right h4{ color: #000; font-weight: normal; font-size: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pl-right a{ color: #1e8bed; margin-top: 8%; } .partner{ width: 100%; height: auto; display: inline-block; margin-top: 2%; } .article:nth-child(2n) { margin-right: 0; } @media screen and (max-width: 1024px) and (min-width: 0px) { .header { display: none; } .banner { width: 100%; height: auto; display: inline-block; margin-top: 11%; } .pn-left { float: left; width: 100%; margin-top: 2%; } .pn-right { float: right; display: none; } .title_news { font-size: 24px; } .f-left { float: left; margin-top: 0%; width: 100%; } .f-logo { width: 100%; margin-bottom: 1%; } .f-right { float: none; text-align: center; margin: 0 auto; display: block; } .f-right img { text-align: center; margin: 0 auto; } .f-right p { text-align: center; font-size: 15px; color: #fff; margin-top: 4%; } .article { align-items: center; padding: 10px 0; border-bottom: 1px dashed #d2d2d2; width: 100%; height: auto; display: inline-block; float: left; margin-right: 2%; margin-bottom: 2%; padding-bottom: 2%; } .pl-right { float: left; margin-left: 3%; position: relative; width: 76%; height: auto; display: inline-block; } .pl-left { float: left; width: 15%; text-align: center; color: #98999e; } .pl-left h3 { font-size: 40px; color: #98999e; } .pl-left p { color: #98999e; font-size: 14px; } .pl-center { width: 2px; height: 80px; float: left; background: #d4d4d4; margin: 0 11px; } .pl-right { float: left; margin-left: 3%; position: relative; width: 72%; height: auto; display: inline-block; } .pl-right h4 { color: #000; font-weight: normal; font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }