
.ecicon {
    background: url("../../images/product/installment/icon.png") no-repeat;
}
/* baner */
.swipecot {
    width: 100%;
    /*height: 570px;*/
}
.swpimg1 {
    width: 100%;
    height: 600px;
    background: url("../../images/product/installment/installmentBg.png") no-repeat center top;
    display: inline-block;
}
.swpimg1 .w1180{
    margin-top: 260px;
    color: #fff;
}
.swpimg1 .w1180 h1{
    font-size: 60px;
    position:relative;
    margin-bottom: 55px;
    font-family: 'MicrosoftYaHei';
    height: 60px;
}
.swpimg1 .w1180 h1:after{
    content: '';
    position: absolute;
    width: 58px;
    height: 2px;
    background: #fff;
    bottom: -23px;
    left: 0;
}
.swpimg1 .w1180 li{
    font-size: 20px;
    line-height: 40px;
}

.tick{
    display: inline-block;
    width: 18px;
    height: 14px;
    background: url("../../images/product/installment/icon.png") no-repeat center top;
    background-position: 0 0;
    margin-right: 16px;
    margin-left: 3px;
}

.indextit {
    padding: 79px 0 65px;
    font-weight: normal;
    display: flex;
    flex-direction: column;
}
.indextit span:nth-child(1):after{
    content: "";
    position: absolute;
    width: 68px;
    height: 4px;
    background-color: #4990e7;
    bottom: -24px;
    left: calc(50% - 38px);
}
.riskControl .indextit span:nth-child(1):after{
    background-color: #fff;
}
.painspottAndSolution .indextit span:nth-child(1):after{
    background-color: #fff;
}
.indextit span:nth-child(1){
    position: relative;
    font-family: 'MicrosoftYaHei-Bold';
    text-align: center;
    font-size: 36px;
    color: #333333;
}
.indextit span:nth-child(2){
    text-align: center;
    font-size: 14px;
    line-height: 36px;
    color: #999999;
}

.ptit {
    position: relative;
    padding-bottom: 15px;
    font-size: 20px;
    line-height: 1;
    color: #333333;
}
.pcot {
    font-size: 16px;
    line-height: 24px;
    color: #888888;
    width: 520px;
}
.ptit:before {
    content:'';
    display: inline-block;
    position: absolute;
    right: 40px;
    top: 25px;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:8px solid #cccccc;
}


.pdecot {
    margin: 0 auto;
    padding-bottom: 60px;
    width: 980px;
    font-size: 14px;
    line-height: 22px;
    color: #999999;
}
.prodcot-description{
    display: flex;
    flex-direction: column;
    line-height: 28px;
}

.clearfix{
    display: inline-block;
    flex-wrap:nowrap;
    display: flex;
}

.introduce {
    background: url("../../images/product/installment/introduceBg.png") no-repeat center top;
    height: 644px;
}
.introduce .left{
    width: 559px;
    margin-left: 33px;
}
.introduce .left .title{
    padding-top: 91px;
    position: relative;
    font-family: 'MicrosoftYaHei-Bold';
    font-size: 38px;
    color: #333333;
}

.introduce .left .title:after{
    content: "";
    position: absolute;
    width: 68px;
    height: 4px;
    background-color: #4990e7;
    bottom: -24px;
    left: 0;
}
.introduce .left .content{
    margin-top: 102px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    color: #333333;
}
.introduce .orange{
    color: #ff730b;
}
.introduction .introductionText{
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    color: #333333;
}
.businessProcess .businessText{
    font-family: 'MicrosoftYaHei';
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    color: #333333;
}
.businessProcess img{
   margin:58px auto;
    display: block;
}

.moblcomer {
    display: flex;
    justify-content: space-between;
}
.moblcomer li {
    width: 221px;
    height: 294px;
    border-radius: 8px;
    box-shadow: -2px 0px 8px 0px
    rgba(185, 185, 185, 0.28);
    display: inline-block;
}

