/* ========================================================= 
   OUR TRADE PROCESS 
   PC：保持原版横向9步骤 
   Mobile：3列卡片式流程 
   ========================================================= */ 
 
.trade-process-wrap { 
    width: 100%; 
    max-width: 1920px; 
    min-height: 520px; 
    padding: 25px 30px; 
    box-sizing: border-box; 
    font-family: inherit; 
    margin: 0 auto; 
} 
 
 
/* ========================================================= 
   标题 
   ========================================================= */ 
 
.trade-main-title { 
    text-align: center; 
    font-size: 36px; 
    font-weight: normal; 
    color: #32373B; 
    margin: 0 0 10px 0; 
} 
 
.trade-sub-desc { 
    text-align: center; 
    font-size: 18px; 
    color: #32373B; 
    margin-bottom: 70px; 
} 
 
 
/* ========================================================= 
   PC 横向时间轴 
   ========================================================= */ 
 
.timeline-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    position: relative; 
    gap: 12px; 
} 
 
/* PC 横线 */ 
.timeline-container::before { 
    content: ""; 
    position: absolute; 
    height: 2px; 
    background: #707c8c; 
    left: 40px; 
    right: 40px; 
    top: 40px; 
    z-index: 1; 
} 
 
.timeline-item { 
    width: 10.6%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
    z-index: 2; 
    cursor: pointer; 
} 
 
 
/* ========================================================= 
   PC 圆圈 
   ========================================================= */ 
 
.timeline-circle { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    font-size: 36px; 
    font-weight: bold; 
 
    color: #0BAF4D; 
    background-color: #32373B; 
 
    margin-bottom: 20px; 
 
    border: 2px solid transparent; 
    box-sizing: border-box; 
 
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.1); 
 
    transition: 
        all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
} 
 
 
/* 第9个绿色圆圈 */ 
 
.timeline-circle.gold-bg { 
    background: #0BAF4D; 
    color: #FFFFFF; 
 
    box-shadow: 
        0 4px 14px rgba(11, 175, 77, 0.3); 
} 
 
 
/* ========================================================= 
   PC Hover 
   ========================================================= */ 
 
.timeline-item:hover .timeline-circle { 
    transform: translateY(-5px); 
 
    background-color: #0BAF4D; 
    color: #FFFFFF; 
 
    box-shadow: 
        0 8px 20px rgba(11, 175, 77, 0.45); 
} 
 
.timeline-item:hover .timeline-circle.gold-bg { 
    background-color: #32373B; 
    color: #0BAF4D; 
 
    border-color: #0BAF4D; 
 
    box-shadow: 
        0 8px 20px rgba(50, 55, 59, 0.4); 
} 
 
.timeline-item:hover h4 { 
    color: #0BAF4D; 
} 
 
.timeline-item:active .timeline-circle { 
    transform: translateY(-2px); 
} 
 
 
/* ========================================================= 
   PC 文字 
   ========================================================= */ 
 
.timeline-item h4 { 
    font-size: 15px; 
    text-align: center; 
 
    color: #32373B; 
 
    margin: 0 0 8px 0; 
 
    line-height: 1.35; 
    font-weight: 700; 
 
    transition: 
        color 0.25s ease; 
} 
 
.timeline-item p { 
    font-size: 13px; 
    text-align: center; 
 
    color: #32373B; 
 
    margin: 0; 
 
    line-height: 1.45; 
} 
 
 
/* ========================================================= 
   TABLET / MOBILE 
   900px 以下 
   ========================================================= */ 
 
