/*公共屬性*/
.wid{
    width: 1200px;
    margin: 0 auto;
    height: inherit;
}
.indexCont h1{
    color: #fff;
    font-size: 44px;
}
.icon{
    background-image: url(../../images/product/chain/socialCon/icon.png);
    background-repeat: no-repeat;
}
.txt{
    font-size: 36px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
    text-align: center;
}

.tit{
    padding:40px 123px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #666666;
    text-align: center;
}
.matterCon .title{
    font-size: 36px;
    color: #333333;
    padding-bottom: 40px;
    text-align: center;
    padding-top: 80px;
}
/*banner*/
.banner{
    height: 550px;
    width: 100%;
    color: #fff;
    background-image: url(../../images/product/chain/socialCon/banner.png);
}
.bannerCont{
    position: relative;
}
.bannerL{
    float: left;
    padding-top: 253px;
}
.bannerL p{
    font-size: 16px;
    margin: 29px 0 57px;
}
.bannerL a{
    text-decoration: none;
}
.bannerL .more{
    font-size: 18px;

    width: 160px;
    height: 48px;
    border-radius: 4px;
    border: solid 1px #ffffff;
    text-align: center;
    line-height: 48px;
    cursor:pointer;
    color:#fff;
}
.bannerR{
    background-image: url(../../images/product/chain/socialCon/phone.png);
    width: 450px;
    height: 550px;
    position:absolute;
    top: 150px;
    right: 0;
}
/* matter1 */
.matter1{
    height: 760px;
    margin-top: 128PX;
}
.matterCon1{
    padding: 20PX;

}
.matterCon1{
    padding: 20PX;
}


.client{
    width: 1200px;
    margin: 0 auto;
}
.client table tr td{
    padding: 40px;
    width: 320px;
    height: 168px;
    background-color: #fff;
    box-shadow: 2px 4px 16px 0px
    rgba(207, 205, 205, 0.56);
    border-radius: 8px;
}

/*.client table tr td:hover{
	background-color: #fff;
	box-shadow: 0px 2px 20px 0px
		rgba(17, 3, 52, 0.2);
		cursor: pointer;
}*/
.client table{
    border-collapse:separate;
    border-spacing: 48px 20px;
}
.client table h2{
    font-size: 16px;
    text-align: center;
    padding-bottom: 29px;
}
.client table .a1,
.client table .a2,
.client table .a3{
    width: 80px;
    height: 80px;
    text-align: center;
    margin:0 auto 20px;
}
.client table .a2{
    background-position: -80px 0;
}
.client table .a3{
    background-position: -160px 0;
}
.client table p{
    line-height: 26px;
    letter-spacing: 0px;
    color: #666666;
    font-size: 14px;
    text-align: justify;
}

/* matter2 */
.matter2{
    background-image: url(../../images/product/chain/socialCon/back.png);
    height: 840px;
}
.matterCon2 .bott{
    display: flex;
    justify-content: space-between;
    padding:28px 58px;
}
.matterCon2 .matterL{
    width: 401px;
    height: 520px;
    background-image: url(../../images/product/chain/socialCon/zixun.png)
}
.matterL3{
    width: 290px;
    height: 580px;
    background-image: url(../../images/product/chain/socialCon/redBook.png);
    margin-top:-60px;
}
.matterCon2 .matterR{
    float: right;
    width: 56%;
}

.matterR ul li{
    height: 80px;
    padding: 18px 73px 18px 29px;
}
.matterR ul li:hover{
    background: #fff;
    box-shadow: 2px 4px 16px 0px
    rgba(203, 184, 184, 0.5);
}
.matterR ul li .b1,
.matterR ul li .b2,
.matterR ul li .b3,
.matterR ul li .b4{
    width: 34px;
    height: 36px;
    float: left;
}
.matterR ul li .b1{
    background-position: 0 -80px;
}
.matterR ul li .b2{
    background-position: -34px -80px;
}
.matterR ul li .b3{
    background-position: -69px -80px;
}
.matterR ul li .b4{
    background-position: -102px -80px;
}
.matterR ul li .nr{
    width: 90%;
    float: right;
}
.matterR ul li .title{
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    padding-bottom: 13px;
}
.matterR ul li p{
    color: #666666;
    font-size: 14px;
    line-height: 25px;
}

