/* =====================================================
   About V3.0
   深圳市显科科技有限公司
   企业实力展示页
===================================================== */


/* =========================
   Common
========================= */


.about-hero,
.about-company,
.about-history,
.about-capability,
.about-rd,
.about-honor,
.about-partner,
.about-vision{

    overflow:hidden;

}


.section-title{

    text-align:center;
    font-size:36px;
    font-weight:700;
    color:#12263f;
    margin-bottom:18px;

}


.section-desc{

    max-width:760px;
    margin:0 auto 50px;

    text-align:center;

    color:#667085;

    line-height:1.8;

}



/* =========================
   Hero
========================= */


.about-hero{

    height:420px;

    margin-top:68px;

    display:flex;

    align-items:center;

    background:

    linear-gradient(
        rgba(3,24,55,.25),
        rgba(3,24,55,.25)
    ),

    url("../../images/about/banner.svg")

    center/cover no-repeat;


    color:white;

}



.about-hero__content{
    max-width:700px;

    text-align:left;

    width:100%;

}


.about-hero h1{

    font-size:48px;

    letter-spacing:2px;

    margin-bottom:25px;

}


.about-hero p{

    font-size:20px;

    line-height:2;

    opacity:.9;

}





/* =========================
 Company Intro
========================= */


.company-grid{

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:70px;

    align-items:center;

}



.company-text h2{

    font-size:36px;

    margin-bottom:30px;

    color:#12263f;

}



.company-text p{

    font-size:16px;

    line-height:2;

    color:#555;

    margin-bottom:18px;

}



.company-image img{

    width:100%;

    border-radius:18px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}



/* =========================
 Data
========================= */


.about-data{

    padding:70px 0;

    background:#1a3a5c;

    color:white;

}



.data-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

}



.data-item{

    text-align:center;

}



.data-item strong{

    display:block;

    font-size:52px;

    font-weight:700;

    margin-bottom:10px;

}



.data-item span{

    font-size:16px;

    opacity:.9;

}





/* =========================
 Timeline
========================= */


.timeline{

    position:relative;

    max-width:1200px;

    margin:60px auto 0;

}



.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    background:#1a3a5c;

    transform:translateX(-50%);

}



.timeline-item{

    width:50%;

    padding:25px 50px;

    position:relative;

}



.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}


.timeline-item:nth-child(even){

    left:50%;

}



.timeline-item::before{

    content:"";

    width:14px;

    height:14px;

    background:#1a3a5c;

    border-radius:50%;


    position:absolute;

    top:32px;

}



.timeline-item:nth-child(odd)::before{

    right:-7px;

}



.timeline-item:nth-child(even)::before{

    left:-7px;

}



.timeline-item .year{

    color:#1a3a5c;

    font-size:28px;

    font-weight:bold;

    margin-bottom:10px;

}





/* =========================
 Capability
========================= */


.capability-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}



.capability-card{

    padding:35px 25px;

    background:white;

    border-radius:16px;

    box-shadow:

    0 10px 40px rgba(0,0,0,.08);


    transition:.35s;

}



.capability-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 50px rgba(26,58,92,.2);

}



.capability-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#1a3a5c;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}



.capability-card h3{

    margin-bottom:15px;

    font-size:22px;

}



.capability-card p{

    color:#666;

    line-height:1.8;

}





/* =========================
 R&D
========================= */


.section-gray{

    background:#f5f8fc;

}



.rd-grid{

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:70px;

    align-items:center;

}



.rd-image img{

    width:100%;

    border-radius:18px;

}



.rd-content h2{

    font-size:34px;

    margin-bottom:25px;

}



.rd-content p{

    line-height:1.9;

    color:#555;

}



.rd-content ul{

    margin-top:25px;

}



.rd-content li{

    margin-bottom:15px;

}





/* =========================
 Honor
========================= */


.honor-grid{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



.honor-card{

    background:white;

    padding:20px;

    border-radius:12px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.06);

}



.honor-card img{

    width:100%;

    height:220px;

    object-fit:contain;

}



.honor-card p{

    margin-top:15px;

    color:#333;

}





/* =========================
 Partner
========================= */


.partner-grid{

    display:grid;

    grid-template-columns:

    repeat(6,1fr);

    gap:25px;

}



.partner-item{

    background:white;

    height:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

}



.partner-item img{

    max-width:80%;

    max-height:60px;

}





/* =========================
 Vision
========================= */


.about-vision{

    padding:100px 0;

    background:

    linear-gradient(
        135deg,
        #1a3a5c,
        #06345c
    );

    color:white;

}



.vision-box{

    text-align:left;

}



.vision-box h2{

    font-size:42px;

    margin-bottom:25px;

}



.vision-box p{

    font-size:18px;

    margin-bottom:40px;

    opacity:.9;

}





/* =========================
 Animation
========================= */


.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:.5s ease;

}



.reveal.active{

    opacity:1;

    transform:none;

}




/* =========================
 Mobile
========================= */


@media(max-width:768px){


.about-hero{

    height:320px;

    margin-top:68px;

}


.about-hero h1{

    font-size:32px;

}


.about-hero p{

    font-size:15px;

}



.company-grid,
.rd-grid{

    grid-template-columns:1fr;

    gap:35px;

}



.data-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.data-item strong{

    font-size:36px;

}



.timeline::before{

    left:10px;

}



.timeline-item,
.timeline-item:nth-child(even),
.timeline-item:nth-child(odd){

    width:100%;

    left:0;

    text-align:left;

    padding-left:45px;

}



.timeline-item::before,
.timeline-item:nth-child(even)::before,
.timeline-item:nth-child(odd)::before{

    left:3px;

}



.capability-grid{

    grid-template-columns:1fr;

}



.honor-grid{

    grid-template-columns:1fr;

}



.partner-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.vision-box h2{

    font-size:28px;

}


}

/* ==========================
   首页SVG图标保护
   防止About页面样式污染
========================== */

.about__icon svg{

    width:36px !important;

    height:36px !important;

    max-width:36px;

    max-height:36px;

}
.about__icon{

    width:64px !important;

    height:64px !important;

    display:flex;

    align-items:center;

    justify-content:center;

}


.about__icon svg{

    width:32px !important;

    height:32px !important;

}