@charset "utf-8";

/*按设计稿覆盖公用顶条背景色*/
#topaBar {
    background: #fff;
}

body {
    font-family: "Microsoft YaHei";
}

.relative {
    position: relative;
}

.z-3 {
    z-index: 3;
}

.text-xs {
    font-size: 12px;
}

.text-sm {
    font-size: 14px;
}

.text-base {
    font-size: 16px;
}

/*清除浮动*/
.clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

.clearfloat {
    zoom: 1;
}

.container {
    width: 1200px;
    margin: auto;
    overflow: hidden;
}

/*logo条*/
.logo {
    width: 444px;
    padding: 18px 0;
    float: left;
}

.logo .visual-span {
    border-left: 1px solid #fff;
    padding: 0;
    display: inline-block;
    height: 42px;
    margin-left: 22px;
    margin-top: 13px;
}

.visual-logo {
    position: relative;
    left: 20px;
    top: 18px;
}

.logo .visual-span img {
    margin-top: -10px;
    padding-left: 5px;
}

.apply-form .container {
    width: 1500px;
}

.apply-form .toolbar {
    width: 542px;
    height: 42px;
    border-radius: 42px;
    float: right;
    font-size: 15px;
    line-height: 42px;
    margin-top: 27px;
    border: 1px solid #fff;
}

.apply-form .toolbar ul {
    margin-left: 25px;
}

.apply-form .toolbar ul li {
    float: left;
    margin-left: 2px;
    text-align: center;
    cursor: pointer;
    padding: 0 18px;
}

.toolbar ul li a {
    color: #fff;
}

.toolbar .icon-toolbar {
    width: 23px;
    height: 23px;
    display: inline-block;
    background: url(../png/icon-toolbar.png) no-repeat;
    margin-right: 7px;
    vertical-align: -5px;
}

.toolbar .icon-qq {
    background-position: -2px 0;
}

.toolbar .icon-apply {
    background-position: -2px -44px;
}

.toolbar .icon-phone {
    background-position: -2px -85px;
}

/*banner位置*/
.apply-form {
    background: url('../jpg/banner_02.jpg') no-repeat center center;
    height: 544px;
}

.banner-container {
    width: 654px;
    height: 451px;
    float: left;
    color: #fff;
}

.banner-container p {
    font-size: 52px;
    font-weight: bold;
    width: 630px;
    line-height: 74px;
    margin-top: 44px;
}