@media (max-width: 900px) { 
 
    .trade-process-wrap { 
        min-height: auto; 
        padding: 30px 20px 40px; 
    } 
 
    .trade-main-title { 
        font-size: 30px; 
        line-height: 1.25; 
    } 
 
    .trade-sub-desc { 
        font-size: 16px; 
        line-height: 1.5; 
        margin-bottom: 35px; 
    } 
 
 
    /* ===================================================== 
       手机端：3列网格 
       ===================================================== */ 
 
    .timeline-container { 
 
        display: grid; 
 
        grid-template-columns: repeat(3, minmax(0, 1fr)); 
 
        column-gap: 18px; 
 
        row-gap: 30px; 
 
        align-items: start; 
 
        position: relative; 
    } 
 
 
    /* 关闭PC横向连接线 */ 
 
    .timeline-container::before { 
        display: none; 
    } 
 
 
    /* ===================================================== 
       每一个步骤 
       数字在上，标题在下 
       ===================================================== */ 
 
    .timeline-item { 
 
        width: 100%; 
 
        display: flex; 
 
        flex-direction: column; 
 
        align-items: center; 
 
        gap: 0; 
 
        position: relative; 
 
        z-index: 2; 
 
        cursor: pointer; 
 
        box-sizing: border-box; 
 
        padding: 0; 
 
        text-align: center; 
    } 
 
 
    /* ===================================================== 
       手机圆圈 
       ===================================================== */ 
 
    .timeline-circle { 
 
        width: 50px; 
 
        min-width: 50px; 
 
        height: 50px; 
 
        min-height: 50px; 
 
        flex: 0 0 50px; 
 
        font-size: 22px; 
 
        margin-bottom: 10px; 
 
        position: relative; 
 
        z-index: 3; 
 
        box-shadow: 
            0 3px 8px rgba(0, 0, 0, 0.12); 
    } 
 
 
    /* ===================================================== 
       手机文字区域 
       ===================================================== */ 
 
    .timeline-item > div:not(.timeline-circle) { 
 
        width: 100%; 
 
        min-width: 0; 
 
        display: flex; 
 
        flex-direction: column; 
 
        align-items: center; 
    } 
 
 
    /* ===================================================== 
       手机主标题 
       ===================================================== */ 
 
    .timeline-item h4 { 
 
        font-size: 14px; 
 
        line-height: 1.35; 
 
        text-align: center; 
 
        margin: 0; 
 
        font-weight: 700; 
 
        color: #32373B; 
    } 
 
 
    /* ===================================================== 
       手机端隐藏第二段描述 
       ===================================================== */ 
 
    .timeline-item p { 
 
        display: none; 
    } 
 
 
    /* ===================================================== 
       第9个恢复正常第三列 
       ===================================================== */ 
 
    .timeline-item:nth-child(9) { 
 
        grid-column: auto; 
 
        width: 100%; 
 
        justify-self: auto; 
    } 
 
 
    /* ===================================================== 
       手机 Hover 
       ===================================================== */ 
 
    .timeline-item:hover .timeline-circle { 
 
        transform: scale(1.04); 
 
        background-color: #0BAF4D; 
 
        color: #FFFFFF; 
 
        box-shadow: 
            0 6px 15px rgba(11, 175, 77, 0.35); 
    } 
 
    .timeline-item:hover .timeline-circle.gold-bg { 
 
        background-color: #32373B; 
 
        color: #0BAF4D; 
 
        border-color: #0BAF4D; 
 
        box-shadow: 
            0 6px 15px rgba(50, 55, 59, 0.35); 
    } 
 
    .timeline-item:hover h4 { 
        color: #0BAF4D; 
    } 
 
} 
 
 
/* ========================================================= 
   小手机 
   600px 以下 
   ========================================================= */ 
 
@media (max-width: 600px) { 
 
    .trade-process-wrap { 
 
        padding: 
            26px 
            14px 
            35px; 
    } 
 
 
    .trade-main-title { 
 
        font-size: 27px; 
 
        margin-bottom: 8px; 
    } 
 
 
    .trade-sub-desc { 
 
        font-size: 14px; 
 
        line-height: 1.5; 
 
        margin-bottom: 30px; 
 
        padding: 0 5px; 
    } 
 
 
    /* ===================================================== 
       手机继续保持3列 
       ===================================================== */ 
 
    .timeline-container { 
 
        grid-template-columns: 
            repeat(3, minmax(0, 1fr)); 
 
        column-gap: 10px; 
 
        row-gap: 26px; 
    } 
 
 
    /* 圆圈缩小 */ 
 
    .timeline-circle { 
 
        width: 44px; 
 
        min-width: 44px; 
 
        height: 44px; 
 
        min-height: 44px; 
 
        flex: 0 0 44px; 
 
        font-size: 20px; 
 
        margin-bottom: 9px; 
    } 
 
 
    .timeline-item { 
 
        gap: 0; 
 
    } 
 
 
    .timeline-item h4 { 
 
        font-size: 13px; 
 
        line-height: 1.3; 
 
        margin: 0; 
 
        text-align: center; 
    } 
 
 
    /* 手机端副文案隐藏 */ 
 
    .timeline-item p { 
 
        display: none; 
 
    } 
 
 
    /* 第9个正常排列 */ 
 
    .timeline-item:nth-child(9) { 
 
        width: 100%; 
 
        grid-column: auto; 
 
        justify-self: auto; 
 
    } 
 
} 
 
 
/* ========================================================= 
   超小屏 
   390px 以下 
   ========================================================= */ 
 
@media (max-width: 390px) { 
 
    .trade-process-wrap { 
 
        padding-left: 10px; 
        padding-right: 10px; 
    } 
 
 
    .timeline-container { 
 
        column-gap: 7px; 
 
        row-gap: 24px; 
    } 
 
 
    .timeline-item { 
 
        gap: 0; 
 
    } 
 
 
    .timeline-circle { 
 
        width: 40px; 
 
        min-width: 40px; 
 
        height: 40px; 
 
        min-height: 40px; 
 
        flex: 0 0 40px; 
 
        font-size: 18px; 
 
        margin-bottom: 8px; 
    } 
 
 
    .timeline-item h4 { 
 
        font-size: 12px; 
 
        line-height: 1.3; 
 
        text-align: center; 
 
        margin: 0; 
 
    } 
 
 
    .timeline-item p { 
 
        display: none; 
 
    } 
 
}