/* @font-face {
    font-family: 'OPPOSans';
    src: url('/assets/fonts/OPPOSans-L.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} */

:root{
    --primary-color: #56b5b1;
    --text-color: #7E6BD4;
    --theme-color: #7E6BD4;
    --primary-font: 'Urbanist', sans-serif;
    --secondary-font: 'OPPOSans', sans-serif;
}

body {
    font-size:20px;
    line-height:32px;
    font-weight:400;
    color: #6A6A6A;
    background-size:cover;
    font-style: normal;
    /* font-family: var(--secondary-font); */
    background-repeat:no-repeat;
    background-position:center top;
    -webkit-font-smoothing: antialiased;
}
.boxed_wrapper {
    position: relative;
    overflow-x: hidden;
    margin: 0 auto;
    width: 100%;
    background-color: #0c0325;
    min-width: 300px;
}




.shou-dan .shou-dan-banner-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

@media (max-width:1200px) {
    .shou-dan .shou-dan-banner-logo {
        padding: 80px 0 10px;
    }
}

.shou-dan .shou-dan-banner-logo .banner-img-wrapper {
    width: 55%;
    /*aspect-ratio: 16/9;*/
    overflow: hidden;
}

.shou-dan .shou-dan-banner-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shou-dan .shou-dan-banner-logo .text {
    width: 40%;
}

.shou-dan .shou-dan-banner-logo .text .title {
    font-size: 47px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
}

.shou-dan .data-btn {
    background: #15dafc;
    width: 203px;
    height: 41px;
    border-radius: 20px;
    margin-top: 25px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0c0325;
    font-size: 17px;
}

@media (max-width: 999px) {
    .shou-dan .shou-dan-banner-logo .text .title {
        font-size: 28px;
        color: #ffffff;
        line-height: 1.2;
        margin-bottom: 20px;
    }

}

.shou-dan .shou-dan-banner-logo .desc {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: #7E6BD4;
}


/* 1. 中屏适配（平板：768px - 1199px） */
@media (max-width: 1199px) {
    .shou-dan .shou-dan-banner-logo .banner-img-wrapper {
        width: 50%; /* 中屏图片占比缩小 */
    }
    .shou-dan .shou-dan-banner-logo .text {
        width: 45%; /* 中屏文字占比扩大 */
    }

}