.banner-container p em {
    background: linear-gradient(0deg, #bce7ff 0%, #fff 75%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-container p em.em1 {
    font-size: 60px;
}

.banner-container p span {
    font-size: 84px;
    margin-left: 15px;
    background: linear-gradient(0deg, #98F7FF 0%, #D7FDFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-container .features {
    position: relative;
    display: flex;
    width: 900px;
    padding: 10px 0;
    z-index: 3;
}

.banner-container .features span.sub-title {
    display: flex;
    margin-right: 8px;
}

.banner-container .features span.sub-title font {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    font-size: 18px;
    color: #3753DB;
    background: #fff;
    font-weight: bold;
    text-align: center;
    padding: 0 1px;
}

.banner-container .features span.sub-title::before {
    width: 17px;
    height: 50px;
    display: inline-block;
    content: '';
    background: url('../png/font-left_06.png');
    vertical-align: -18px;
}

.banner-container .features span.sub-title::after {
    width: 15px;
    height: 50px;
    display: inline-block;
    content: '';
    background: url('../png/font-right_08.png');
    vertical-align: -18px;
}

.banner-container .features span.sub-title .icon-pro {
    position: absolute;
    top: -9px;
    right: -2px;
}

.banner-container ul li {
    float: left;
    background: url('../png/banner-list_13.png') no-repeat 0 2px;
    padding-left: 30px;
    font-size: 19px;
    margin-right: 18px;
}

.banner-container a {
    width: 248px;
    height: 74px;
    display: block;
    line-height: 64px;
    text-align: left;
    padding-left: 25px;
    font-size: 18px;
    background: url(../png/price-btn-old.png) center top no-repeat;
    color: #fff;
    font-weight: bold;
    margin: 18px 0 0 -12px;
}

.banner-container a font {
    font-size: 27px;
}

.banner-container a .icon-btn {
    width: 22px;
    height: 21px;
    display: inline-block;
    background: url('../png/banner-button_17.png') no-repeat;
    vertical-align: -5px;
    margin-left: 2px;
}

.banner {
    width: 546px;
    float: right;
    position: relative;
    animation: move 2.5s linear infinite alternate-reverse;
}

@keyframes move {
    from {
        top: 0;
    }

    to {
        top: 30px;
    }
}

@-webkit-keyframes move {
    from {
        top: 0;
    }

    to {
        top: 30px;
    }
}

@-o-keyframes move {
    from {
        top: 0;
    }

    to {
        top: 30px;
    }
}

@-moz-keyframes move {
    from {
        top: 0;
    }

    to {
        top: 30px;
    }
}

/* title */
.ask-container .title,
.optimize-div .title,
.service .title,
.apply-div .title {
    font-size: 40px;
    font-weight: bold;
    width: 440px;
    margin: 25px auto 0;
    display: block;
    line-height: 80px;
}

/* ask  */
.ask-container {
    width: 953px;
    height: 673px;
    overflow: unset;
}

.ask-container .title {
    color: #3753DB;
    border-bottom: 2px solid #3753DB;
}

.ask {
    position: relative;
    top: -55px;
    z-index: -5;
}

.ask .circle {
    display: block;
    border-radius: 100%;
    position: absolute;
}

.ask .circle0 {
    width: 953px;
    height: 953px;
    background: #fcfdfe;
    top: 0;
    left: 0;
}

.ask .circle1 {
    width: 650px;
    height: 650px;
    background: #f8f9fc;
    top: 151px;
    left: 151px;
}

.ask .circle2 {
    width: 420px;
    height: 420px;
    background: #f1f3f9;
    top: 266px;
    left: 266px;
}

.ask .circle3 {
    width: 278px;
    height: 278px;
    background: #e6eaf5;
    top: 337px;
    left: 337px;
}

.ask div {
    position: absolute;

}

.ask img {
    position: absolute;
    top: 295px;
    left: 340px;
}

.ask div {
    position: relative;
}

.ask .text {
    position: absolute;
    color: #333;
    font-weight: bold;
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    top: 653px;
}

.ask .text.current {
    opacity: 1;
    visibility: visible;
}

.ask .text0.current {
    top: 244px;
}

.ask .text1.current {
    top: 127px;
}

.ask .text2.current {
    top: 115px;
}

.ask .text3.current {
    top: 171px;
}

.ask .text4.current {
    top: 370px;
}

.ask .text5.current {
    top: 373px;
}

.ask .text6.current {
    top: 237px;
}

.ask .text0 {
    font-size: 40px;
    left: -85px;
    /* top:244px; */
}

.ask .text1 {
    font-size: 30px;
    left: 230px;
    /* top:127px; */
}

.ask .text2 {
    font-size: 36px;
    left: 502px;
    /* top:115px; */
}

.ask .text3 {
    font-size: 30px;
    left: 580px;
    /* top:252px; */
}

.ask .text4 {
    font-size: 32px;
    left: 669px;
    /* top:370px; */
}

.ask .text5 {
    font-size: 30px;
    left: 106px;
    /* top:373px; */
    color: #606060;
}

.ask .text6 {
    font-size: 28px;
    left: 334px;
    /* top:237px; */
    color: #606060;
}

.ask .circle.current {
    opacity: 0;
    animation: zoom 3s linear infinite;
    -webkit-animation: zoom 3s linear infinite;
    -moz-animation: zoom 3s linear infinite;
    -o-animation: zoom 3s linear infinite;
}

.ask .circle1.current {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
}

.ask .circle2.current {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
}

.ask .circle3.current {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
}

@keyframes zoom {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        opacity: 0.3;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
        display: none;
    }
}

/* special-list */
.special-list {
    background: #f4faff;
    height: 530px;
}

.special-list ul {
    display: flex;
    width: 1500px;
    padding-top: 50px;
}

.special-list ul li {
    flex: 1;
    padding-top: 230px;
    position: relative;
}

.special1 {
    background: url('../jpg/special-1_03.jpg') no-repeat center 0;
}

.special2 {
    background: url('http://res.gys.cn/img/mainsite/paimingbao/special-2_09.jpg.webp') no-repeat center 0;
}

.special3 {
    background: url('http://res.gys.cn/img/mainsite/paimingbao/special-3_06.jpg.webp') no-repeat center 0;
}

.special4 {
    background: url('http://res.gys.cn/img/mainsite/paimingbao/special-4.png.webp') no-repeat center 0;
}

.sub-title {
    font-size: 28px;
    color: #3753DB;
    font-weight: bold;
    text-align: center;
    display: block;
}

.special-list ul li p {
    font-size: 18px;
    color: #696969;
    margin-top: 10px;
    padding: 0 34px;
    line-height: 30px;
}

.special-list ul li p:before {
    content: '';
    width: 7px;
    height: 7px;
    display: inline-block;
    background: #3753db;
    border-radius: 50px;
    margin-right: 9px;
    vertical-align: 3px;
}

.special-list ul li .sub-title .icon-pro {
    position: absolute;
    top: -12px;
    right: 40px;
}

.special1 p {
    margin-left: 47px;
}

.special2 p {
    margin-left: 41px;
}

.special3 p {
    margin-left: 65px;
}

.special4 p {
    margin-left: 42px;
}

.special-list ul li.current {
    position: relative;
    animation: move2 0.8s ease forwards;
    -webkit-animation: move2 0.8s ease forwards;
}

.line {
    width: 49px;
    height: 2px;
    background: #8396e9;
    margin: 10px auto;
    display: block;
}

.h-line {
    border-right: 1px solid #dfe8fb;
    float: right;
    display: block;
    width: 2px;
    height: 305px;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 75px;
}

.special-list ul li.current .h-line {
    position: absolute;
    animation: move3 0.8s ease forwards;
    -webkit-animation: move3 0.8s ease forwards;
    -o-animation: move3 0.8s ease forwards;
    -moz-animation: move3 0.8s ease forwards;
    -ms-webkit-animation: move3 0.8s ease forwards;
}


@keyframes move2 {
    from {
        top: 0;
    }

    to {
        top: -24px;
    }
}

@-webkit-keyframes move3 {
    from {
        top: 0;
    }

    to {
        top: 24px;
    }
}

@-o-keyframes move3 {
    from {
        top: 0;
    }

    to {
        top: 24px;
    }
}

@-moz-keyframes move3 {
    from {
        top: 0;
    }

    to {
        top: 24px;
    }
}

@-ms-keyframes move3 {
    from {
        top: 0;
    }

    to {
        top: 24px;
    }
}


/*优化*/
.optimize-div {
    background: url('../jpg/case-bg_14.jpg') center 0 no-repeat;
    /* height: 1034px; */
    height: 860px;
}

.optimize-div .container {
    /*width: 1500px;*/
    height: 860px;
    position: relative;
}

.optimize-div .title {
    color: #fff;
    width: 326px;
    border-bottom: 2px solid #687ca0;
    margin-top: 37px;
}

.function-container {
    width: 1200px;
    height: 625px;
    margin: 60px auto 0;
    position: relative;
    overflow: hidden;
    display: none;
}

.function-container .function-content {
    position: absolute;
    width: 800px;
    height: 500px;
    left: 50%;
    transform: translateX(-52.5%);
    z-index: 5;
}

.function-container .function-content2 {
    transform: translateX(-45%);
}

.function-container .function-content3 {
    transform: translateX(-47%);
}

.function-container .function-content li {
    position: absolute;
    width: 800px;
    height: 500px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.function-container .function-content li img {
    width: 800px;
    height: 500px;
    object-fit: contain;
}

.function-container .function-content li:last-child img {
    position: relative;
    left: -2px;
}

.function-bar span {
    width: 56px;
    height: 110px;
    display: block;
    float: left;
    cursor: pointer;
    position: absolute;
    top: 255.5px;
    z-index: 888;
}

.bar-left {
    background: url('../png/btn-left_18.png') center center no-repeat;
    left: 0px;
}

.bar-right {
    background: url('../png/btn-right_21.png') center center no-repeat;
    right: 0px;
}

.function .btn {
    width: 200px;
    height: 46px;
    display: block;
    text-align: center;
    line-height: 46px;
    margin: auto;
    font-size: 18px;
    color: #2da446;
    background: #fff;
    border-radius: 5px;
    font-weight: bold;
}

.function-content ul li {
    opacity: 0;
    z-index: 1;
}

.function-content ul .p1,
.function-content ul .a1,
.function-content ul .b1,
.function-content ul .c1 {
    transform: translate3d(-210px, 0, 0) scale(0.81);
    z-index: 2;
    opacity: 0.8
}

.function-content ul .p2,
.function-content ul .a2,
.function-content ul .b2,
.function-content ul .c2 {
    transform: translate3d(-1px, 0, 0) scale(1);
    z-index: 4;
    opacity: 1;
}

.function-content ul .p3,
.function-content ul .a3,
.function-content ul .b3,
.function-content ul .c3 {
    transform: translate3d(210px, 0, 0) scale(0.81);
    z-index: 2;
    opacity: 0.8
}

.function-content ul .p4,
.function-content ul .a4,
.function-content ul .b4,
.function-content ul .c4 {
    transform: translate3d(210px, 0, 0) scale(0.81);
    z-index: 2;
    opacity: 0
}

.function-content ul .p5,
.function-content ul .a5,
.function-content ul .b5,
.function-content ul .c5 {
    transform: translate3d(210px, 0, 0) scale(0.81);
    z-index: 2;
    opacity: 0
}

.case {
    background: rgba(255, 255, 255, 0.36);
    width: 798px;
    height: 144px;
    border-radius: 10px;
    margin: auto;
    padding: 23px 36px;
    display: none;
}

.case span {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    line-height: 24px;
    padding-bottom: 5px;
}

.case ul {
    width: 840px;
    margin-top: 5px;
}

.case ul li {
    float: left;
    width: 134px;
    height: 33px;
    background: #fff;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    line-height: 35px;
    margin-right: 29px;
    margin-top: 20px;
    border: 1px solid #3753db;
}

.case ul li:hover {
    background: #3753DB;
}

.case ul li:hover a {
    color: #fff;
}

.dot {
    position: absolute;
    left: 120px;
    bottom: 75px;
}

.dot li {
    float: left;
    width: 298px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    background: #fff;
    border: solid 2px #4a65f1;
    border-radius: 50px;
    margin: 0 7px;
    font-size: 24px;
    color: #5a74f7;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(73, 101, 241, 0.65);
}

.dot li.current,
.dot li:hover {
    background: #4a65f1;
    color: #fff;
}

.dot li .icon-pro {
    position: absolute;
    top: -9px;
    right: -2px;
}

/*service*/
.service {
    background: url('../jpg/flow_02.jpg') center 64px no-repeat;
    height: 600px;
    position: relative;
}

.service .title {
    width: 320px;
    color: #3753DB;
    border-bottom: 2px solid #3753DB;
    margin-top: 34px;
}

.service ul {
    margin: 77px 8px 0 8px;
    width: 1270px;
    position: relative;
    z-index: 5;
}

.service ul li {
    float: left;
    margin-right: 110px;
    width: 144px;
    text-align: center;
}

.service ul li span {
    display: block;
    width: 144px;
    text-align: center;
    color: #666;
    font-size: 18px;
    margin-top: 18px;
}

.service ul li img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

.service ul li img.current {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}

.step {
    height: 1px;
    background: #E5E5E5;
    position: relative;
    top: -110px;
    z-index: 1;
}

.step-current {
    width: 0;
    height: 1px;
    background: #0080FF;
}

.step .container {
    overflow: unset;
}

.step span {
    display: inline-block;
    border-width: 5px;
    border-color: transparent transparent transparent #272727;
    border-style: solid;
    margin: 0 57px 0 189px;
    position: relative;
    top: -9px;
    z-index: 2;
}

.step span:last-child {
    margin-right: 0;
}

.step span.current {
    border-color: transparent transparent transparent #3753db;
}

.service-button a {
    width: 220px;
    height: 58px;
    display: block;
    font-size: 22px;
    text-align: center;
    line-height: 58px;
    background: linear-gradient(90deg, #3753DB 0%, #4E6CFE 100%);
    border-radius: 29px;
    color: #fff;
    margin: 79px auto 0;
}



/*申请条*/
.apply-div {
    background: url('../jpg/qa_13.jpg') no-repeat center 0;
    background-size: cover;
    position: relative;
    z-index: 3;
    padding-top: 20px;
}

.apply-div .title {
    width: 240px;
    color: #fff;
    border-bottom: 2px solid #6487ec;
}

.apply-div ul {
    margin-top: 83px;
}

.apply-div ul li {
    width: 506px;
    color: #fff;
    float: left;
    margin-bottom: 40px;
}

.apply-div ul li:nth-child(odd) {
    margin-right: 188px;
}

.apply-div ul li dl dt {
    font-size: 20px;
    font-weight: bold;
}

.apply-div ul li dl dd {
    font-size: 16px;
    margin-top: 10px;
}

.apply-div ul li dl dd p {
    display: inline-block;
    width: 458px;
    line-height: 34px;
}

.icon-q,
.icon-a {
    width: 23px;
    height: 23px;
    display: inline-block;
    position: relative;
    margin-right: 15px;
}

.icon-q {
    background: url('../png/q_15.png') no-repeat;
    top: 5px;
}

.icon-a {
    background: url('../png/a_15.png') no-repeat;
    top: 7px;
    float: left;
}

/* apply-container */
.apply-container {
    height: 236px;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.apply-left {
    float: left;
    margin: 70px 0 0 90px;
}

.apply-left font {
    font-size: 40px;
    color: #333;
    font-weight: bold;
    display: block;
}

.apply-left span {
    font-size: 26px;
    color: #696969;
}

.apply-right {
    float: right;
    margin: 60px 142px 0 0;
}

.apply-right span {
    color: #333333;
    font-size: 30px;
}

.apply-right font {
    color: #3753DB;
    font-size: 45px;
    font-weight: bold;
}

.apply-right a {
    width: 270px;
    height: 54px;
    display: block;
    background: linear-gradient(90deg, #3753DB 0%, #4966F2 100%);
    border-radius: 27px;
    text-align: center;
    line-height: 54px;
    color: #fff;
    font-size: 22px;
    margin-top: 5px;
}


/*底部*/
.footer {
    background: #1c1f32;
    color: #fff;
    text-align: center;
    height: 89px;
    line-height: 24px;
    position: relative;
    z-index: 2;
}

.footer a {
    color: #fff;
    margin: 0 11px;
}

/* service-bar */
.service-bar {
    background: #fff;
    width: 52px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

.service-bar ul {
    margin-top: 100px;
}

.service-bar ul li {
    height: 80px;
    text-align: center;
    border-bottom: 1px solid #F6F6F6;
    padding-top: 20px;
}

.service-bar ul li a {
    cursor: pointer;
}

.icon-service {
    background: url('../png/service-bar.png') no-repeat;
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-left: 2px;
}

.icon-qq {
    background-position: -11px -5px;
}

.icon-tel {
    background-position: -11px -105px;
}

.icon-pen {
    background-position: -10px -209px;
}

.icon-zzfw {
    background-position: -11px -282px;
}

.icon-map {
    width: 23px;
    height: 23px;
    background-position: -10px -309px;
}

.icon-top {
    background-position: -6px -434px;
}

.service-bar .tel-div .icon-tel {
    background-position: -11px -105px;
    vertical-align: -3px;
}

.service-bar .tel {
    position: relative;
}

.service-bar .tel .tel-div {
    display: none;
    position: absolute;
    width: 137px;
    height: 78px;
    background: #fff;
    border-top: 1px solid #F6F6F6;
    border-bottom: 1px solid #F6F6F6;
    right: 0;
    top: 0;
    padding-top: 21px;
    border-top-left-radius: 78px;
    border-bottom-left-radius: 78px;
}

.service-bar .tel .tel-div span {
    display: inline-block;
    width: auto;
    margin-left: -5px;
    font-size: 14px;
}

.service-bar .tel .tel-div .tel-number {
    margin-top: 3px;
    margin-left: 10px;
}

.service-bar span {
    display: block;
    width: 26px;
    margin-left: 12px;
    line-height: 14px;
    color: #3753DB;
}

.service-bar .en span {
    width: 42px;
    font-weight: bold;
    margin-left: 5px;
}