@charset "utf-8";

.setion {
    padding: 75px 0 55px
}

.setion .title {
    line-height: 56px;
    font-size: 40px;
    font-weight: 600;
    color: #000
}

.setion .title .sub {
    padding-left: 12px;
    line-height: 36px;
    font-size: 30px;
    text-transform: uppercase;
    color: #dbdbdb
}

.home .containner {
    width: 100%;
    margin: 0 auto
}

.home .about {
    padding-bottom: 50px
}

.home .about .des {
    position: relative;
    margin-top: 36px;
    padding: 0 0px 43px;
    line-height: 50px;
    font-size: 20px;
    font-weight: 400;
    color: #84888f;
    white-space: pre-line
}

.home .about .des:before, .home .about .des:after {
    position: absolute;
    width: 82px;
    height: 78px;
    content: ""
}

.home .about .des:before {
    left: 0;
    top: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABOAgMAAADOVqnoAAAADFBMVEUAAAAAAAAAAAAAAAA16TeWAAAABHRSTlMNAAgEjk3wVgAAAQ9JREFUOMvt1SEOwkAQBdChBIFA1mOQJJj1HKGitBUreoRKZC+B5wgYfC9RzzGQ5E92tj+hbYJDdFXzksn/M6ZyGXlZ0PJO+N4HfdHMVYJ6GbQQ0460NvUyaCmmNWkVtSXtTHMZtBTThtRH7UibqEJ6Ns1ZxbQiLUy1rSQUJg8JYc9wQ3wfcUl8bKlCgvtqb0cVdlCt0NO+DooK6wsV66EZhugKa2RqwCFogWCoBqR0m41qR2HIcKp88gxzqlyhwRwUsSvTGnPQEBtXS1RzjR1WW31ra+qxBOlWVSuaYvmoKZ1ho4rit1ktkKHa0BnySXVRA5LWpH5S05/1TFpNqptXfaZ4p1HdL7ro3+no3+kDN/0k1IHlb3oAAAAASUVORK5CYII=) no-repeat center center / 100% 100%
}

.home .about .des:after {
    right: 0;
    bottom: 0;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABOAgMAAADOVqnoAAAADFBMVEUAAAAAAAAAAAAAAAA16TeWAAAABHRSTlMNAAgF+UrAwAAAATJJREFUOMvt1aFuwzAQBmDHUYFBpJHwkfCR8GhPEBA31VQwPLRHyCOMmA9H2jv0EUbM9xLjuzvdxb+6goGBghpdviS+O9tKXLwwRjc4GXL3oPH9TW96ZfrgXtZ1XVSfKH5nlatBVZ7/X/Wod3/UEbX+raczfTOtTF83Xc700zSYPpOOog50QG1AvehMujM9me5NNUctOpF2phRXokeKesWZM7PKgrSqe87MKk0m1YlzsErhWfXIOVjLVuh7vehCJWLDLamkraAJl1gnXAY5RqwjFwOFedHBGtbSa9bZcVqYNrAeWFOZwDWk8+JKE18cd6RUoJRbzm9rX9oKNZs2oD6a9qDVpgl0Z+ojaG8aUKNpDxo2zaCdaYig2TSBNlE1xKI+q1JQtNMtffyORT+i6sW/0w9X0ipCwwNUCAAAAABJRU5ErkJggg==) no-repeat center center / 100% 100%
}

.contain .company {
    width: 100%;
    height: 700px;
    background: url(../img/aboutus/company_bg.jpg) bottom center no-repeat;
}

