@font-face{
    font-family: 'YouSheBiaoTiHei';
    src: url('../fonts/YouSheBiaoTiHei-2.ttf') format('truetype');
}
.banner-main{
    height: calc((100vh - var(--size72)));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../images/service/banner.png);
}
.accrodion-group-main{
    overflow: hidden;
    height: 31.25rem;
}
.accordion {
    clear: both;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
}
.accordion .accordion-li.active{
    background: rgba(16, 98, 255, 0.6);
    z-index: 99999;
}
.accordion .accordion-li {
    float: left;
    color: #333;
    border-right: none;
    overflow: hidden;
    width: 18%;
    height: 100%;
    /*transition: width 0.5s;*/
    position: relative;
    cursor: pointer;
    transition: width 0.5s;
}
.accordion .accordion-li:after{
    content: '';
    /*分割线*/
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: calc((-1 * var(--size25)));
    width: var(--size3);
    height: var(--size50);
    background: #fff;
}
.accordion .accordion-li:last-child:after{
    display: none;
}
.accordion .accordion-img {
    display: block;
    height: 100%;
}
.accordion-title{
    color: #fff;
    font-size: var(--size34);
    font-family: YouSheBiaoTiHei;
    text-align: center;
    position: absolute;
    z-index: 9;
    top: 50%;
    width: 100%;
    line-height: var(--size37);
    height: var(--size40);
    margin-top: calc((-1 * var(--size20)));
}
.accordion-desc{
    width: 100%;
    height: 100%;
    display: none;
}
.flex-column-center{
    padding: 0 10%;
    position: absolute;
    z-index: 99;
    top: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.accordion-desc .desc-title{
    width: 100%;
    color: #fff;
    font-size: var(--size30);
    font-family: YouSheBiaoTiHei;
    text-align: center;
}
.accordion-desc .desc-content{
    color: #fff;
    line-height: var(--size30);
    padding: var(--size20) var(--size60);
    font-size: var(--size18);
}
.accordion-desc .btn-box{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.accordion-desc .btn-box .btn{
    font-size: 1rem;
    width: 50%;
    color: #fff;
    border: 1px solid #FFFFFF;
    background: transparent;
    margin-bottom: var(--size10);
}
.accordion-desc .btn-box .btn:hover{
    background: #fff;
    border-color: #fff;
    color: #1062FF;
}
.charts-main{
    padding: var(--size40) 0;
}
.card-col-3 .layui-card{
    width: calc((100% - var(--size40)) / 3);
    margin-right: var(--size20);
    box-shadow: 0px 0px var(--size20) 0px rgba(27,42,71,0.05);
}
.card-col-3 .layui-card:nth-child(3n){
    margin-right: 0;
}
.charts-main .layui-card-header{
    color: #333333;
    font-size: 18px;
    text-align: center  ;
    background: rgba(16, 98, 255, 0.1);
    height: var(--size50);
    line-height: var(--size50);
}
#chart1,
#chart2,
#chart3{
    width: 100%;
    height: 25rem;
}
.transform-serve-main{
    padding: 2.5rem 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../images/service/banner2.png);
}
.transform-serve-main .content-body{
    justify-content: space-between;
}
.transform-serve-main .mian-title{
    color: #14245D;
}
.transform-serve-main .serve-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 23%;
    margin-bottom: var(--size30);
    background: #fff;
    box-shadow: 0px 0px 20px 6px rgba(38,60,170,0.1);
    border-radius: var(--size20);
    padding: var(--size50) 0;
}
.transform-serve-main .serve-subtitle{
    font-size: 1rem;
}
.transform-serve-main .serve-item:nth-child(1) .serve-title,
.transform-serve-main .serve-item:nth-child(3) .serve-title,
.transform-serve-main .serve-item:nth-child(6) .serve-title,
.transform-serve-main .serve-item:nth-child(8) .serve-title,
.transform-serve-main .serve-item:nth-child(9) .serve-title,
.transform-serve-main .serve-item:nth-child(11) .serve-title{
    color: #3563E9;
}

