@charset "utf-8";
/*按设计稿覆盖公用顶条背景色*/
#topaBar{
    background: #fff;
}
body{
    font-family: "Microsoft YaHei";
}

/*清除浮动*/
.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 .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(https://res.gys.cn/img/mainsite/qqt2018/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('https://res.gys.cn/img/mainsite/paimingbao/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 span.sub-title{ float: left; margin-right: 6px;}
.banner-container span.sub-title font{
    width:171px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    font-size:18px;
    color: #3753DB;
    background: #fff;
    font-weight: bold;
    text-align: center;
    margin:10px -9px;
}
.banner-container span.sub-title:nth-child(4) font{ width: 185px;margin:10px -9px;}
.banner-container span.sub-title::before{
    width:17px;
    height: 50px;
    display: inline-block;
    content: '';
    background: url('https://res.gys.cn/img/mainsite/paimingbao/font-left_06.png');
    vertical-align: -18px;
}
.banner-container span.sub-title::after{
    width:15px;
    height: 50px;
    display: inline-block;
    content: '';
    background: url('https://res.gys.cn/img/mainsite/paimingbao/font-right_08.png');
    vertical-align: -18px;
}
.banner-container ul li{
    float: left;
    background:url('https://res.gys.cn/img/mainsite/paimingbao/banner-list_13.png') no-repeat 0 2px;
    padding-left:30px;
    font-size: 19px;
    margin-right:20px;
}
.banner-container a{
    width:243px;
    height: 74px;
    display: block;
    line-height: 64px;
    text-align: left;
    padding-left: 30px;
    font-size: 18px;
    background: url(https://res.gys.cn/img/mainsite/paimingbao/price-btn.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('https://res.gys.cn/img/mainsite/paimingbao/banner-button_17.png') no-repeat;
    vertical-align: -5px;
    margin-left: 2px;
}
.banner{
    width:546px;
    float: left;
    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:27px;
    /* 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{
    padding-top:50px;
}
.special-list ul li{
    float:left;
    width:400px;
    padding-top:230px;
    position: relative;
}
.special1{
    background: url('https://res.gys.cn/img/mainsite/paimingbao/special-1_03.jpg') no-repeat center 0;
}
.special2{
    background: url('https://res.gys.cn/img/mainsite/paimingbao/special-2_09.jpg.webp') no-repeat center 0;
}
.special3{
    background: url('https://res.gys.cn/img/mainsite/paimingbao/special-3_06.jpg.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;}
.special1 p{ margin-left: 59px;}
.special2 p{ margin-left: 54px;}
.special3 p{ margin-left: 77px;}
.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('https://res.gys.cn/img/mainsite/paimingbao/case-bg_14.jpg') center 0 no-repeat;
    /* height: 1034px; */
    height:860px;
}
.optimize-div .container{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{
    height:500px;
}
.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('https://res.gys.cn/img/mainsite/paimingbao/btn-left_18.png') center center no-repeat;
    left:0px;
}
.bar-right{
    background: url('https://res.gys.cn/img/mainsite/paimingbao/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{
    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{
    transform:translate3d(-1px,0,0) scale(1);
    z-index:4;
    opacity:1;
}
.function-content ul .p3,.function-content ul .a3,.function-content ul .b3{
    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{
    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{
    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;}


/*service*/
.service{
    background: url('https://res.gys.cn/img/mainsite/paimingbao/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('https://res.gys.cn/img/mainsite/paimingbao/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('https://res.gys.cn/img/mainsite/paimingbao/q_15.png') no-repeat;
    top:5px;
}
.icon-a{
    background: url('https://res.gys.cn/img/mainsite/paimingbao/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('https://res.gys.cn/img/mainsite/paimingbao/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;
}