.moblcomer li .saftyIcon {
    display: inline-block;
    width: 52px;
    height:68px;
    background: url("../../images/product/installment/saftyIcon.png") no-repeat;
    margin-top: 54px;
}
.moblcomer li:hover i.saftyIcon{
    -webkit-animation: 1s ease 1 0s both;
    -moz-animation: 1s ease 1 0s both;
    -ms-animation: 1s ease 1 0s both;
    animation: 1s ease 1 0s both;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -ms-animation-name: swing;
    animation-name: swing;
}
.moblcomer li .mbmeic1 {
    background-position: -3px -5px;
}
.moblcomer li .mbmeic2 {
    background-position: -248px -5px;
}
.moblcomer li .mbmeic3 {
    background-position: -493px -5px;
}
.moblcomer li .mbmeic4 {
    background-position: -738px  -5px;
}
.moblcomer li .mbmeic5 {
    background-position: -983px  -5px;
}
.moblcomer h6 {
    padding: 20px 0;
    line-height: 36px;
    font-family: 'MicrosoftYaHei';
    font-size: 22px;
    font-weight: bold;
    color: #333333;
}
.moblcomer p {
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    color: #777777;
    word-break:break-all;
    line-height: 20px;
}
.prodcot {
    padding-bottom: 110px;
    background: #f4f6f9;
}

.caseptinfo {
    width: 1260px;
    margin: 0 auto;
}

.riskControl{
    height: 877px;
    background: url("../../images/product/installment/riskControl.png") no-repeat;
    background-position:center center
}
.white{
    color: #fff;
}
.riskControl .mobileList li{
    display: flex;
    flex-direction: column;
    width: 330px;
    text-align: center;
}
.riskControl .mobileList li .borderBox {
    position: relative;
    display: inline-block;
    width:113px;
    height:113px;
    border-radius: 50%;
    border: 1px solid #fff;
}
.riskControl .mobileList li .mobileIcon {
    display: inline-block;
    width:51px;
    height:51px;
    background-position: -2px -156px;
    position: absolute;
    top: 31px;
    left: 31px;

}
.riskControl .mobileList li .mbmeic1 {
    background-position: -24px -6px;
}
.riskControl .mobileList li .mbmeic2 {
    background-position: -89px -6px;
}
.riskControl .mobileList li .mbmeic3 {
    background-position: -156px -6px;
}
.toRight{
    display: inline-block;
    width: 51px;
    height: 26px;
    background: url("../../images/product/installment/icon.png") no-repeat;
    background-position:-228px -7px;
    position: relative;
    margin-top: 50px;
}
.toRight:after{
    content: "";
    position: absolute;
    width: 3px;
    height: 157px;
    background-color: #ffffff;
    opacity: 0.1;
    top: 110px;
    left: 50%;
}
.mobileList li .borderBox{
    margin: 0 auto;

}
.mobileList h6 {
    padding: 15px 0;
    line-height: 28px;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    position: relative;
}
.mobileList p {
    font-size: 14px;
    color: #fff;
    text-align: left;
    word-break:break-all;
    line-height: 24px;
}
.mobileList {
    display: flex;
    justify-content: space-evenly;
}
.mobileIcon{
    background: url("../../images/product/installment/icon.png") no-repeat;
}
.structure{
    height: 1224px;
    width: 100%;
    position: relative;
    background-color: #f9f9f9;
}
.structure .title{
    display: inline-block;
    width: 213px;
    height: 204px;
    text-align: center;
}
.structure li{
    display: flex;
}
.structure .title{
    color: #ffffff;
    font-size: 18px;
}
.structure .title p{
    padding-top: 133px;
}
.structure ul li:nth-child(1) .title{
    background: url("../../images/product/installment/interface1.png") no-repeat;
}
.structure ul li:nth-child(2) .title{
    background: url("../../images/product/installment/interface2.png") no-repeat;
}
.structure ul li:nth-child(3) .title{
    background: url("../../images/product/installment/interface3.png") no-repeat;
}
.structure ul li:nth-child(3) .title p{
    padding-top: 196px;
}
.structure .content {
    width: calc(100% - 213px);
    padding: 30px  18px;
}
.structure .content li{
    width: 165px;
    height: 45px;
    display: inline-block;
    margin-top: 18px;
    margin-left: 17px;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
    color: #666666;
}
.structure .w1180>ul>li{
    background-color: #ffffff;
    margin-bottom: 30px;
}
.structure .w1180>ul>li.active{
    box-shadow: 0px 0px 10px 0px
    rgba(189, 189, 189, 0.61);
}
.structure ul>li:nth-child(1) .content li{
    border: 1px solid #99edf9;
}
.structure ul>li:nth-child(2) .content li{
    border: 1px solid #ffe4af;
}
.structure ul>li:nth-child(3) .content li{
     border: 1px solid #d0e2fc;
 }