.transform-serve-main .serve-item:nth-child(1) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(3) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(6) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(8) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(9) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(11) .serve-subtitle{
    color: rgba(53,99,233,0.6);
}
.transform-serve-main .serve-item:nth-child(2) .serve-title,
.transform-serve-main .serve-item:nth-child(4) .serve-title,
.transform-serve-main .serve-item:nth-child(5) .serve-title,
.transform-serve-main .serve-item:nth-child(7) .serve-title,
.transform-serve-main .serve-item:nth-child(10) .serve-title,
.transform-serve-main .serve-item:nth-child(12) .serve-title{
    color: #5EB1FD;
}
.transform-serve-main .serve-item:nth-child(2) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(4) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(5) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(7) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(10) .serve-subtitle,
.transform-serve-main .serve-item:nth-child(12) .serve-subtitle{
    color: rgba(94,177,253,0.6);
}
.transform-serve-main .serve-item .btn{
    font-size: 1rem;
    width: 40%;
    color: #fff;
    border-radius: 6.25rem;
    border: none;
}
.transform-serve-main .serve-item:nth-child(1) .btn,
.transform-serve-main .serve-item:nth-child(3) .btn,
.transform-serve-main .serve-item:nth-child(6) .btn,
.transform-serve-main .serve-item:nth-child(8) .btn,
.transform-serve-main .serve-item:nth-child(9) .btn,
.transform-serve-main .serve-item:nth-child(11) .btn{
    background: linear-gradient( 270deg, #4579F7 0%, #477BF7 15%, #487DF7 34%, #56A8FF 63%, #74C1FF 100%);
}
.transform-serve-main .serve-item:nth-child(2) .btn,
.transform-serve-main .serve-item:nth-child(4) .btn,
.transform-serve-main .serve-item:nth-child(5) .btn,
.transform-serve-main .serve-item:nth-child(7) .btn,
.transform-serve-main .serve-item:nth-child(10) .btn,
.transform-serve-main .serve-item:nth-child(12) .btn{
    background: linear-gradient( 270deg, #49B0FF 13%, #59B8FF 37%, #6BCBFF 58%, #7CDCFF 78%, #AEEEFF 100%);
}

.transform-serve-main .serve-img-box{
    width: var(--size80);
    height: var(--size80);
    background: #fff;
    border-radius: var(--size40);
    text-align: center;
    line-height: var(--size80);
}
.transform-serve-main .serve-img-box img{
    width: var(--size40);
    height: var(--size40);
}
.transform-serve-main .serve-title{
    color: #fff;
    font-size: var(--size30);
    font-family: YouSheBiaoTiHei;
}
.platform-main .platform-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: var(--size20) 0;
}
.platform-main .platform {
    width: calc((100% - var(--size60)) / 4);
    height: 6.25rem;
    margin-bottom: var(--size20);
    margin-right: var(--size20);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: var(--size20);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.platform-main .platform:nth-child(4n){
    margin-right: 0;
}
.bg1{
    background-image: url(../images/service/platform1.png);
}
.bg2{
    background-image: url(../images/service/platform2.png);
}
.bg3{
    background-image: url(../images/service/platform3.png);
}
.bg4{
    background-image: url(../images/service/platform4.png);
}
.bg5{
    background-image: url(../images/service/platform5.png);
}
.bg6{
    background-image: url(../images/service/platform6.png);
}
.bg7{
    background-image: url(../images/service/platform7.png);
}
.bg8{
    background-image: url(../images/service/platform8.png);
}

.bg9{
    background-image: url(../images/service/platform2.png);
}
.bg10{
    background-image: url(../images/service/platform1.png);
}
.bg11{
    background-image: url(../images/service/platform4.png);
}
.bg12{
    background-image: url(../images/service/platform1.png);
}









.project-summary-main{
    padding: var(--size40) 0;
}
.project-summary-main .project-box{
    display: flex;
    justify-content: space-between;
}
.project-summary-main .project-item img{
    width: 6.25rem;
    height: 6.25rem;
}
.project-summary-main .label{
    display: block;
    padding: var(--size20) 0 0 0;
    text-align: center;
    font-size: var(--size18);
    font-weight: 400;
    color: #333;
}

.service-agency-main .more{
    bottom: var(--size10);
    top: auto;
}
.service-agency-main .info-card{
    width: calc((100% - var(--size60)) / 4);
    margin-right: var(--size20);
    margin-bottom: var(--size20);
}
.service-agency-main .info-card:nth-child(4n){
    margin-right: 0;
}
.card-body .attr .value.ellipsis3{
    height: var(--size75);
}






.demand-market-main .info-card{
    width: calc((100% - 2.5rem) / 3);
    margin-bottom: 1.25rem;
}
.demand-market-main .card-body{
    padding-top: 2.5rem;
    border: 1px dashed #ccc;
    padding-top: 3.125rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../images/bg-home-card.png);
}