/*.matterCon3*/
.matterCon3{
    height: 840px;
    margin-top: 104px;
}
.matterCon2 .matterR2{
    float: right;
    width: 59%;
}
.matterCon2 .bott2{
    padding:28px 128px 28px 108px !important;
}
.matterR2 ul li{
    height: 70px;
    padding: 18px 0 18px 29px;
}
.matterR2 ul li:hover{
    background: #fff;
    box-shadow: 2px 4px 16px 0px
    rgba(203, 184, 184, 0.5);
}
.matterR2 .c1,
.matterR2 .c2,
.matterR2 .c3,
.matterR2 .c4{
    width: 32px;
    height: 36px;
    float: left;
}
.matterR2 .c1{
    background-position: 0 -117px;
}
.matterR2 .c2{
    background-position: -33px -117px;
}
.matterR2 .c3{
    background-position: -65px -117px;
}
.matterR2 .c4{
    width: 34px;
    background-position: -99px -117px;
}
/*.matterCon4*/
.matter4{
    height: 800px;
    background-image: url(../../images/product/chain/socialCon/redBack.png)
}
.matter4 .matterCon h2{
    font-size: 36px;
    padding:90px 0 50px;
    color: #ffffff;
    text-align: center;
    font-weight: normal;
}
.matter4>title{
    font-size: 36px;
    color: #ffffff;
}
.matter4 .change{
    width: 596px;
    height: 50px;
    margin: 0 auto;
    border-radius: 8px;
    text-align: center;
    display:flex;
    justify-content: space-between;
    padding-bottom: 57px;

}
.matter4 .change>div{cursor: pointer}
.matter4 .change .infant{
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    width: 50%;
    line-height: 50px;
    border-radius: 8px 0px 0px 8px;
    border: solid 1px #ffffff;
}
.matter4 .change .health{
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    width: 50%;
    line-height: 50px;
    border-radius: 0px 8px 8px 0px;
    border: solid 1px #ffffff;
}
.matter4 .change .cur {
    color: #f84633;
    background: #fff;
}
.matter4 .intro{
    width: 961px;
    margin: 0 auto;
    display:flex;
    justify-content: space-between;
    height: 443px;

}
.matter4 .intro .introL,
.matter4 .intro .introR{
    width: 256px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    height: 90%;
}
.matter4 .intro .introL .title,
.matter4 .intro .introR .title{
    font-size: 16px;
    color: #ffffff;
}
.matter4 .intro .list{
    height: 72px;

}
.matter4 .intro .list p{
    line-height: 24px;
    padding-top: 10px;
    color: #ffffff;

}