.mobileSwiper{
    width: 1199px;
    height: 425px;
    background-color: #ffffff;
    box-shadow: 0px 3px 24px 0px
    rgba(210, 213, 213, 0.35);
    /*border-radius: 16px;*/
    display: inline-block;
    position: absolute;
    left: calc(50% - 600px);
    top: -297px;
}
.mobileSwiper i{
    display: inline-block;
    margin: 30px;
    width: 1140px;
    height: 365px;
    background: url("../../images/product/installment/table.png") no-repeat;
}

.content .card li{
    text-align: center;
    display: inline-block;
    border: none;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #333333;
    width: 112px;
    height: 150px;
    background-color: #e6e5e5;
    margin-right: 8px;
    padding-top: 18px;
}
.painspottAndSolution{
    height: 877px;
    background: url("../../images/product/installment/painspottAndSolution.png") no-repeat;
    background-position:center center
}
.painspottAndSolution h5 span{
    display: inline-block;
    background: linear-gradient(to right, #fff 0%,#fff 50%,#ff730b 50%,#ff730b 100%);
    color: transparent; //关键
    font-size: 20px;
    -webkit-background-clip: text; //关键
}
.painspottAndSolution .w1180{
    display: flex;
    flex-direction: row;
    color: #fff;
    margin-top: 20px;
    justify-content: center;
}
.contentBox{
    width: 464px;
}
.contentBox .title{
    display: inline-block;
    width: 134px;
    height: 38px;
    border-radius: 5px;
    font-size: 18px;
    line-height: 38px;
    font-family: MicrosoftYaHei;
}
.contentBox dd h6{
    font-family: MicrosoftYaHei-Bold;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    padding-top: 70px;
    padding-bottom: 21px;
}
.contentBox dd p{
    font-family: MicrosoftYaHei;
    font-size: 16px;
    height: 73px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
}
.painspot{
    width: 27px;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 14px 0 9px;

}
.solutionIcon{
    width: 22px;
    height: 28px;
    display: inline-block;
    margin: 0 10px 0 12px;
    vertical-align: middle;
}
.consult{
    text-align: center;
    height: 195px;
    background: url("../../images/product/installment/consult.png") no-repeat;
}
.consult p{
    padding-top: 57px;
    padding-bottom: 32px;
    font-size: 24px;
    line-height: 30px;
    color: #333333;
}
.consult a{
    display: inline-block;
    width: 147px;
    height: 42px;
    line-height: 42px;
    background-color: #ff730b;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
}
.feature h6{
    font-size: 30px;
    color: #333333;
    font-weight: normal;
    font-stretch: normal;
    text-align: center;
    padding: 0 0 18px 0;
}
.feature .intro{
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    color: #333333;
}
.feature1 .content{
    width: 930px;
    height: 181px;
    margin: 60px auto 81px;
    background: url("../../images/product/installment/feature1.png") no-repeat;
    background-position:center center;
}
.feature2{
    background: url("../../images/product/installment/feature2.png") no-repeat;
    height: 562px;
    background-position:center center;

}
.feature2Content{
    background: url("../../images/product/installment/feature2c.png") no-repeat;
    height: 339px;
    background-position:center center;
    margin-top: 72px;
}
.feature2 h6{
    padding-top: 83px;
    color: #fff;
}
.feature2 .intro{
    color: #fff;
}
.feature2 img{
    width: 496px;
}
.feature3 h6{
    padding-top: 83px;
}
.feature3 .computer{
    width: 501px;
    height: 410px;
    background: url("../../images/product/installment/computer.png") no-repeat;
    background-position:center center;
    position: relative;
}
.feature3  .bubble{
    background: url("../../images/product/installment/icon.png") no-repeat;
    color: #fff;
    font-size: 16px;
    position: absolute;
    line-height: 50px;

}
.feature3  .bubble1{
    width: 298px;
    height: 50px;
    top: 50px;
    left: -310px;
    background-position:-6px -75px;
}

.feature3  .bubble2{
    width: 298px;
    height: 50px;
    top: 50px;
    right: -310px;
    background-position:-11px -145px;
}
.feature3  .bubble3{
    width: 239px;
    height: 70px;
    top: -130px;
    left: -80px;
    background-position:-335px -75px

}
.feature3  .bubble4{
    width: 239px;
    height: 70px;
    top: -96px;
    right: -90px;
    background-position:-335px -145px;

}
.feature4{
    height: 539px;
    background-color: #f9faff;
}
.feature4 h6{
    padding-top: 81px;
}
.feature4 ul{
    margin-top: 110px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.feature4 li{
    width: 262px;
    height: 242px;
    background-color: #ffffff;
    box-shadow: 0px 0px 7px 3px
    rgba(183, 210, 253, 0.28);
    text-align: center;
    color: #333333;
    position: relative;
}
.feature4 li i{
    width: 94px;
    height: 94px;
    border: 3px  solid  transparent;
    display: inline-block;
    position: absolute;
    top: -47px;
    left: 84px;
    background-color: #fff;
    border-radius: 50%;
}
.feature4 li:nth-child(1) i{
    border-color: #40b7f4;
    background-position:18px -193px;
}
.feature4 li:nth-child(2) i{
    border-color: #f89d1b;
    background-position:-52px -195px;
}
.feature4 li:nth-child(3) i{
     border-color: #14c1d6;
    background-position:-198px -200px;
 }
.feature4 li:nth-child(4) i{
    border-color: #1fc64f;
    background-position:-121px -200px;
}
.feature4 li .title{
    font-family: MicrosoftYaHei-Bold;
    font-size: 16px;
    padding: 90px 0 20px;
}
.feature4 li .text{
    display: inline-block;
    width: 209px;
    font-family: MicrosoftYaHei;
    font-size: 16px;
}
.feature4 li.active{
    color: #fff
}
.feature4 li:nth-child(1).active{
    background-color: #40b7f4;
}
.feature4 li:nth-child(2).active{
    background-color: #f89d1b;
}
.feature4 li:nth-child(3).active{
    background-color: #14c1d6;
}
.feature4 li:nth-child(4).active{
    background-color: #1fc64f;
}

.feature5 h6{
    padding-top: 83px;
}
.feature5 .phone{
    width: 827px;
    height: 448px;
    background: url("../../images/product/installment/phone.png") no-repeat;
    background-position:center center;
    position: relative;
}
.feature5  .bubble{
    background: url("../../images/product/installment/icon.png") no-repeat;
    color: #fff;
    font-size: 16px;
    position: absolute;
    line-height: 50px;
    width: 91px;
    height: 130px;
}
.feature5  .bubble1{
    top: 122px;
    left: 360px;
    background-position:-6px -300px;
}
.feature5  .bubble2{
    top: 122px;
    left: 360px;
    background-position:-115px -300px;
}
.feature5  .bubble3{
    top: 122px;
    left: 360px;
    background-position:-223px -300px

}
.feature5  .bubble4{
    top: 122px;
    right: 375px;
    background-position:-334px -300px

}
.feature5  .bubble5{
    top: 122px;
    right: 375px;
    background-position:-424px -300px

}
.feature5  .bubble6{
    top: 123px;
    right: 375px;
    background-position:-549px -300px

}
.feature5  .origin1{
    top: 277px;
    left: 0px;
    transition: all .2s linear;
}
.feature5  .origin2{
    top: 85px;
    left: -45px;
    transition: all .4s linear;
}
.feature5  .origin3{
    top: -93px;
    left: 56px;
    transition: all .5s linear;
}
.feature5  .origin4{
    top: -93px;
    right: 56px;
    transition: all .3s linear;
}
.feature5  .origin5{
    width: 118px;
    top: 85px;
    right: -110px;
    transition: all .4s linear;
}
.feature5  .origin6{
    top: 277px;
    right: 0;
    transition: all .5s linear;
}
.feature6{
    background: url("../../images/product/installment/feature6.png") no-repeat;
    background-position:center center;
    height: 738px;
}
.feature6 h6{
    padding-top: 80px;
}
.feature6 img{
    margin-top: 61px;
    transition: margin .2s linear;
}
.feature6  .moveMargin{
    margin-top: 41px;
    transition: margin .2s linear;
}


.example{
    height: 949px;
    background-color: #f8faff;
}
.example .top{
   display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 1120px;
}
.example .top li{
    width: 400px;
    text-align: center;
}
.example .top li p{
    font-size: 18px;
    line-height: 72px;
    display: none;
}
.example .top li.active{
   border-bottom: 2px solid #1076fa;
}
.example .top i{
    width: 120px;
    height: 79px;
    display: inline-block;
}
.example .top i{
    background-position:8px -497px;
}
.example .contentBox{
    width: 1200px;
    height: 560px;
    background-color: #ffffff;
    box-shadow: -2px 0px 8px 0px
    rgba(185, 185, 185, 0.28);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    position: relative;
}
.example .contentBox #contentImg{
    margin: 0 auto;
    width: 1140px;
    height: 451px;
    background-position:center center;
}
.example .contentBox .content2{
    background: url("../../images/product/installment/example2.png") no-repeat;
}
.example .contentBox .content1{
    background: url("../../images/product/installment/example1.png") no-repeat;
}
.example .contentBox .content3{
    background: url("../../images/product/installment/example3.png") no-repeat;
}
.example .contentBox li.active{
    display: inline-block;
}
.contentBox i{
    width: 78px;
    height: 78px;
    border-radius: 50%;
}
.contentBox .left{
    background-position:-35px -592px;
    transform: rotate(180deg);
    position: absolute;
    left: -46px;
    top: 220px;
}
.contentBox .right{
    background-position:-35px -592px;
    position: absolute;
    right: -46px;
    top: 220px;
}
.canClick{
    background-color: #ff730b;
    cursor: pointer;
}
.cantClick{
    background-color: #d7d5d5;
}
.consultButton{
    position: relative;
    display: inline-block;
    width: 165px;
    height: 42px;
    background-color: #ff730b;
    font-size: 20px;
    color: #ffffff;
    line-height: 42px;
    margin-top: 31px;
    cursor: pointer;
}
.consultButton::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transition: .3s;
    opacity: .3;
    background: #fff;
    color: #fff;
    transform-origin: left;
    transform: scaleX(0);
}

