.indexservice { width: 100%; position: relative; font-size: 0; background: linear-gradient(to bottom, #e0e6f2, #f0f3f9, #e0e6f2 ) }

.indexservice .indexcon { padding: 75px 0; }

.indexservice .left {   margin-right: 1.5%; display: inline; float: left }

.indexservice .left .title { background: url(../picture/service_icon.png) no-repeat; padding-left: 105px; height: 80px; margin-bottom: 30px; }

.indexservice .left .title h1 { font-size: 48px; color: #464646; line-height: 1.2; }

.indexservice .left .title p { font-size: 18px; color: #666; text-transform: uppercase; line-height: 1.5; }

.indexservice .left .service { width: calc(100% + 20px); margin-right: -20px; }

/*(width-(padding+border)*2-margin)*/
/*.indexservice .left .service li{width:calc(100% / 3 - 20px); border:1px solid #f0f0f0; background:#fff; padding:0 10px; margin-right:20px; margin-top:20px; height:185px; display:inline-block; text-align:center;transition:all 0.4s; }*/

.indexservice .left .service li { width: calc(27.5% - 2px); border: 1px solid #f0f0f0; background: #fff; padding: 0 10px; margin-left: 2.5%; margin-top: 20px; height: 185px; display: inline-block; text-align: center; transition: all 0.4s; }

.indexservice .left .service li:nth-child(1),
.indexservice .left .service li:nth-child(4) { margin-left: 0 }

.indexservice .left .service li a { display: block; width: 100%; text-align: center }

.indexservice .left .service li span { margin: 30px auto 0; width: 63px; height: 63px; display: block; }

.indexservice .left .service li .bg1 { /*background: url(	../picture/service_icon1.png) no-repeat center;*/
background: url(	../picture/service_icon7s.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li .bg2 { background: url(	../picture/service_icon8.png) no-repeat center; /*background: url(	../picture/service_icon2.png) no-repeat center;*/
transition: background 0.3s; }

.indexservice .left .service li .bg3 { background: url(	../picture/service_icon3.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li .bg4 { background: url(	../picture/service_icon4.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li .bg5 { background: url(	../picture/service_icon5.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li .bg6 { background: url(	../picture/service_icon6.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li h2 { font-size: 16px; color: #333; padding-top: 25px; line-height:1.8 transition: color 0.3s;
}

.indexservice .left .service li p { color: #bbb; font-size: 12px; line-height: 1.4; text-transform: uppercase; transition: color 0.3s }

.indexservice .left .service li:hover { background: #45991f; transition: 0.5s; }

.indexservice .left .service li:hover p { color: #fff }

.indexservice .left .service li:hover h2 { color: #fff }

.indexservice .left .service li:hover .bg1 { /*background: url(	../picture/service_icon1s.png) no-repeat center;*/
background: url(	../picture/service_icon7.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li:hover .bg2 { background: url(	../picture/service_icon8s.png) no-repeat center; /*background: url(	../picture/service_icon2s.png) no-repeat center;*/
transition: background 0.3s; }

.indexservice .left .service li:hover .bg3 { background: url(	../picture/service_icon3s.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li:hover .bg4 { background: url(	../picture/service_icon4s.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li:hover .bg5 { background: url(	../picture/service_icon5s.png) no-repeat center; transition: background 0.3s; }

.indexservice .left .service li:hover .bg6 { background: url(	../picture/service_icon6s.png) no-repeat center; transition: background 0.3s; }

/*.indexservice .left .service li:after{ content:""; position: absolute;top: 0; bottom: 0; left: 0;z-index: -1; background: #2a68cc;transition: 0.6s linear; }
.indexservice .left .service li:hover:after{ width:100%; height:100%}*/

.indexservice .right {   display: inline-block }

.indexservice .right img { width: 83%;
    padding: 21% 20% 0 20%;}
.indexcon {
    width: 79%;
    margin: 0 auto;
}
.bingpaijuzhong{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}




@media screen and (max-width:1200px) {

    .shangbianju{
        padding-top: 23px;
    }

    .indexservice .right { display: none }
    
    .indexservice .left { width: 100%; float: none }
    
    .indexservice .left .title h1 { font-size: 24px; }
    
    .indexservice .left .title p { font-size: 12px; }
    
    .indexservice .left .title { background-size: 45px; background-position-y: 7px; height: auto; padding-left: 55px; margin-bottom: 0; padding-bottom: 20px }
    
    .indexservice .indexcon { padding: 30px 0 }
    
    .indexservice .left .service { width: 100%; margin-right: 0 }
    
    .indexservice .left .service li { width: calc(43% - 2px); margin-left: 0; margin-top: 0; height: 125px; }
    
    .indexservice .left .service li p { display: none }
    
    .indexservice .left .service li .bg1 { background: url(../picture/service1.png) no-repeat center }
    
    .indexservice .left .service li .bg2 { background: url(../picture/service2.png) no-repeat center }
    
    .indexservice .left .service li .bg3 { background: url(../picture/service3.png) no-repeat center }
    
    .indexservice .left .service li .bg4 { background: url(../picture/service4.png) no-repeat center }
    
    .indexservice .left .service li .bg5 { background: url(../picture/service5.png) no-repeat center }
    
    .indexservice .left .service li .bg6 { background: url(../picture/service6.png) no-repeat center }
    
    .indexservice .left .service li span { width: 50px; height: 50px; background-size: 100% !important; margin: 20px auto 0 }
    
    .indexservice .left .service li h2 { font-size: 14px; padding-top: 15px; }
    }