.matter4 .intro .introR .list{
    float: right;
}
.matter4 .intro .introL .list .img,
.matter4 .intro .introR .list .img{
    width: 20px;
    height: 72px;
    float: left;
}
.matter4 .intro>img{
    width: 242px;
    height: 443px;
}
.matter4 .title1{
    font-size: 16px;
    color: #ffffff;
}
/* matter5 */
.matter5{
    background: #f7f7f9;
}
.matter5 .matterCon{
    width: 1080px;
    margin: 0 auto;
}
.matter5 .matterCon>.title{
    font-size: 36px;
    color: #333333;
    text-align: center;
    padding-top: 109px;
}
.matter5 .matterCon>.img{
    height: 450px;
    width: 100%;
    text-align: center;
}
/* matter6 */
.matter6{
    height: 880px;
    background-image: url(../../images/product/chain/socialCon/liveBack.png)
}
.matter6 .matterCon{
    width: 883px;
    margin:0 auto;
}
.matter6 .intro{
    width: 883px;
    margin:46px auto 0;

}
.matter6 .title{
    font-size: 36px;
    color: #333333;
    text-align: center;
    padding: 98px 0 49px;
}
.matter6 p{
    font-size: 14px;
    line-height: 24px;
    color: #666666;
}
.matter6 .img{
    float: left;
    width: 264px;
    height: 574px;
}
.matter6 .introR{
    width: 57%;
    position: relative;
    float: right;
    height: 574px;
    margin-top: 20px;
}
.matter6 .introR ul{

}
.matter6 .introR ul li{
    background: #fff;
    width: 280px;
    height: 156px;
    margin-bottom: 20px;
    padding:18px 26px;
    box-shadow: 0px 10px 18px 0px
    rgba(94, 93, 92, 0.16);
    border-radius: 8px;
}
.matter6 .introR ul li:nth-child(2){
    /*position: absolute;
    right: 0;*/
    float: right;
    margin-right: -130px;
    margin-top: -50px;
}
.matter6 .introR ul li:nth-child(3){
    position: absolute;
    left:  20px;
    bottom: 30px;
}
.matter6 .introR ul li .headline{
    width: 252px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-image: linear-gradient(90deg,
    #fe4c5a 0%,
    #fa6c36 100%);
    border-radius: 8px;
    font-size: 16px;
    color: #ffffff;
    margin-left: -38px;
    margin-bottom: 20px;
}

/* matter7 */
.matter7{
    height: 800px;
    background: #f7f7f9;
}
.matter7 .matterCon{

}
.matter7 .box{
    text-align: center;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
}
.matter7 .box span{
    display:inline-block;
    width: 240px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    background-color: #ffffff;
    box-shadow: 2px 4px 16px 0px
    rgba(232, 232, 232, 0.5);
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
}

/* matter8 */
.matter8{
    height: 540px;
    background-image: url(../../images/product/chain/socialCon/red_black.png);
    background-position: center center;
}
.matter8 .matterCon{

}
.matter8 .title{
    color: #fff;
}
.matter8 .clas{
    font-size: 30px;
    color: #ffffff;
}
.matter8 .clas{
    display:flex;
    justify-content: space-around;
    width: 500px;
    margin-left: 380px;
    padding-bottom: 40px;
}


.matter8 .down{
    float: left;
}
.matter8 .up{
    float: right;
}
.matter8 .down,
.matter8 .up{
    padding:18px 48px 18px 20px;
    text-indent: 15px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #ffffff;
    font-size: 14px;
    line-height: 19px;
}
.matter8 .up2{
    padding:18px 20px 18px 20px;
}

.matter8 .cent{
    width: 108px;
    height: 108px;
    background-color: #fb6340;
    box-shadow: 0px 2px 27px 0px
    rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 108px;
    border-radius: 50%;
    font-size: 56px;
    color: #fff;
    margin: 50px auto 0;
}
.matter8 .list2{
    width: 790px;
    margin: 0 auto;
    margin-top: -15px;
}
.matter8 .list{
    margin-bottom: -55px;
    padding-top: 85px;
}
.matter8 .img1,
.matter8 .img2,
.matter8 .img3,
.matter8 .img4{

    float: left;
}

.matter8 .img1{
    width: 25px;
    height: 26px;
    background-position: 0 -301px;
}
.matter8 .img2{
    width: 26px;
    height: 26px;
    background-position: -26px -301px;
}
.matter8 .img3{
    width: 25px;
    height: 26px;
    background-position: 0 -301px;
}
.matter8 .img4{
    width: 26px;
    height: 26px;
    background-position: -26px -301px;
}

/* matter9 */
.matter9{
    padding-bottom: 116px;
    background: #f7f7f9;
    padding-top: 10px;
}
.matter9 ul{
    display:flex;
    justify-content: space-around
}
.matter9 ul li {
    margin-right: 17px;
}
.matter9 ul li .top{
    width: 100px;
    height: 148px;
    background: #e8e8ea;
    border-radius: 4px;
}
.matter9 ul li .top p,
.matter9 ul li .bottom p{
    padding:21px 9px;
    text-align: justify;
}
.matter9 ul li .top .head{
    font-size: 14px;
    text-align: center;
    line-height: 48px;
    height: 48px;
    color: #ffffff;
    background-color: #666666;
    border-radius: 4px;
}
.matter9 ul li .bottom{
    width: 100px;
    height: 148px;
    background: #f7edef;
    border-radius: 4px;
}
.matter9 ul li .bottom .head{
    font-size: 14px;
    text-align: center;
    line-height: 48px;
    height: 48px;
    color: #ffffff;
    background-image: linear-gradient(90deg,
    #fe4c5a 0%,
    #fa6c36 100%);
    border-radius: 4px;
}
.matter9 ul li:first-child {
    width: 160px;
}
.matter9 ul li:first-child .headline{
    width: 160px;
    height: 148px;
    text-align: center;
    line-height: 148px;
    font-size: 22px;
    color: #ffffff;
    background-color: #666666;
    border-radius: 4px;
}
.matter9 ul li .circle{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    line-height: 62px;
    text-align: center;
    background-color: #ffd562;
    box-shadow: 0px 11px 14px 0px
    rgba(255, 115, 83, 0.39);
    margin: 17px auto;
}

/* matter10 */
.matter10{
    height: 600px;
    background-image: url(../../images/product/chain/socialCon/black02.png);
    margin-top: 0;
}
.matter10 .matterCon1{
    padding-top: 90px;
}
.client10 table tr td{
    border-radius: 0;
    padding:39px 32px;

}
.client10  table{
    border-collapse:separate;
    border-spacing:30px 20px !important;
}
.client10 table h2{
    padding-bottom: 15px;
}
.client10 .d1{
    width: 39px;
    height: 38px;
    margin: 0 auto 30px;
    background-position: 0px -153px;
}
.client10 .d2{
    width: 39px;
    height: 38px;
    margin: 0 auto 30px;
    background-position: -40px -153px;
}
.client10 .d3{
    width: 35px;
    height: 38px;
    margin: 0 auto 30px;
    background-position: -78px -153px;
}
.client10 .d4{
    width: 36px;
    height: 38px;
    margin: 0 auto 30px;
    background-position: -113px -153px;
}
/*matter11*/
.matter11{
    background-image: url(../../images/product/chain/socialCon/black03.png);
    height: 600px;
    padding-top: 20px;
}
.matter11 .matterCon .title{
    padding-bottom: 20px;
}
.matter11 .matterCon>p{
    font-size: 14px;
    color: #666666;
    text-align: center;
}
.matter11 .list{
    padding-top: 79px;
}
.matter11 .list .top{
    display:flex;
    justify-content: space-between;
    line-height: 100px;
    width: 860px;
}
.matter11 .list .bottom{
    display:flex;
    justify-content: space-between;
    line-height: 100px;
    width: 860px;
    float: right;
    margin-top: 27px;
}
.matter11 .list .top .one,
.matter11 .list .top .two,
.matter11 .list .bottom .three,
.matter11 .list .bottom .four{
    width: 420px;
    height: 100px;
    background-color: #ffd562;
    box-shadow: 0px 10px 19px 0px
    rgba(211, 167, 47, 0.42);
    font-size: 16px;
    color: #333333;
    position: relative;
    font-weight: bold;

}
.matter11 .list .e1{
    width: 40px;
    height: 45px;
    float: left;
    background-position: 2px -190px;
    margin:30px 15px 0 33px;
}
.matter11 .list .e2{
    width: 50px;
    height: 45px;
    float: left;
    background-position: -38px -190px;
    margin:30px 15px 0 33px;
}
.matter11 .list .e3{
    width: 38px;
    height: 45px;
    float: left;
    background-position: -89px -192px;
    margin:30px 15px 0 33px;
}
.matter11 .list .e4{
    width: 38px;
    height: 45px;
    float: left;
    background-position: -127px -192px;
    margin:30px 15px 0 33px;
}
.matter11 .list .top .one:after{
    content: '1';
    font-size: 90px;
    color: #333333;
    opacity: 0.11;
    font-weight: bold;
    position:absolute;
    right: 0px;
    top: 10px;
}
.matter11 .list .top .two:after{
    content: '2';
    font-size: 90px;
    color: #333333;
    opacity: 0.11;
    font-weight: bold;
    position:absolute;
    right: 10px;
    top: 10px;
}
.matter11 .list .bottom .three:after{
    content: '3';
    font-size: 90px;
    color: #333333;
    opacity: 0.11;
    font-weight: bold;
    position:absolute;
    right: 10px;
    top: 10px;
}
.matter11 .list .bottom .four:after{
    content: '4';
    font-size: 90px;
    color: #333333;
    opacity: 0.11;
    font-weight: bold;
    position:absolute;
    right: 10px;
    top: 10px;
}
.matter11 .list img{
    vertical-align:middle;
    padding-right: 8px;
    padding-left: 30px;
}

/*matter12*/
.matter12{
    height: 640px;
    background-image: url(../../images/product/chain/socialCon/black04.png);
    margin-top: 0;
}
.matter12 .txt{
    padding-top: 80px;
}
.matter12 .client{
    width: auto;
}
.matter12 .client table tr td{
    border-radius: 0;
}
.matter12 .client table p{
    text-align: center;
}
.matter12 table{
    border-spacing:20px 20px;
}
.matter12 .client table h2{
    padding-bottom: 15px;
}
.matter12 .f1,
.matter12 .f2,
.matter12 .f3,
.matter12 .f4,
.matter12 .f5{
    width: 64px;
    height: 66px;
    margin: 0 auto 40px;
}
.matter12 .f1{
    background-position: 0 -235px;
}
.matter12 .f2{
    background-position: -63px -237px;
}
.matter12 .f3{
    background-position: -126px -237px;
}
.matter12 .f4{
    background-position: -190px -237px;
}
.matter12 .f5{
    background-position: -254px -237px;
}