.about{ width: 100%; height: auto; display: inline-block; margin-top: 5%; } .ab-left{ width: 45%; float: left; } .ab-left img{ width: 100%; } .ab-right{ float: left; width: 43%; margin-left: 8%; margin-top: 6%; } .ab-right h3{ color: #000000; font-size: 40px; letter-spacing: 2px; margin-bottom: 7%; } .ab-right p{ color: #4f4f4f; font-size: 14px; line-height: 30px; text-indent: 2em; } .more a{ background: #20356b; padding: 12px 32px; font-size: 15px; border-radius: 9px; color: #fff; margin-top: 5%; display: inline-block; } .case{ width: 100%; height: auto; display: inline-block; margin-top: 5%; } .case h3{ text-align: center; font-size: 35px; letter-spacing: 3px; } .case ul{ width: 100%; height: auto; display: inline-block; margin-top: 3%; } .case li{ width: 23%; float: left; margin-right: 2.6%; margin-bottom: 2%; } .case li img{ width: 100%; height: 248px; display: inline-block; } .case li p{ text-align: center; font-size: 15px; } .case li:nth-child(4n) { margin-right: 0; } .news{ width: 100%; height: auto; display: inline-block; margin-top: 5%; } .n-title h3{ text-align: center; font-size: 35px; letter-spacing: 3px; } .n-box{ width: 100%; height: auto; display: inline-block; } .nb-left{} .nb-left ul{ margin-top: 3%; width: 100%; height: auto; display: inline-block; } .ab-bex { border-radius: 11px; width: 29%; float: right; margin-top: 3%; height: auto; overflow: hidden; } .ab-bex i{width: 6px;background: #5da7f0;height: 35px;display: inline-block;float: left;border-radius: 5px;margin-right: 11px;font-size: 26px;} .ab-bex h3 { color: #000000; font-size: 23px; padding-left: 3%; } .abb-box { width: 100%; height: 501px; display: inline-block; margin-top: 7%; overflow-x: auto; background: #f3f3f3; padding: 15px; } .nb-left{ width: 70%; height: auto; display: inline-block; margin-top: 3%; float: left; } .nb-left h2{ color: #000000; font-size: 23px; width: 100%; height: auto; display: inline-block; } .nb-left i{ width: 6px; background: #5da7f0; height: 35px; display: inline-block; float: left; border-radius: 5px; margin-right: 11px; font-size: 26px; } .abb-one { width: 90%; height: auto; display: inline-block; margin-bottom: 5%; } .abb-one a { font-size: 19px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 31px; } .abb-one span{ color: #a9a9a9; font-size: 17px; width: 100%; display: inline-block; } .nb-left li { width: 47%; float: left; margin-right: 5%; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08); border-radius: 15px; padding-bottom: 2%; } .nb-left li img { width: 100%; height: auto; border-top-left-radius: 15px; border-top-right-radius: 15px; } .nb-left li h3 { font-size: 21px; line-height: 30px; margin: 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nb-left li p { font-size: 15px; line-height: 27px; padding: 0px 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #6c6c6c; } .nb-left li span{ padding: 0 17px; width: auto; display: inline-block; } .nb-left li span img{ width: 15px; border-top-left-radius: 0px; border-top-right-radius: 0px; float: left; } .nb-left li span p{ font-size: 15px; line-height: normal; padding: 0px; padding-left: 5px; margin-top: -3px; } .ablt-left{ float:left; } .ablt-right{ float: right; } .ablt-right a { border: 1px solid #d2d2d2; font-size: 18px; padding: 9px 29px; border-radius: 22px; } .nb-left li:nth-child(2n) { margin-right: 0; } .advertise{ width: 100%; height: auto; display: inline-block; margin-top: 3%; z-index: 999999; position: relative; } .adv-box{ width: 100%; height: auto; display: inline-block; background: #1b75bc; border-radius: 15px; padding: 3% 0; } .adv-left{ float: left; color: #fff; font-size: 21px; margin-left: 9%; line-height: 37px; } .adv-right{ float: right; margin-right: 7%; margin-top: 1%; } .adv-right img{ width: 90%; text-align: right; display: inline-block; float: right; margin-top: 2%; } .product{ width: 100%; height: auto; display: inline-block; margin-top: 5%; } .indexs{ width: 97%; margin: 0 auto; } .product h3{ text-align: center; font-size: 35px; letter-spacing: 3px; } .product ul{ width: 100%; height: auto; display: inline-block; margin-top: 5%; } .product li{ width: 24%; float: left; margin-right: 1%; position: relative; } .product li img{ width: 100%; border-radius: 15px; } .product li p{ position: absolute; width: 100%; text-align: center; top: 44%; color: #fff; font-size: 23px; letter-spacing: 1px; } @media screen and (max-width: 1024px) and (min-width: 0px) { .ab-left { width: 110%; float: left; } .ab-right { float: left; width: 100%; margin-left: 0%; margin-top: 4%; } .ab-right h3 { color: #000000; font-size: 33px; letter-spacing: 2px; margin-bottom: 1%; } .ab-right p { color: #4f4f4f; font-size: 14px; line-height: 30px; text-indent: 2em; margin-bottom: -6%; } .more a { background: #20356b; padding: 12px 32px; font-size: 15px; border-radius: 9px; color: #fff; margin-top: 14%; display: inline-block; } .product { width: 100%; height: auto; display: inline-block; margin-top: 9%; } .product li { width: 49%; float: left; margin-right: 1%; position: relative; margin-bottom: 7%; } .case ul { width: 100%; height: auto; display: inline-block; margin-top: 9%; } .case li { width: 49%; float: left; margin-right: 1%; margin-bottom: 2%; } .case li img { width: 100%; height: 113px; display: inline-block; } .case li p { text-align: center; font-size: 12px; } .n-box { width: 100%; height: auto; display: inline-block; margin-top: 6%; } .nb-left { width: 100%; height: auto; display: inline-block; margin-top: 3%; float: left; } .nb-left li { width: 100%; float: left; margin-right: 5%; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08); border-radius: 15px; padding-bottom: 2%; margin-bottom: 7%; } .ab-bex { border-radius: 11px; width: 100%; float: right; margin-top: 3%; height: auto; overflow: hidden; } .adv-left { float: left; color: #fff; font-size: 13px; margin-left: 9%; line-height: 20px; } }