* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.container {position: relative;width: 1300px;height: 100%;padding: 0;left: 50%;transform: translateX(-50%);}
a, a:hover, a:focus {color: inherit;}
.section {width: 100%;padding: 60px 0;color: #061828;}
.content-title {font-size: 32px;font-weight: 500;text-align: center;}

.services{ background-color: #ffffff; width: 1440px; height: 90px; margin: -45px auto 0; border-radius: 10px; position: relative; z-index: 1; box-shadow: 0 5px 10px 0 rgba(18, 32, 46, 0.14);}
.services ul{ width: 1004px; margin: 0 auto;}
.services ul li{ width: 33.3%; text-align: center; float: left; line-height: 90px; background: url(../image/services/line.jpg) no-repeat right center;}
.services ul li:last-child{ background: none;}
.services ul li a{ font-size: 18px; color: #333333;}
.services ul li.active a{ color: #0D52D8;}

.article{ padding-top: 50px;}
.article, .article p{ font-size: 16px; color: #333333; line-height: 30px;}

.products{ overflow: hidden;}
.products ul{ width: 1470px;}
.products ul li{ float: left; overflow: hidden; width: 460px; height: 125px; margin-right: 30px; background: url(../image/products/bg1.png) no-repeat center center; background-size: 100% 100%; padding: 30px; margin-bottom: 30px;}
.products ul li .tu{ width: 130px; line-height:40px; margin-right:20px;}
.products ul li .tu img{ max-width:100%; vertical-align: middle;}
.products ul li .zi{ width: 250px;}
.products ul li .zi h1{ font-size: 18px; color: #333333; font-weight: normal;}
.products ul li .zi p{ font-size: 14px; color: #999999; line-height: 25px; height: 50px; overflow: hidden;}
.products ul li:hover{ background-image: url(../image/products/bg2.png);}
.products ul li:hover .zi h1{ color:#1760D7; font-weight: bold;}

.section2{ background-color: #F6F7FA;}

.section3 .products ul li .zi{ width: 320px;}
.section3 .products ul li .tu{ max-width:60px; margin-right:0;}

@media only screen and (max-width: 1440px) {
    .services{ width: 1200px;}
    .services ul li a{ font-size: 16px;}
}

@media only screen and (max-width: 1024px) {
    .services{ width: 960px;}
    .services ul{ width: 100%;}
    .services ul li a{ font-size: 14px;}
    .products ul{ width: 100%;}
    .products ul li{ width: 48%; margin: 0 1% 30px;}
}

@media only screen and (max-width: 540px) {
    .services {width: 96%;margin: -30px auto 0;}
    .content-title{ font-size: 5vw; font-weight: bold;}
    .section{padding: 30px 0;}
    .article {padding-top: 30px;}
    .products ul li{ width: 100%; height: auto;}
    .products ul li .zi{ width: 100%;}
    .products ul li .zi h1{ display: none;}
    .products ul li .zi p{ font-size: 3.6vw; margin-top: 4vw;}
    .section3 .products ul li .zi h1{ display: block;}
    .section3 .products ul li .zi{ width: 75%;}
    .section3 .products ul li .zi p{ margin-top: 0;}
    .services ul{ text-align: center;}
    .services ul li{ background-size: 1px 4vw; display: inline-block; width: auto; float: none; padding: 0 5vw;}
}