.banner2{min-height: 600px;}
.banner2 .w1200{height: 480px;}
/* section */

section{
    margin-bottom:40px;
}

.section-tag{
    font-size:16px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:25px;
}
.section-tag span{color: transparent;background: var(--jianbian);background-clip: text}
.section-tag::after{
    content:"";
    display:block;
    width:50px;
    height:2px;
    margin-top:10px;
    background:var(--jianbian);
}

/* mission */
.huibj{background:#f5f8fd}
.mission-section{
    max-width:1200px;
    padding:80px 0;
    margin:0 auto;
    display:flex;
    gap:40px;
}

.mission-left{
    flex:1;
}
.mission-left p{line-height: 1.5;color: #787878;font-size: 17px;}

.mission-right{
    display:flex;
    background:#e1eaf7;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);flex:0 0 59%;align-items: center;
}

.hero-image{
    flex:0 0 50%;
    background:#dceeff;
    min-height:420px;
}

.benefits{
    flex:0 0 50%;
    padding:20px;
}

.benefit-item{
    display: flex;gap: 20px;padding: 10px 0;
}
.icon img{width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(var(--white), var(--white)), linear-gradient(99deg, #0069D7 35%, #53F1A4 96%);
    padding: 10px;}
.ncontent{flex: 1;}
.ncontent h4{margin: auto;font-size: 16px;color:#040e75}
.ncontent p{color:#787878;font-size: 16px;}
/* title */

.about-page h2{
    
    margin:25px 0;
}

.about-page h2 span{
    display:block;
font-size: 30px;
    background:
    linear-gradient(
      90deg,
      #1163ff,
      #67d9c5
    );
line-height:1.5;
    -webkit-background-clip:text;
    color:transparent;
}

/* value cards */

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.value-card{
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.1);
    display: flex;padding: 20px 0 180px 20px;position: relative;
}

.value-card h3{
    padding:10px 20px 10px;color: #040e75;
}
.value-card h3::after{content: '';display: block;height: 3px;width: 60px;background: var(--jianbian);margin-top: 20px;}

.value-card p{
    padding:0 20px;color:#787878;font-size: 16px;line-height: 1.5;
}

.card-image{
    margin-top:30px;
}
.card-image img{border-radius: 20px;}
/* journey */
.journey-page{padding: 50px 0 30px;}
.journey-section{
    background:#fbfcfe url(/assets/images/about/4.jpg) right top no-repeat;background-size:80% auto;
    border-radius:28px;
    padding:50px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
    max-width: 1200px;
    margin: 0 auto;
}
.journey-section h2{font-size: 46px;color:#040e75}
.journey-section p{max-width: 420px;color: #787878;}
.journey-banner{
    height:80px;
    border-radius:20px;
    margin:40px 0;
}

.timeline{
    position:relative;
    display:flex;
    justify-content:center;
    gap: 21%;
    margin:50px 0;
}

.timeline-line{
    position:absolute;
    top:20px;
    left:0;
    right:0;
    height:2px;

    background:
    linear-gradient(
      90deg,
      rgba(29,100,255,0),
      #1d64ff,
      #69e19e,
      rgba(29,100,255,0)
    );
}

.circle{
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;color: #fff;gap: 10px;
}
.timeline-step1 .circle{background: #0552e2;}
.timeline-step2 .circle{background: #3287b8;}
.timeline-step3 .circle{background: #4180c9;}
.timeline-step4 .circle{background: #60ceb0;}

.journey-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.journey-card{background: #fff;box-shadow: 0 0 30px rgba(0,0,0,.1);border-radius: 20px;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;}
.journey-card h3{padding: 20px 20px 0;}
.journey-card p{padding: 0px 20px;}
.titlecolor1{color: #040e75;}
.titlecolor2{color: #3287b8;}
.titlecolor3{color: #4180c9;}
.titlecolor4{color: #3fb9a9;}
/* services */

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.service-card{
    background:white;
    border-radius:20px;
    padding:10px 30px 30px;
    min-height:320px;
    box-shadow:0 10px 25px rgba(0,0,0,.04);
}
.service-card h3{color: #040e75;padding: 10px 0 0;font-size:20px}
.service-card h3::after{content: '';display: block;height: 3px;width: 40px;background: var(--jianbian);margin-top: 10px;}
.service-card p{color: #787878;line-height:1.5}

.baibj{background: #fff;}
.values-section{max-width: 1200px;margin: 0 auto;padding: 80px 0;}
.bcontent{flex: 1;}
.value-card1{background: url(/assets/images/about/1.jpg) center bottom no-repeat #fcfcfd;background-size: 100% auto;}
.value-card2{background: url(/assets/images/about/2.jpg) center bottom no-repeat #fcfcfd;background-size: 100% auto;}
.value-card3{background: url(/assets/images/about/3.jpg) center bottom no-repeat #fcfcfd;background-size: 100% auto;}
.iconbox{position: absolute;width: 100px;height: 100px;background: #fff;box-shadow: 0 0 30px rgba(0,0,0,.1);display: flex;justify-content: center;align-items: center;border-radius: 50%;color:#040e75;margin:-120px 0 0 -30px;}
.iconbox .iconfont{font-size: 36px;}
.services-section{background: #fff;max-width: 1200px;margin: 0 auto;padding: 50px 50px 0;border-radius: 20px;}


/* ===== about.css — 响应式适配 ===== */
@media screen and (max-width:1024px){
  .mission-right{flex:auto;flex-direction:column}
  .hero-image{min-height:250px;flex:auto}
  .benefits{flex:auto}
  .timeline{gap:15%}
  .journey-cards{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .journey-section h2{font-size:32px}
}

@media screen and (max-width:480px){
  .value-card{padding:15px 15px 80px 15px;min-height:auto}
  .hero-image{min-height:180px}
  .benefits{padding:12px}
  .icon img{width:50px;height:50px;padding:8px}
  .benefit-item{gap:10px}
  .about-page h2 span{font-size:20px}
  .journey-section h2{font-size:22px}
  .journey-section p{font-size:14px}
  .timeline{gap:8px}
  .circle{width:30px;height:30px;font-size:12px}
  .journey-card h3{font-size:16px}
  .journey-card p{font-size:13px}
  .services-section{padding:15px;margin:0 5px}
  .service-card{min-height:auto;padding:15px}
  .service-card h3{font-size:16px}
  .service-card p{font-size:14px}
  .values-section{padding:20px 15px}
  .section-tag{font-size:10px}
}