body{background: #F2F5FA  url("../images/indexNew/banner.png") center top no-repeat;font-family: PingFang SC, PingFang SC;}
.d-flex{display: flex;}
.j-column{flex-direction: column;}
.j-center{justify-content: center;}
.space-between{justify-content: space-between;}
.space-around{justify-content: space-around;}

/* top */
.top{height: 600px;}
.indexTop{background: rgba(0,0,0,.3); height: 60px; box-sizing: border-box; padding-top: 20px;}
.indexTop a{color: #fff;}
.indexTopMenu{text-align: right;flex: 1}
.indexTopMenu a{margin: 2px 12px;position: relative;display: inline-block;}
.indexTopMenu a.active:before{content: "";position: absolute;top: 20px;left: 50%;margin-left: -7px;width: 14px;height: 2px;background: #01E3F0;}
.loginIn{width: 45px;height: 24px; line-height: 24px; background: #46FFFF;border-radius: 6px 6px 6px 6px; text-align: center; color: #000 !important;}
.register{color: #01E3F0;}
.topTitle{margin-top: 154px;}
.topTitle p{font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #01E3F0;line-height: 32px;letter-spacing: 26px;text-align: left;font-style: normal;text-transform: none; }
.topTitle h3{background: linear-gradient(180deg, #FFFFFF 21%, #01E3F0 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 60px;font-weight: 400;-webkit-animation: masked-animation 4s infinite linear;}
@-webkit-keyframes masked-animation {

    0%{ background-position: 0 0;}

    100% { background-position: -100% 0;}

}
.topTitle div{font-weight: 400;font-size: 14px;color: #01E3F0;line-height: 26px;text-align: left;font-style: normal;text-transform: none; margin-top: 23px;}
.gap-30{gap: 24px;}
.linear{width: 218px;height: 45px;line-height: 45px;border-radius: 55px; display: block; margin: 91px auto 0; text-align: center;font-weight: 600;font-size: 16px;color: #001257;letter-spacing: 1px;font-family: PingFang SC, PingFang SC; position: relative; z-index: 5;}
.wormhole-border {height: 50px;width: 223px;position: absolute;overflow: hidden;top: -3px;left: -2px;border-radius: 24px; z-index: 3;}
.welcome{display: flex;align-items: center;justify-content: center;z-index: 10;min-height: 46px;min-width: 219px;height: 100%;width: 100%;isolation: isolate;overflow: hidden;border-radius: 30px;background: #46FFFF;color: #262626;border: 1px solid transparent;position: relative;top: -2px;left: -1px;}
.wormhole-border::before{content: "";text-align: center;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(90deg);position: absolute;width: 600px;height: 600px;background-repeat: no-repeat;background-position: 0 0;filter: brightness(1.35);background-image: conic-gradient(rgba(0, 0, 0, 0), #46ffff, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, #c6cce0, rgba(0, 0, 0, 0) 100%);animation: rotate 4s linear infinite;}
@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(450deg);
    }
}

/* serve */
.serve{background: #F2F5FA;}
.serve h1{font-family: PingFang SC, PingFang SC;font-weight: 300;font-size: 60px;color: #2A3341;line-height: 70px; text-align: center; margin-top: 100px;}
.boxes{height: 762px; margin-top: 80px;}
.boxes .flex-1{padding: 36px;box-sizing: border-box;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);position: relative;}
.bgLinearBlue{background: linear-gradient( 180deg, #0856EF 0%, #09217E 100%);width: 411px;height: 180px;box-sizing: border-box;padding-top: 8px;}
.boxes .flex-1:hover .bgLinearBlue{transform:translateY(-12px)}
.jiantou{width: 3px;height: 73px;background: linear-gradient(138deg, #0595d2 20%, #062079 100%);margin: 90px 11px 0 29px;position: relative;border-radius: 18px 32px 0 0;}
.jiantou:before{content: "";width: 1.5px;height: 8.2px;position: absolute;background-color: #03b9e0;left: -1.5px;top: -2.5px;z-index: 100;border-radius: 5px;transform: rotate(40deg);}
.jiantou:after{content: "";width: 1.5px;height: 8px;position: absolute;background-color: #03b9e0;left: 3px;top: -2px;z-index: 100;border-radius: 5px;transform: rotate(-40deg);}
.bgLinearBlue{position: relative; overflow: hidden;}
.bgBack{position: absolute; top: 36px; left: 38px; width: 411px; height: 180px; background: #edf3ff;}
.bgLinearBlue .number{margin-right: 28px;font-size: 20px;font-weight: 300;color: #fff;justify-content: flex-end;margin-bottom: 30px;}
.bgLinearBlue .number h2{font-size: 32px; font-weight: 500;}
.numbers{ margin-left: 55px;}
.numbers h2{font-size: 32px;color: #262626; font-weight: 300; margin-top: -10px}
.numbers h3{font-size: 20px;font-weight: 500;font-size: 20px;color: #262626;}
.numbers div{font-weight: 400;font-size: 16px;color: #7A7A7A;line-height: 28px; margin-top: 10px;}
.bgLinearBlue img{position: absolute;right: 20px;}
.bgLinearBlue img.group{position: absolute; right: -8px; top: -13px;}
.boxes .text{font-size: 16px;color: #7A7A7A;line-height: 28px;text-align: left; margin-top: 30px;}

/* feature */
.feature{background: url(../images/indexNew/bg1.png) center no-repeat; height: 680px; margin-top: 120px; box-sizing: border-box; padding-top: 85px;}
.feature .introduce{width: 380px;height: 520px;background: #031C79;border-radius: 23px 23px 23px 23px;border: 1px solid #01E3F0; box-sizing: border-box; padding: 30px 45px 0 30px;}
.feature .introduce i{font-weight: bold;font-size: 20px;color: #01E3F0;line-height: 24px;}
.feature .introduce h3{font-weight: bold;font-size: 20px;color: #01E3F0;line-height: 24px; margin-left: 13px;}
.feature .introduce p{font-weight: 400;font-size: 16px;color: #FFFFFF;line-height: 24px; margin-top: 10px; margin-left: 13px;}

/* question */
.question h1{ padding-top: 132px;font-family: PingFang SC, PingFang SC;font-weight: 300;font-size: 60px;color: #2A3341;line-height: 70px;}
.part{gap: 30px; margin-top: 146px;}
.part h2{font-family: PingFang SC, PingFang SC;font-weight: 600;font-size: 24px;color: #FFFFFF;line-height: 30px;position: absolute;z-index: 100;top: 97px;left: 44px;}
.corn{width: 380px;height: 484px;background: #F6F7FC;border-radius: 12px 12px 12px 12px; position: relative;}
.corn img{position: absolute;top: -90px;right: 3px;}
.corn:hover img{transform: translateY(5px);}
.corn .content{width: 368px;height: 344px;background: #FFFFFF;border-radius: 0px 0px 12px 12px;margin: 0 6px; position: relative; z-index: 100; box-sizing: border-box; padding: 33px;}
.corn .content h3{font-weight: bold;font-size: 16px;color: #262626;line-height: 24px; margin-left: 5px;}
.corn .content p{font-weight: 400;font-size: 14px;color: #7A7A7A;line-height: 24px; margin-top: 10px; padding: 0 5px;}
.bgLinear{width: 380px;height: 133px;background: linear-gradient( 15deg, #F6F7FC 0%, #E8F3FE 100%);border-radius: 12px 12px 0px 0px;}
.content i{color: #9ac1f0; font-size: 24px;}
.solve{padding-top: 168px;background-color: #fff;padding-bottom: 140px;}
.solve .fangan{height: 404px;background: linear-gradient( 182deg, #021B77 0%, #103FBD 100%);}
.solve .fangan h1{font-weight: 300;font-size: 60px;color: #01E3F0;line-height: 70px; text-align: center; padding-top: 110px;}
.solve ul{margin-top: 90px;}
.solve ul li{box-sizing: border-box; padding: 20px 32px 18px 36px;width: 588px;min-height: 134px;background: linear-gradient( 15deg, #FFFFFF 0%, #E8F3FE 100%);border-radius: 6px 6px 6px 6px; margin-right: 24px; margin-bottom: 30px;}
.solve ul li:nth-child(2n){margin-right: 0;}
.solve ul li:hover{transform: translateY(-10px);box-shadow: 2px 2px 5px 0px rgba(34,54,155,0.1), 8px 6px 10px 0px rgba(34,54,155,0.09), 17px 14px 13px 0px rgba(34,54,155,0.05), 30px 25px 16px 0px rgba(34,54,155,0.01), 47px 39px 17px 0px rgba(34,54,155,0); background: #fff;}
.solve ul li:hover .titles{font-weight: bold;font-size: 20px;color: #041D7B;}
.solve ul li:hover .titles i{color: #041D7B;}
.solve ul li:hover p{color: #262626;}
.solve ul li .border-line{width: 495px; height: 1px; background-color: #F1EDFF; margin: 10px 0px;}
.solve ul li .titles{font-weight: bold;font-size: 16px;color: #262626; line-height: 25px;}
.solve ul li i{color: #9ac1f0; font-size: 24px; margin-right: 3px;}
.solve ul li p{font-weight: 400;font-size: 16px;color: #7A7A7A;line-height: 24px;}

/* midBanner */
.midBanner{height: 200px;background: linear-gradient( 182deg, #021B77 0%, #103FBD 100%);box-sizing: border-box;padding-top: 60px;/* margin-top: 168px; */}
.midBanner p{font-weight: 300;font-size: 20px;color: #01E3F0;line-height: 25px;letter-spacing: 19px;text-align: center;}
.midBanner a{width: 218px;height: 45px;background: #01E3F0;border-radius: 55px 55px 55px 55px;margin: 32px auto 0;display: block;text-align: center;line-height: 45px;font-weight: 600;font-size: 16px;color: #001257;box-shadow: -2px -1px 8px 0px #ffffff5e, 2px 1px 8px 0px rgb(95 157 231 / 25%);}
.midBanner a:hover{box-shadow: -4px -2px 16px 0px #ffffff3d, 4px 2px 16px 0px rgb(95 157 231 / 11%);}
/* bot */
.bot{padding-top: 86px;}
.bot dl{ margin-right: 107px; width: 175px;}
.bot dl dt,.bot ul li.connect{text-align: center; padding-bottom: 13px; margin-bottom: 11px;font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 16px;color: #262626;}
.bot dl dd{display: inline-block;font-weight: 400;font-size: 14px;color: #7A7A7A;line-height: 24px; margin-bottom: 20px;}
.bot dl dd a{color: #7A7A7A;}
.bot dl dd:nth-child(2n){margin-right: 58px;}
.bot ul li.connect{margin-bottom: 8px;}
.bot li{margin-bottom: 20px;font-weight: 500;
    font-size: 14px;
    color: #7A7A7A;
    line-height: 24px;}
/* 梯形 */
.t1{
    width: 161px;
    height: 41px;
    background: #041D7B;
    border-radius: 20px 10px 0 0px;/* 设置圆角 */
    transform: perspective(8px) scale(1.1, 1.2) rotateX(2deg);
    position: absolute;
    top: 91px;
    left: 7px;
    /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
    transform-origin: bottom left;
    /* bottom left = left bottom = 0 100% 中心点偏移量*/
}
.t2{
    width: 128px;
    height: 41px;
    background: #FEB600;
    border-radius: 20px 10px 0 0px;/* 设置圆角 */
    transform: perspective(8px) scale(1.1, 1.2) rotateX(2deg);
    position: absolute;
    top: 91px;
    left: 7px;
    /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
    transform-origin: bottom left;
    /* bottom left = left bottom = 0 100% 中心点偏移量*/
}
.t3{
    width: 128px;
    height: 41px;
    background: #01E3F0;
    border-radius: 20px 10px 0 0px;/* 设置圆角 */
    transform: perspective(8px) scale(1.1, 1.2) rotateX(2deg);
    position: absolute;
    top: 91px;
    left: 7px;
    /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
    transform-origin: bottom left;
    /* bottom left = left bottom = 0 100% 中心点偏移量*/
}
@-webkit-keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    75% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
}
@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    75% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
}
.hvr-pulse {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse{
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.wobble:hover{-webkit-animation:wobble 1s .2s ease both;
    -moz-animation:wobble 1s .2s ease both; color: #fff;}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform:translateX(0%)
    }
    15% {
        -webkit-transform:translateX(-2%) rotate(-3deg)
    }
    30% {
        -webkit-transform:translateX(2%) rotate(2deg)
    }
    45% {
        -webkit-transform:translateX(-1%) rotate(-2deg)
    }
    60% {
        -webkit-transform:translateX(1%) rotate(1deg)
    }
    75% {
        -webkit-transform:translateX(-1%) rotate(-1deg)
    }
    100% {
        -webkit-transform:translateX(0%)
    }
}
@-moz-keyframes wobble {
    0% {
        -moz-transform:translateX(0%)
    }
    15% {
        -moz-transform:translateX(-2%) rotate(-3deg)
    }
    30% {
        -moz-transform:translateX(2%) rotate(2deg)
    }
    45% {
        -moz-transform:translateX(-1%) rotate(-2deg)
    }
    60% {
        -moz-transform:translateX(1%) rotate(1deg)
    }
    75% {
        -moz-transform:translateX(-1%) rotate(-1deg)
    }
    100% {
        -moz-transform:translateX(0%)
    }
}

.swing:hover{-webkit-animation:swing .5s .2s ease both;
    -moz-animation:swing .5s .2s ease both;
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin:top center
    }
    20% {
        -webkit-transform:rotate(7deg)
    }
    40% {
        -webkit-transform:rotate(-5deg)
    }
    60% {
        -webkit-transform:rotate(2deg)
    }
    80% {
        -webkit-transform:rotate(-2deg)
    }
    100% {
        -webkit-transform:rotate(0deg)
    }
}
@-moz-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -moz-transform-origin:top center
    }
    20% {
        -moz-transform:rotate(7deg)
    }
    40% {
        -moz-transform:rotate(-5deg)
    }
    60% {
        -moz-transform:rotate(2deg)
    }
    80% {
        -moz-transform:rotate(-2deg)
    }
    100% {
        -moz-transform:rotate(0deg)
    }
}


/* slideTool */
.slide-tool{width: 56px; margin: auto; position: fixed; bottom: 5%; right: 10px; cursor: pointer; z-index: 100000;}
.slide-tool ul li{margin-bottom: 10px; width: 50px; height: 50px; line-height: 50px; border: 2px solid #fff; background: #fff;background-image: linear-gradient(to bottom,#f4f5f8,#fdfdff); overflow: hidden;text-align: center;cursor: pointer;border-radius: 50%; box-shadow: 0 2px 6px 0 rgba(0,0,0,.15);}
.slide-tool ul li:hover{background: var(--primary); border-color: var(--primary)}
.slide-tool ul li:hover i{color: #fff}
.slide-tool ul li a{color:#888;}
.slide-tool ul li i{font-size: 30px;color:var(--primary); }
.service {width: 140px;padding: 10px 5px 5px 5px;background:#fff;position: absolute;z-index: 100000;right:57px;top: 0;font-size: 12px; box-shadow: 0 2px 6px 0 rgba(0,0,0,.1)}
.pub-number{width: 140px;padding: 10px 5px 5px 5px;background:#fff;position: absolute;z-index: 100000;right:57px;top: 80px;font-size: 12px; box-shadow: 0 2px 6px 0 rgba(0,0,0,.1)}
.service div,.pub-number div{line-height: 18px;}
.service img,.pub-number img{width:120px;}
.slide-tool ul li:hover .service{display: block;}
.slide-tool ul li:hover .pub-number{display: block;}