html{
    scroll-behavior: smooth;
}

:root {
    --main-color: #000f8f;
}

a{
    text-decoration: dotted;
    color: var(--main-color)
}

a:hover {
    text-decoration: underline
}

*{
    padding:  0;
    margin: 0;
    box-sizing: border-box;
}

body{

    font-family: 'Microsoft Yahei', '微软雅黑',arial,  serif;
    font-size: 0.2rem;
    color: #0D253F;
}
.clear{clear: both}

/** 其他页面顶部 start **/
.banner{
    margin-top: 90px;
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.banner img{
    border-width: 0;
}
.banner h1{
    color: #fff;
    font-size: 60px;
    position: absolute;
    left: 50px;
    bottom: 20px ;
}
.banner span{
    color: #fff;
    font-size: 12px;
    position: absolute;
    width: 40%;
    line-height: 30px;
    right: 50px;
    bottom: 20px;
}

/** 其他页面顶部 end **/


.card{
    background-color: #ffffff;
    border-radius: 6px;
    /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 4px 30px 0 rgba(3, 32, 88, 0.12);
    overflow: hidden;
}

.app-container{
    width: 1280px;
    margin: 0 auto;
    padding: 80px 0;
}
.my-server{
    background: url("./assets/index/bg.png") 100%  100% no-repeat;
    background-size: cover;
}
.text-normal{
    padding: 0 25%;line-height: 30px;
}
.color0{
    background-color: #ffffff;
}
.color1{
    background-color: rgb(245,249,252);
}

/******************************** 优化完成的代码 ********************************/




/** 顶部处理 start **/
.nav li a .dot{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #808695;
    margin: 0 4px;
}
.nav li.current a .dot{
    background-color: var(--main-color);
}
.nav li a:hover .dot{
    background-color: var(--main-color);
}
.header {
    width: 100%;
    height: 90px;
    position: fixed;
    top:0;
    left: 0;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.header .logo{
    height: 100%;
}
.header .logo img{
    height: 100%;
    max-width: 100%;
}

.menu{
    margin-right: auto;
    padding-left: 50px;
    flex: 1;
}

.menu-icon{
    font-size: 26px;
    display: none;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-icon.hover{
    transform: rotate(90deg);
}

.nav{
    list-style-type: none;
    display: flex;
}

.nav li{
    /* float: left; */
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-left: 50px;
    display: flex;
}

.nav li:first-child{
    margin-left: unset;
}

.nav li a{
    color: #808695;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav li a:hover{
    color: var(--main-color);
}
.header .current, .nav li.current{
    border-bottom: 2px solid var(--main-color);
}
.header .current, .nav li.current a{
    color: var(--main-color);
}

.lang{
    font-size: 18px;
    font-weight: 700;
    color: #808695;
    display: flex;
    align-items: center;
}
.lang span.current{
    border-width: 0;
}
.lang a{color: #808695;}
.lang a:hover{color:var(--main-color);}



.menu.fixed{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh !important;
    background: rgba(0, 0, 0, .5);
    margin: 0 !important;
    width: 100vw !important;
    z-index: 10;
    left: 100%;
    display: block;
}

.menu.fixed .nav{
    position: absolute;
    background: #FFF;
    right: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    padding: 20px;
}

.menu.fixed .nav li{
    margin-bottom: 15px;
    margin-right: unset;
    margin-left: unset;
}
.nav .login-li{
    margin-left: auto;
}
.login-button{
    font-size: 18px;
    color: var(--main-color) !important;
    border: 1px solid var(--main-color);
    padding: 8px 30px;
    cursor: pointer;
    text-decoration: none;
}
.login-button:hover{
    text-decoration: none;
}
/** 顶部处理 end **/


/** 首页轮播 start**/
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 90px;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.contact-us-button{
    position: absolute;
    left: calc(40vw / 6);
    bottom: calc(100vw / 6); ;
    font-size: calc(8vw / 6);
    width: calc(80vw / 6);
    height: calc(20vw / 6);
    line-height: calc(20vw / 6);
    text-align: center;
    border: 1px solid #000;
    color: #000;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    text-decoration-line: none;
}


.banner .contact-us-button{
    bottom:calc(60vw / 6 );
}

.contact-us-button:hover{
    text-decoration: none;
}

.contact-us-button.on{
  border-color: #FFF;
  color: #FFF;
}


.slide img {
    max-width: 100%;
    height: 100%;
    width: 100%;
    max-height: 100%;
    user-select: none;
}

.pagination {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    /* width: 80px;
    height: 10px; */
    width: 60px;
    height: 8px;
    background-color: #bbb;
    cursor: pointer;
}

.dot.active {
    background-color: var(--main-color);
}
/** 首页轮播 end**/


/** 通用大标题 **/
.common-title{
    text-align: center;
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 60px;
    color: var(--main-color);
}

/** 通用gard **/
.common-grid{
    display: grid;
}

.common-grid-card-text{
    color:#0D253F;
    font-size: 18px;
    line-height: 30px;
}
/** 我们的服务 start **/
.col2{
    grid-template-columns: 1fr  1fr;
    margin-left: auto;
    margin-right: auto;
    column-gap: 20px;
}

.card1{
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.card1 .head{
    border-bottom: 1px solid #ececec;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card1 .head .title{
    font-size: 24px;
    font-weight: 400;
    color: #0D253F;
}
.card1 .head .more{
    color: #0D253F;
    font-size: 14px;
    text-align: right;
}
.card1 .tags1{
    padding: 20px;
}
.card1 .tags1 span{
    border: 1px solid var(--main-color);
    color: var(--main-color);
    border-radius: 5px;
    padding: 10px 0;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
}

.card1 .tags1{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    column-gap: 10px;
    row-gap: 10px;
}

.card1 .tags1 span:nth-child(1){
    grid-column: 1 / 4;
}

.card1 .tags1 span:nth-child(2){
    grid-column: 4 / 7;
}

.card1 .tags1 span:nth-child(3){
    grid-column: 1 / 3;
}

.card1 .tags1 span:nth-child(4){
    grid-column: 3 / 5;
}
.card1 .tags1 span:nth-child(5){
    grid-column: 5 / 7;
}

.card1 .tags1.avg-cloumn span:nth-child(3){
    grid-column: 1 / 4;
}
.card1 .tags1.avg-cloumn span:nth-child(4){
    grid-column: 4 / 7;
}


.card1 .foot{
    background-color: rgb(245,249,252);
    padding: 20px 20px 40px 20px;
}

.card1 .foot .title{
    font-size: 18px;
    margin-bottom: 10px;
}
.card1 .foot .tags2 span{
    color: #aaaaaa;
    margin-right: 10px;
    font-size: 14px;
}
/** 我们的服务 end **/

/** 服务优势 start **/
.reset-grid{
    display: grid;
    grid-template-columns:1fr 2fr 1fr;
}

.reset-grid.compliance{
    display: grid;
    grid-template-columns:3fr 2fr;
}

.item-title{
    color: #333;
    font-size: 24px;
    margin-bottom: 12px;
    padding-top: 10px;
}

.item-text{
    font-size: 14px;
    line-height: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.service-center{
    background:url(./assets/index/fwys.png) 100% 100% no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 20px;
}
/** 服务优势 end **/


/** 风控合规 start **/

.compliance-info{
    padding: 20px 0;
}

.compliance-title{
    font-size: 52px;
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 20px;
}

.compliance-content{
    font-size: 18px;
    line-height: 40px;
    color: rgb(62,91,120)
}

.compliance-img{
    background: url(./assets/index/hg.png) center / contain no-repeat;
}
/** 风控合规 end **/



/** 服务客户 start **/
.server-type{display: grid;grid-template-columns: 20% 20% 20% 20% 20%;margin-top: 27px;place-items: center;}
.server-type span{
    color: #0D253F;text-align: center;font-size: 22px;font-style: normal;font-weight: 400;margin-top: 20px;
}
/** 服务客户 end **/

/** 联系我们index strat **/
.address-info{
    font-size: 18px;
    line-height: 24px;
    color: #666;
}

.contact-us{
    background: url("assets/common/bg.png") bottom / cover no-repeat;
}
.contact-us .message{
    text-align: center;
}
.contact-us .message div{
    display: none;
}

.contact-us .citys{
    display: grid;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6% ;
    margin-top: 40px;
    place-items: center;
}
.contact-us .citys span{
    color: #0D253F;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
}
.contact-us .line{
    display: grid;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6% ;
    place-items: center;
    background: url("assets/common/line.png") repeat-x 0 39px;
    background-size: auto 2px;
}
.contact-us .line span{
    background: url("assets/common/dot.png") no-repeat center;
    width: 80px;height: 80px;cursor: pointer;
    background-size: 12px;
}
.contact-us .line span.current{
    background: url("assets/common/dot-current.png") no-repeat center !important;
    background-size: 40px !important;
}
/** 联系我们index end **/


/** 底部 start **/
.footer{
    color: #ffffff;
    height: 160px;
    background-color: rgb(10,29,48);
    padding: 50px;
}
.footer .col{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    place-items: center;
}
.footer .link{
    padding-top: 20px;
}
.footer .col .logo{
    font-size: 24px;letter-spacing: 8px;
}
.footer .col a{
    color: #ffffff;
    font-size: 18px;
    display: block;
    margin-bottom: 20px;
}
.beian{
    text-align: center;
    line-height: 30px;
    font-size: 12px;
}
.beian a{
    color: #ffffff;
}
/** 底部 end **/






/** 报名联系我们 start **/
.sign-up{
    background-color: #F8FAFB;
    padding: 30px 0px;
}

.form-title{
    font-size: 16px;
    font-weight: 400;
    color: #0D253F;
    margin-bottom: 32px;
}
.form-box{
    background-color: #FFF;
    border-radius: 10px;
    padding: 60px 80px 60px 40px;
    font-size: 18px;
    font-weight: 400;
    color: #0D253F;
    position: relative;
}

.form-box .hide{
    display: none;
}

.form-item{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}

.form-item .form-item{
    margin-bottom: 0;
}

.form-item-label{
    font-weight: 400;
    color: #0D253F;
    padding-right: 20px;
    display: inline-block;
    padding-left: 40px;
}

.form-item-label.required::after{
    content: '*';
    color: red;
    vertical-align: middle;
    margin-left: 10px;
}

.form-item-label:not(.required){
    padding-right: 36px;
}

.form-item-content{
    display: flex;
    align-items: center;
    flex: 1;
}

.form-item-input{
    outline: 0;
    border: 1px solid #0D253F4D;
    border-radius: 6px;
    padding: 4px 20px;
    width: 100%;
    height: 50px;
    font-size: inherit;
}

.form-radio{
    display: flex;
    align-items: center;
    cursor: pointer;
    /* transition: color .3s, background .3s, border-color .3s, box-shadow .3s; */
}

.form-radio:not(:last-child){
    margin-right: 80px;
}

.form-radio::before{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #000f8f;
    background-color: #FFF;
    box-sizing: border-box;
    margin-right: 8px;
}

.form-radio.active::before{
    border-width: 6px;
}

.submit-button{
    background-color: #242E4C;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin-left: 40px;
    margin-top: 80px;
    text-align: center;
    font-weight: 400;
    color: #FFF;
    border-radius: 4px;
    cursor: pointer;
}

.qr-code{
    position: absolute;
    width: 156px;
    bottom: 20px;
    right: 60px ;
}
.qr-code img{
    width: 100%;
    height: 100%;
}
/** 报名联系我们 end **/


@media screen and (max-width: 1400px) {
    .menu{ 
        display: none;
    }
    .menu-icon{
        display: inline-block;
    }
}



@media screen and (min-width: 1920px) and (max-width: 3839px) {
    html {
        font-size: 80px;
    }
    .footer .col .logo img{
        width: 220px;
    }
    .footer .col .logo {
        font-size: 0.30rem !important;
    }
    .resetLeft{
        left: 300px !important;
    }
    .resetRight{
        right: 300px !important;
    }

    
}
@media screen and (min-width: 2200px){
    html {
        font-size: 80px;
    }
    /* .banner h1{
        top: 9rem !important;
    }
    .banner span{
        width: 9rem !important;
        top: 9.5rem !important;
        right: 2rem !important;
    } */
    
    /* .my-server {
        padding: 0.5rem 20% 1rem 20%;
    } */
    /* .color0,.color1{
        padding:0.8rem 20% !important;
    } */
}
@media screen and (min-width: 1024px) and (max-width: 1919px) {
    html {
        font-size: 65px;
    }
    .footer .col .logo img{
        width: 160px;
    }
    .footer .col .logo {
        font-size: 0.25rem !important;
    }
    .resetLeft{
        left: 200px !important;
    }
    .resetRight{
        right: 200px !important;
    }
    /* .banner h1 {top:4.5rem !important;} */
}

@media screen and (min-width: 1600px) and (max-width: 1919px) {
    /* .banner h1 {top:7.5rem !important;}
    .banner span{top: 8rem !important;} */

    
}
@media screen and (min-width: 1240px) and (max-width: 1599px) {
    /* .banner h1 {top:6.5rem !important;}
    .banner span{top: 7.2rem !important;} */

    .app-container{
        max-width: 1120px !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1239px) {
    .app-container{
        max-width: 960px !important;
    }

    .text-overlay .text{
        width: 680px;
    }
    .menu{ 
        display: none;
    }
    .menu-icon{
        display: inline-block;
    }
}


@media screen and (max-width: 1066px) {
    .menu{ 
        display: none;
    }
    .menu-icon{
        display: inline-block;
    }
}



@media screen and (min-width: 600px) and (max-width: 979px) {

    

    .menu{ 
        display: none;
    }
    .menu-icon{
        display: inline-block;
    }

    /** 通用 **/
    .common-grid {
        display: block;
    }
    .common-grid .common-grid-card:not(:last-child){
        margin-bottom: 20px;
    }

    .card1:first-child{
        margin-bottom: 20px;
    }

    .app-container{
        max-width: 580px;
    }




    /** 联系我们报名 start**/
    .form-box{
        font-size: 18px;
        padding: 40px;
    }
    .form-title{
        font-size: 14px;
    }
    .form-item-label{
        padding:0;
        margin-bottom: 10px;
    }

    .form-item{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .form-item .form-item:not(:last-child){
        margin-bottom: 30px;
    }

    .submit-button{
        margin-left: 0;
    }

    .form-item-content{
        width: 100%;
    }

    .radio-box{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .radio-box .form-radio:not(:last-child){
        margin-bottom: 10px;
    }

    .qr-code{
        width: 160px;
        bottom: 10px;
        right: 16px;
    }
    /** 联系我们报名 end**/


    /** 合规 + 服务优势 **/
    .reset-grid{
        grid-template-rows: 1fr 1.5fr 1fr;
        grid-template-columns: auto;
    }

    .reset-grid.compliance{
        grid-template-rows: 1fr 1fr;
        grid-template-columns: auto;
    }

    /** 服务团队 **/
    .server-team{
        grid-template-columns: 4fr 5fr;
    }

    /** 轮播 start **/
    .text-overlay .text{
        width: 480px;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .text-overlay .title{
        font-size: 20px;
        margin-bottom: 10px;
    }

    .text-overlay .primary-title{
        font-size: 30px;
        margin-bottom: 10px;
    }
    .reset-left{
        left: 20px;
        height: 40px;
    }

    .reset-right{
        right: 20px;
        height: 40px;
    }

    .banner h1{
        font-size: calc(42vw / 6);
        left: calc(20vw / 6);
        bottom: calc(20vw / 6) ;
    }
    .banner span{
        font-size: calc(10vw / 6);
        width: 40%;
        line-height: calc(20vw / 6);
        right: calc(20vw / 6);
        bottom: calc(20vw  / 6);
    }

    /** 关于我们 - 圆环 **/

    .circle-item{
        width: 150px;
        height: 150px;
        padding-top: 35px;
    }

    .circle-item .title{
        font-size: 20px;
    }

    .circle-item .circle-middle{
        margin: 6px 0;
    }

    .circle-item .desc{
        font-size: 12px;
    }
}

@media screen and (max-width: 599px)  {
    /**/
    .slide{
        max-width: calc(750vw / 6);
    }
    .slide img{
        width: 100%;
    }
    

    /** 通用标题 **/
    .common-title{
        font-size: calc(56vw / 6);
    }

    /** 首页轮播 **/
    .pagination {
        bottom: calc(50vw / 6);
    }
    
    .dot {
        width: calc(60vw / 6);
        height: calc(8vw / 6);
    }



    /** 联系我们报名 start**/
    .form-box{
        font-size: calc(18vw / 6);
        padding: calc(40vw / 6);
    }
    .form-title{
        font-size: 14px;
    }
    .form-item-label{
        padding:0;
        margin-bottom: calc(10vw / 6);
    }

    .form-item{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: calc(30vw / 6);
    }

    .form-item .form-item:not(:last-child){
        margin-bottom: calc(30vw / 6);
    }

    .submit-button{
        margin-left: 0;
        width: calc(150vw / 6);
        height: calc(50vw / 6);
        line-height: calc(50vw / 6);
        margin-top: calc(80vw / 6);
    }

    .form-item-content{
        width: 100%;
    }

    .form-item-input{
        height: calc(50vw / 6);
    }

    .radio-box{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .radio-box .form-radio:not(:last-child){
        margin-bottom: 10px;
    }

    /* .form-item-content .form-radio:not(:last-child){
        margin-right: calc(10vw/ 6);
        
    }
    .form-item-content .form-radio.active{
        padding: 4px calc(10vw / 6);
        border-radius: 4px;
        background-color: #000f8f;
        color: #FFF;
    }

    .form-item-content .form-radio::before{
        width: 0;
        height: 0;
        border: 0;
    } */


    .qr-code{
        width: calc(160vw / 6);
        bottom: calc(8vw / 6);
        right: calc(14vw / 6);
    }
    /** 联系我们报名 end**/

    /** 首页风控合规 **/
    .compliance-title{
        font-size: calc(52vw / 6);
    }

    .app-container{
        width: calc(500vw / 6);
        padding: calc(80vw / 6) 0;
    }

    /** 通用 **/
    .common-grid {
        display: block;
    }

    .common-grid .common-grid-card:not(:last-child){
        margin-bottom: calc(20vw / 6);
    }

    .reset-grid{
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: auto;
    }
    .reset-grid.compliance{
        grid-template-rows: 1fr 1fr;
        grid-template-columns: auto;
    }

    /** 我们的服务/服务优势 **/

    /** 服务团队 **/
    .server-team{
        display: block;
    }

    /** 研究- 轮播 - start **/    
    .text-overlay .text{
        width: calc(400vw / 6);
        font-size: calc(14vw / 6);
        line-height: calc(26vw / 6);
        margin-bottom: 10px;
    }

    .text-overlay .title{
        font-size: calc(18vw / 6);
        margin-bottom: 10px;
    }

    .text-overlay .primary-title{
        font-size: calc(24vw / 6);
        margin-bottom: 10px;
    }
    .reset-left{
        left: calc(20vw / 6);
        height: calc(40vw / 6);
    }

    .reset-right{
        right: calc(20vw / 6);
        height: calc(40vw / 6);
    }
    /** 研究- 轮播 - end **/
    /** 研究 - 顶部 - start **/
    .banner h1{
        font-size: calc(42vw / 6);
        left: calc(20vw / 6);
        bottom: calc(20vw / 6) ;
    }
    .banner span{
        font-size: calc(10vw / 6);
        width: 40%;
        line-height: calc(20vw / 6);
        right: calc(20vw / 6);
        bottom: calc(20vw  / 6);
    }
    /** 研究 - 顶部 - end **/

    .card1:first-child{
        margin-bottom: calc(20vw / 6);
    }

    .menu{ 
        display: none;
    }
    .menu-icon{
        display: inline-block;
    }


    /** 通用城市 **/
    .contact-us .citys span{
        font-size: calc(22vw / 6);
    }

    /** 关于我们 - 圆环 **/
    .circle-item{
        width: calc(150vw / 6);
        height: calc(150vw / 6);
        padding-top: calc(35vw /6 );
    }

    .circle-item .title{
        font-size: calc(22vw / 6);
    }

    .circle-item .circle-middle{
        margin: calc(6vw / 6) 0;
    }

    .circle-item .desc{
        font-size: calc(12vw / 6);
    }
    /** 关于我们团队 **/

    .center-users{
        grid-template-columns:repeat(auto-fill,calc(260vw / 6 * 0.8));
        column-gap: calc(20vw / 6);
        row-gap: calc(50vw / 6);
    }
    .center-user-card{
        width: calc(260vw / 6 * 0.8);
        border-radius: calc(10vw / 6);
    }
    .center-user-card .avatar{
        width: calc(260vw / 6 * 0.8);
        height: calc(240vw / 6 * 0.8);
        background-size: cover !important;
    }

}