.consultButton:hover::after {
    transform: scaleX(1);
}
.consultButton i{
    display: inline-block;
    float: right;
    width: 42px;
    height: 42px;
    background-position:-118px -610px;
    border-left: 1px solid #fe9f59;
}
.consultButton  span{
    margin-left: 23px;
}

.box8 {
    padding-top: 53px;
    box-sizing: border-box;
    height: 1059px;
    background-color: #f8faff;
}
.titbox {
    display: flex;
    justify-content: space-between;
    margin-top: 53px;
}
.titbox li {
    text-align: center;
    width: 400px;
}
.titbox li .tlicn1{
    display: inline-block;
    width:62px;
    height: 54px;
    background-position:-21px -521px
}
.titbox li .tlicn2{
    display: inline-block;
    width:35px;
    height: 56px;
    background-position:-157px -519px
}
.titbox li .tlicn3{
    display: inline-block;
    width:55px;
    height: 55px;
    background-position:-272px -520px
}
.titbox li p {
    padding: 20px 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: #333333;
}
.titbox li.active {
    border-bottom: 2px solid #1076fa;
}
.ulconten {
    margin: 0 auto;
    position: relative;
    width: 1200px;
    height: 560px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0px 2px 8px 0px
    rgba(185, 185, 185, 0.28);
}
.ulconten .swpbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    text-align: center;
    background: #fff;
}
.ulconten .swpbox:nth-child(2) {
    padding-top: 56px;
}
.ulconten .swpbox.active {
    background: #fff;
    z-index: 99;
}
.swiper-button-next, .swiper-button-prev {
    width: 79px;
    height: 78px;
    font-size: 57px;
    color: #fff;
    background-color: #d7d5d5;
    border-radius: 50%;
    outline: none;
    background-image: none;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #ff730b;
}
.w1200 {
    width: 1200px;
    margin: 0 auto;
}

.skillFramework{
    background: url("../../images/product/installment/jiagouBg.png") no-repeat;
    /*height: 1420px;*/
    background-position:center bottom;
    text-align: center;
}
.framework{
    box-shadow: -2px 0px 21px 0px
    rgba(45, 35, 80, 0.28);
    width: 1200px;
    margin-bottom: 90px;
}