.contain .company .company-contain {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.contain .company .company-contain .company-title {
    text-align: center;
    margin-bottom: 77px;
    padding-top: 110px;
}

.contain .company .company-contain .company-title h2 {
    font-size: 28px;
    height: 28px;
    line-height: 28px;
    color: #333;
}

.contain .company .company-contain .company-text {
    font-size: 16px;
    color: #737373;
    text-indent: 40px;
    line-height: 28px;
}

.contain .company .company-contain .company-text p:last-child {
    margin-top: 28px;
}

.contain .service {
    width: 100%;
    height: 520px;
    background: #fff;
}

.contain .service .service-contain {
    width: 1200px;
    margin: 0 auto;
}

.contain .service .service-contain .service-title {
    text-align: center;
    padding-top: 110px;
    margin-bottom: 80px;
}

.contain .service .service-contain .service-title h2 {
    font-size: 28px;
    height: 28px;
    line-height: 28px;
    color: #333;
}

.contain .service .service-contain .service-text .service-ul li {
    width: 120px;
    height: 120px;
    overflow: hidden;
    float: left;
    margin-right: 150px;
    background: url(../img/aboutus/service.png) no-repeat;
    cursor: pointer;
}

.contain .service .service-contain .service-text .service-ul li:last-child {
    margin-right: 0;
}

.contain .service .service-contain .service-text .p1, .p2, .p3, .p4, .p5 {
    position: relative;
}

.contain .service .service-contain .service-text .service-ul .p2 {
    background-position: -120px 0;
}

.contain .service .service-contain .service-text .service-ul .p3 {
    background-position: -240px 0;
}

.contain .service .service-contain .service-text .service-ul .p4 {
    background-position: -360px 0;
}

.contain .service .service-contain .service-text .service-ul .p5 {
    background-position: -480px 0;
}

.contain .service .service-contain .service-text .service-name {
    font-size: 16px;
    color: #999;
}

.contain .service .service-contain .service-text .service-ul2 {
    margin-top: 20px;
}

.contain .service .service-contain .service-text .service-ul2 li {
    float: left;
    width: 120px;
    margin-right: 150px;
    text-align: center
}

.contain .service .service-contain .service-text .service-ul2 li:last-child {
    margin-right: 0;
}


.contain .develop {
    width: 100%;
    height: 800px;
    background: url(../img/aboutus/develop_bg.jpg) top center no-repeat;
}

.contain .develop .develop-contain {
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    position: relative;
}

.contain .develop .develop-contain .develop-title {
    text-align: center;
    padding-top: 120px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -56px;
}

.contain .develop .develop-contain .develop-title h2 {
    font-size: 28px;
    height: 28px;
    line-height: 28px;
    color: #fff;
}

.contain .develop .develop-contain .line {
    height: 2px;
    width: 1200px;
    position: relative;
    top: 452px;
    box-shadow: 0 0 6px #fff;
}

/*.contain .develop .develop-contain .line:before{content:''; height:10px; width:10px; display:block; border:2px solid #fff; border-left-width:0; border-top-width:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; top:7px; right:3px;}*/
.contain .develop .develop-contain .line .arrow {
    position: absolute;
    right: 0;
    top: -6px;
}

.contain .develop .develop-contain .line:after {
    content: '';
    height: 2px;
    width: 1197px;
    display: block;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.contain .develop .develop-contain .spot {
    height: 16px;
    width: 16px;
    position: relative;
    border: 1px #fff solid;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    top: 442px;
}

.contain .develop .develop-contain .spot:before {
    content: '';
    height: 8px;
    width: 8px;
    background: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    position: absolute;
    top: 4px;
    left: 4px;
}

.contain .develop .develop-contain .spot-position1 {
    left: 40px;
}

.contain .develop .develop-contain .spot-position2 {
    left: 113px;
    top: 424px;
}

.contain .develop .develop-contain .spot-position3 {
    left: 231px;
    top: 406px;
}

.contain .develop .develop-contain .spot-position4 {
    left: 331px;
    top: 388px;
}

.contain .develop .develop-contain .spot-position5 {
    left: 431px;
    top: 370px;
}

.contain .develop .develop-contain .spot-position6 {
    left: 560px;
    top: 352px;
}

.contain .develop .develop-contain .spot-position7 {
    left: 728px;
    top: 334px;
}

.contain .develop .develop-contain .spot-position8 {
    left: 804px;
    top: 316px;
}

.contain .develop .develop-contain .spot-position9 {
    left: 932px;
    top: 298px;
}

.contain .develop .develop-contain .spot-position10 {
    left: 1053px;
    top: 280px;
}

.contain .develop .develop-contain .level, .contain .develop .develop-contain .level2 {
    position: absolute;
}

.contain .develop .develop-contain .level:before {
    content: '';
    height: 10px;
    width: 10px;
    display: block;
    position: absolute;
    top: 0px;
    left: 19px;
    background: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}

.contain .develop .develop-contain .level:after, .contain .develop .develop-contain .level2:after {
    content: '';
    height: 130px;
    width: 1px;
    display: block;
    position: absolute;
    background: #fff;
    top: 10px;
    left: 24px;
}

.contain .develop .develop-contain .level2:before {
    content: '';
    height: 10px;
    width: 10px;
    display: block;
    position: absolute;
    top: 140px;
    left: 19px;
    background: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}


.contain .develop .develop-contain .spot-position1 .lvl-position1, .spot-position3 .lvl-position3, .spot-position5 .lvl-position5, .spot-position7 .lvl-position7, .spot-position9 .lvl-position9 {
    left: -17px;
    top: -133px;
}

.contain .develop .develop-contain .spot-position2 .lvl-position2, .spot-position4 .lvl-position4, .spot-position6 .lvl-position6, .spot-position8 .lvl-position8, .spot-position10 .lvl-position10 {
    left: -17px;
    top: 2px;
}


.contain .develop .develop-contain .lvl-p2:before {
    top: 140px;
}

.contain .develop .develop-contain .lvl-p2:after {
    height: 137px;
}

.contain .develop .develop-contain .lvl-p3:before {
    top: -51px;
}

.contain .develop .develop-contain .lvl-p3:after {
    height: 185px;
    top: -42px;
}

.contain .develop .develop-contain .lvl-p4:before {
    top: 90px;
}

.contain .develop .develop-contain .lvl-p4:after {
    height: 80px;
}

.contain .develop .develop-contain .lvl-p5:before {
    top: -15px;
}

.contain .develop .develop-contain .lvl-p5:after {
    height: 144px;
    top: -6px;
}

.contain .develop .develop-contain .lvl-p6:before {
    top: 148px;
}

.contain .develop .develop-contain .lvl-p6:after {
    height: 139px;
}

.contain .develop .develop-contain .lvl-p7:before {
    top: -57px;
}

.contain .develop .develop-contain .lvl-p7:after {
    height: 185px;
    top: -47px;
}

.contain .develop .develop-contain .lvl-p8:before {
    top: 90px;
}

.contain .develop .develop-contain .lvl-p8:after {
    height: 80px;
}


.contain .develop .develop-contain .lvl-p10:before {
    top: 177px;
}

.contain .develop .develop-contain .lvl-p10:after {
    height: 167px;
}


.contain .develop .develop-contain .history {
    color: #fff;
    font-size: 14px;
    width: 230px;
    position: absolute;
}

.contain .develop .develop-contain .history .history-t {
    font-weight: bold;
}


.contain .develop .develop-contain .history-p1 {
    top: 307px;
    left: 60px;
}

.contain .develop .develop-contain .history-p2 {
    top: 566px;
    left: 133px;
}

.contain .develop .develop-contain .history-p3 {
    top: 258px;
    left: 251px;
}

.contain .develop .develop-contain .history-p4 {
    top: 514px;
    left: 352px;
}

.contain .develop .develop-contain .history-p5 {
    top: 294px;
    left: 452px;
}

.contain .develop .develop-contain .history-p6 {
    top: 571px;
    left: 582px;
}

.contain .develop .develop-contain .history-p7 {
    top: 252px;
    left: 751px;
}

.contain .develop .develop-contain .history-p8 {
    top: 514px;
    left: 827px;
}

.contain .develop .develop-contain .history-p9 {
    top: 309px;
    left: 953px;
}

.contain .develop .develop-contain .history-p10 {
    top: 601px;
    left: 1075px;
}


.contain .contact-us {
    width: 100%;
    height: 423px;
    background: #fff;
    text-align: center;
}

.contain .contact-us .contact-title {
    padding-top: 120px;
}

.contain .contact-us .contact-title h2 {
    font-size: 28px;
    height: 28px;
    line-height: 28px;
    color: #333;
}

.contain .contact-us .contact-text {
    padding-top: 80px;
    color: #666666;
    font-size: 16px;
}

.contain .contact-us .contact-text .email {
    margin-top: 10px;
}

/*css 屏幕判断 大于1200px*/
@media screen and (min-width: 1200px) {
    .home .containner {
        width: 1200px;
        margin: 0 auto;
    }
}