/* 2. 小屏适配（手机：≤767px） */
@media (max-width: 767px) {
    .shou-dan .shou-dan-banner-logo {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .shou-dan .shou-dan-banner-logo .banner-img-wrapper {
        width: 100%;
        aspect-ratio: 4/3; /
    }
    .shou-dan .shou-dan-banner-logo .text {
        width: 100%;
    }
}


/* item区域 */
.sd-item .item-content .detail .img-logo{
    height: 200px;
    width: 200px;
}
@media (max-width: 768px) {
    .sd-item .item-content .detail .img-logo{
        height: 150px;
        width: 150px;
    }
}
.sd-item .item-content{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
}
.sd-item  .detail .img-logo img{
    height: 100%;
    width: 100%;
}
.sd-item  .detail{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.sd-item  .detail .text{
    text-align: center;
}
.sd-item  .detail .text .title{
    font-size: 24px;
    color: #ffffff;
}

.sd-item  .detail .text .desc{
    font-size: 14px;
    font-weight: bold;
    color: #7E6BD4;
    /*padding-top: 30px;*/
}

/* 信用卡区域 */
.xy-cards {
    text-align: center;
    padding: 60px 0;
}

.xy-cards .xyk-content {
    display: flex;
    gap: 30px;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.xy-cards .title {
    font-size: 23px;
    color: #ffffff;
    text-align: center;
    padding: 30px 0;
}

.xy-cards .xyk-content .xyk-item {
    text-align: left;
    width: auto;
    height: 100%;
    cursor: pointer;
}

.xy-cards .xyk-content .xyk-item .xyk-item-content {
    width: 180px;
    height: 230px;
    background-color: #36335b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.xy-cards .xyk-content .xyk-item .xyk-index {
    color: #3D5BD6;
    font-size: 14px;
    margin-top: 15px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.xy-cards .xyk-content .xyk-item .xyk-index-active {
    color: #15dafc;
}

/* 选中和悬浮状态的样式 */
.xy-cards .xyk-content .xyk-item:hover .xyk-item-content,
.xy-cards .xyk-content .xyk-item .xyk-item-content.xyk-active {
    background-color: #15dafc;
    /*width: 270px;*/
    /*height: 250px;*/
    transform: scaleX(1.6) scaleY(1.2);
}

.xy-cards .xyk-content .xyk-item .xyk-item-content img {
    height: 120px;
    width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease, height 0.3s ease;
}

/* 选中和悬浮时图片旋转90度 */
.xy-cards .xyk-content .xyk-item:hover .xyk-item-content img,
.xy-cards .xyk-content .xyk-item .xyk-item-content.xyk-active img {
    transform: rotate(90deg);
    height: 150px;
}

/* 悬浮时索引文字变色 */
.xy-cards .xyk-content .xyk-item:hover .xyk-index,
.xy-cards .xyk-content .xyk-item .xyk-index.xyk-index-active {
    color: #15dafc;
}


/* ---------------- 提高成功支付率 ------------------   */

.tg-pay {
    padding: 60px 0;
}

.tg-pay .container {
    width: 100%;
    max-width: 1200px; /* 桌面端容器最大宽度，避免内容过宽 */
    margin: 0 auto;
    padding: 0 20px; /* 左右内边距，防止内容贴边 */
}

.tg-pay .title {
    font-size: 23px;
    color: #ffffff;
    text-align: center;
    padding-bottom: 40px;
}

.tg-pay .tg-pay-content {
    display: flex;
    flex-direction: column;
    gap: 40px; /* 增大上下区域间距，提升呼吸感 */
}

/* 顶部区域布局 */
.tg-pay .tg-pay-content .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px; /* 增加左右间距，避免内容拥挤 */
}

.tg-pay .tg-pay-content .top .descption {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 24px; /* 选项卡与文字区间距 */
}

/* 步骤选项卡样式 */
.tg-pay .tabs {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-pay .tabs .tabs-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 0 5px;
}

.tg-pay .tabs .name {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.tg-pay .tabs .line {
    height: 24px;
    width: 1px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.tg-pay .tabs .active-name {
    color: #15dafc !important;
}

.tg-pay .tabs .active-line {
    background: #15dafc !important;
}


.tg-pay .tg-pay-content .top .descption .text {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.6;
    display: none;
}

.tg-pay .tg-pay-content .top .descption .text.active-text {
    display: block;
}

/* 图片容器通用样式 */
.tg-pay .tg-pay-content .img-logo {
    flex: 1;
    height: auto;
    min-height: 220px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 1000px;
    border: 1px solid #01138f;
    padding: 20px;
    box-sizing: border-box;
}

.tg-pay .tg-pay-content .img-logo img {
    width: auto;
    height: 180px;
    max-width: 100%;
    object-fit: contain;
}

.tg-pay .tg-pay-content .top .img-logo {
    justify-content: flex-end;
}

.tg-pay .tg-pay-content .down .img-logo {
    justify-content: flex-start;
}


.tg-pay .tg-pay-content .img-logo .text {
    padding: 0 15px;
}

.tg-pay .tg-pay-content .img-logo .text1 {
    padding-bottom: 12px;
    color: #ffffff;
    font-size: 18px;
    display: none;
}

.tg-pay .tg-pay-content .img-logo .text2 {
    color: #7E6BD4;
    font-size: 14px;
    line-height: 1.6;
    display: none;
}

.tg-pay .tg-pay-content .img-logo .text1.active-text,
.tg-pay .tg-pay-content .img-logo .text2.active-text {
    display: block;
}

/* 底部区域布局（与顶部对称） */
.tg-pay .tg-pay-content .down {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.tg-pay .tg-pay-content .down .descption {
    flex: 0 0 40%;
}

/* -------------- 响应式断点：平板（769px-1199px）-------------- */
@media (max-width: 1199px) {
    .tg-pay {
        padding: 40px 0; /* 减少上下 padding，适配中屏 */
    }

    .tg-pay .title {
        font-size: 20px;
        padding-bottom: 30px;
    }

    .tg-pay .tabs {
        gap: 20px; /* 缩小选项卡间距 */
    }

    .tg-pay .tabs .name {
        font-size: 14px;
    }

    .tg-pay .tg-pay-content .img-logo {
        gap: 20px; /* 缩小图片与文字间距 */
        padding: 15px;
    }

    .tg-pay .tg-pay-content .img-logo img {
        height: 150px; /* 缩小图片高度 */
    }

    .tg-pay .tg-pay-content .img-logo .text1 {
        font-size: 16px;
    }

    .tg-pay .tg-pay-content .img-logo .text2 {
        font-size: 13px;
    }
}

/* -------------- 响应式断点：移动端（≤768px）-------------- */
@media (max-width: 768px) {
    .tg-pay {
        padding: 30px 0;
    }

    .tg-pay .title {
        font-size: 18px;
        padding-bottom: 20px;
    }

    /* 选项卡改为横向滚动，避免换行 */
    .tg-pay .tabs {
        gap: 15px;
        overflow-x: auto; /* 横向滚动 */
        padding-bottom: 8px; /* 底部留白，提示可滚动 */
        scrollbar-width: none; /* 隐藏滚动条（Firefox） */
    }

    .tg-pay .tabs::-webkit-scrollbar {
        display: none; /* 隐藏滚动条（Chrome/Safari） */
    }

    .tg-pay .tabs .tabs-item {
        flex-shrink: 0; /* 禁止选项卡收缩 */
    }

    /* 顶部/底部区域改为垂直堆叠 */
    .tg-pay .tg-pay-content .top,
    .tg-pay .tg-pay-content .down {
        flex-direction: column;
        align-items: flex-start; /* 文字左对齐，符合移动端阅读习惯 */
    }

    .tg-pay .tg-pay-content .top .descption,
    .tg-pay .tg-pay-content .down .descption {
        flex: 0 0 100%; /* 文字区占满宽度 */
        width: 100%;
    }

    /* 步骤文字标题适配移动端 */
    .tg-pay .tg-pay-content .top .descption .text div {
        font-size: 20px !important; /* 强制覆盖内联样式 */
    }

    /* 图片容器改为垂直方向（文字在上，图片在下），圆角调整为更柔和的样式 */
    .tg-pay .tg-pay-content .img-logo {
        flex-direction: column;
        gap: 15px;
        border-radius: 20px; /* 移动端圆角更柔和，避免过大弧度 */
        text-align: center; /* 文字居中，提升视觉效果 */
        width: 100%; /* 图片区占满宽度 */
        min-height: auto;
    }

    .tg-pay .tg-pay-content .img-logo img {
        height: 120px; /* 进一步缩小图片高度 */
    }

    .tg-pay .tg-pay-content .img-logo .text1 {
        font-size: 15px;
        padding-bottom: 8px;
    }

    .tg-pay .tg-pay-content .img-logo .text2 {
        font-size: 12px;
    }

    /* 底部区域图片容器顺序调整（保持与顶部一致的垂直堆叠） */
    .tg-pay .tg-pay-content .down .img-logo {
        flex-direction: column;
    }
}
/* 您的全球金融能力化为现实 */
.ac-process .title{
    font-size: 23px;
    color: #ffffff;
    text-align: center;
    padding: 60px 0;
}

.ac-process .ac-process-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ac-process .ac-process-content .ac-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ac-process .ac-process-content .circle {
  width: 60px;
    height: 60px;
    font-size: 34px;
    color: #FFFEFE;
    background-color: #01138f;
    border-radius:100% ;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 10px #0c0325, 0 0 0 12px #01138f, 0 0 0 20px #0c0325;
}

.ac-process .ac-process-content .ac-name{
    font-size: 18px;
    color: #ffffff;
    padding: 20px 0;
}
.ac-process .ac-process-content .ac-desc{
    font-size: 14px;
    color: #7E6BD4;
}

.ac-process .ac-process-content .ac-logo{
   width: 50%;
}

.ac-process .ac-process-content .ac-line{
    height: 64px;
    width: 2px;
    border: 1px dashed #01138f;
    margin: 10px 0;
}