.hero{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-text{

    position:relative;

    width:100%;

    max-width:900px;

    text-align:center;

    margin:0 auto;

    z-index:10;

}

.hero h1{

    font-size:78px;

    line-height:1.1;

}

.hero p{

    width:700px;

    margin:35px auto 0;

    line-height:1.8;

}

.forward-hero{

    position:relative;

    width:100%;

    height:720px;

    background:url("/new/img/forward/hero-bg.jpg") center center no-repeat;

    background-size:cover;

}

.hero-mask{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.35);

}

.hero-wrap{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    height:100%;

}

.hero-text{

    color:#fff;

    width:700px;

}

.hero-small{

    display:block;

    color:#42a5ff;

    font-size:15px;

    letter-spacing:4px;

    margin-bottom:20px;

    font-weight:700;

}

.hero-text h1{

    font-size:76px;

    font-weight:700;

    margin-bottom:30px;

    line-height:1;

}

.hero-text p{

    font-size:22px;

    line-height:1.7;

}

.forward-product h3{

    font-size:34px;

    font-weight:700;

    line-height:1.25;

}

.forward-product h3 span{

    display:block;

    margin-top:6px;

    font-size:18px;

    font-weight:500;

}

.forward-product-wrap{

    display:flex;

    align-items:flex-start;

    flex-wrap:nowrap;


}

.forward-product{

    text-align:center;

    padding:0 10px;

}

.forward-product figure{

    margin-bottom:35px;

}

.forward-product p{

    margin:15px 0 25px;

    line-height:1.7;

}

.forward-product .btn-basic{

    margin-top:15px;

}

.forward-product figure{

    display:flex;

    justify-content:center;

    align-items:center;

	max-width:360px;
	
	min-height:360px;
	
	border:1px solid #dcdcdc;

}

.forward-product img{

    display:block;

    width:auto;

    max-width:100%;

    height:auto;



}

.forward-product .btn-basic{

    display:inline-block;

    width:170px;

    height:auto;

    background:#00569d;

    color:#fff;

    border-radius:0;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

/* ===========================
   WHY FORWARD SAFETY
=========================== */

.forward-banner{
    position: relative;
    height: 624px;
    background: url("/new/img/forward/why-bg.jpg") center center no-repeat;
    background-size: cover;
    overflow: hidden;
}

.banner-mask{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.forward-banner .innerV{
    height: 624px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-text{
    width: 100%;
    max-width: 1000px;
    text-align: center;
    color: #fff;
}

.banner-text h2{
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 30px;
}

.banner-text p{
    width: 820px;
    max-width: 90%;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.8;
}

.forward-why{

    display:flex;

    justify-content:space-between;

    padding:80px 0;

}

.why-item{

    width:31%;

    text-align:center;

}

.why-item h3{

    font-size:28px;

    margin-bottom:20px;

}

.why-item p{

    color:#666;

    line-height:1.8;

}

@media(max-width:768px){

    .forward-why{

        display:block;

    }

    .why-item{

        width:100%;

        margin-bottom:50px;

    }

}


/* =====================================
   FORWARD SAFETY across MOVON
===================================== */

.forward-across{

    position:relative;

    height:624px;

    background:url("/new/img/forward/across-bg.jpg") center center no-repeat;

    background-size:cover;

}

.across-mask{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.forward-across .innerV{

    height:624px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.across-title{

    text-align:center;

    color:#fff;

}

.across-title h2{

    font-size:64px;

    line-height:1.15;

}

.across-title p{

    width:760px;

    margin:35px auto 0;

    line-height:1.8;

}

.lineup-wrap{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;

}

.lineup-item{

    text-align:center;

}

.lineup-item h3{

    font-size:32px;
    font-weight:700;
    min-height:50px;
    margin-bottom:20px;

}

.lineup-sub{

    font-size:18px;
    line-height:1.7;
    min-height:70px;
    margin-bottom:30px;
}

.lineup-item figure{

    border:0px solid #dcdcdc;
    background:#fff;
    width:100%;
	height: auto;
	/*height:460px;*/

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:25px;
}

.lineup-item figure img{

    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}

.icon-wrap{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;

}

/* =====================================
   CORE CAPABILITIES
===================================== */

.forward-core{

    position:relative;

    width:100%;

    height:624px;

    background:url("/new/img/forward/core-bg.jpg") center center no-repeat;

    background-size:cover;

    overflow:hidden;

}

.core-mask{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.40);

}

.forward-core .innerV{

    position:relative;

    z-index:2;

    height:624px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.core-title{

    width:100%;

    max-width:1000px;

    text-align:center;

    color:#fff;

}

.core-title h2{

    font-size:72px;

    font-weight:700;

    margin-bottom:40px;

    line-height:1.1;

}

.core-title p{

    width:900px;

    max-width:90%;

    margin:0 auto;

    font-size:22px;

    line-height:1.7;

}

.capability-wrap{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:90px 70px;

    padding:90px 0;

}

.capability-item{

    text-align:center;

}

.capability-item img{
    margin-bottom:30px;

}

.capability-item h3{

    font-size:46px;

    font-weight:700;

    margin-bottom:20px;

}

.capability-item h4{

    font-size:28px;

    font-weight:500;

    margin-bottom:35px;

}

.capability-item p{

    width:320px;

    margin:0 auto;

    color:#8b8b8b;

    font-size:22px;

    line-height:1.8;

}

/* =====================================
   TECHNOLOGY ARCHITECTURE
===================================== */

.forward-tech-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/technology-bg.jpg") center center no-repeat;
    background-size:cover;

}

.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-tech-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}


/* List */

.tech-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:520px;
}

.tech-image{
    overflow:hidden;
}

.tech-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.tech-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 90px;
}

.tech-text h3{

    color:#00569d;
    font-size:42px;
    margin-bottom:35px;

}

.tech-text p{

    color:#6b6b6b;
    line-height:2;
    margin-bottom:25px;

}


/* =====================================
   TECHNOLOGY ARCHITECTURE
===================================== */

.technology-wrap{

    width:100%;

}

.technology-item{

    display:grid;

    grid-template-columns:50% 50%;

    min-height:540px;

}

.technology-item.reverse .technology-image{

    order:2;

}

.technology-item.reverse .technology-text{

    order:1;

}

.technology-image{

    width:100%;
    height:100%;

}

.technology-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

}

.technology-text{

    display:flex;

    align-items:center;

    background:#fff;

}

.technology-inner{

    width:100%;
    padding:50px;

}

.technology-inner h3{

    font-size:48px;

    color:#00569d;

    line-height:1.2;

    margin-bottom:45px;

}

.technology-inner p{

    font-size:22px;

    color:#666;

    line-height:2;

    margin-bottom:35px;

}


/* =====================================
   Real-World Driving Scenario
===================================== */

.forward-real-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/real-world-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-real-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Urban Traffic
===================================== */

.forward-urban-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/urban-traffic-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-urban-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Highway Driving
===================================== */

.forward-highway-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/forward-highway-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-highway-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Stop-and-Go Conditions
===================================== */

.forward-stop-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/forward-stop-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-stop-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}


/* =====================================
   Low-Visibility Environments
===================================== */

.forward-low-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/forward-low-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-low-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Commercial Vehicle Operation
===================================== */

.forward-commercial-hero{

    position:relative;
    height:620px;

    background:url("/new/img/forward/forward-commercial-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.forward-commercial-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}















/* ==========================
   Responsive (Tablet & Mobile)
========================== */

@media (max-width:1024px){

    .hero-text,
    .banner-text,
    .across-title,
    .core-title{
        width:90%;
        max-width:90%;
    }

    .hero h1,
    .hero-text h1{font-size:56px;}

    .banner-text h2,
    .across-title h2,
    .core-title h2{font-size:52px;}

    .lineup-wrap,
    .capability-wrap{
        gap:40px;
    }

    .capability-wrap{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){

    .forward-hero,
    .hero-wrap,
    .forward-banner,
    .forward-banner .innerV,
    .forward-across,
    .forward-across .innerV,
    .forward-core,
    .forward-core .innerV{
        height:420px;
    }

    .hero-text,
    .banner-text,
    .across-title,
    .core-title{
        width:90%;
        max-width:90%;
        margin:0 auto;
        text-align:center;
    }

    .hero-text h1{font-size:42px;line-height:1.2;margin-bottom:20px;}
    .hero-text p,
    .banner-text p,
    .across-title p,
    .core-title p{
        width:100%;
        max-width:100%;
        font-size:16px;
        line-height:1.7;
        margin:20px auto 0;
    }

    .banner-text h2,
    .across-title h2,
    .core-title h2{
        font-size:38px;
        line-height:1.2;
        margin-bottom:20px;
    }

    .forward-product-wrap{display:block;}
    .forward-product{
        width:100%;
        max-width:420px;
        margin:0 auto 70px;
    }
	
.forward-product figure{
    display:flex;
    justify-content:center;
    align-items:center;
	max-width:360px;
	min-height:300px;
}	

    .forward-product img{
        max-width:100%;
        height:auto;
        display:block;
        margin:0 auto;
    }

    .forward-product h3{font-size:36px;}
    .forward-product h3 span{font-size:18px;}
    .forward-product p{font-size:16px;}
    .forward-product .btn-basic{
        width:180px;
        height: auto;
        font-size:16px;
    }

    .lineup-wrap,
    .capability-wrap{
        grid-template-columns:1fr;
        gap:60px;
    }

    .lineup-item figure{
        height:auto;
        min-height:unset;
        padding:20px 0;
    }

    .capability-item img{
        margin-bottom:20px;
    }

    .capability-item h3{font-size:32px;}
    .capability-item h4{font-size:20px;margin-bottom:20px;}
    .capability-item p{
        width:90%;
        font-size:16px;
        line-height:1.7;
    }
}



/* =====================================
   Mobile Optimization (Additional)
===================================== */
@media (max-width:768px){

.forward-tech-hero,
.forward-tech-hero .innerV,
.forward-real-hero,
.forward-real-hero .innerV,
.forward-urban-hero,
.forward-urban-hero .innerV,
.forward-highway-hero,
.forward-highway-hero .innerV,
.forward-stop-hero,
.forward-stop-hero .innerV,
.forward-low-hero,
.forward-low-hero .innerV,
.forward-commercial-hero,
.forward-commercial-hero .innerV{
    height:420px;
}

.tech-hero-text{width:90%;}
.tech-hero-text h2{font-size:40px;line-height:1.2;margin-bottom:20px;}
.tech-hero-text p{width:100%;max-width:100%;font-size:16px;line-height:1.7;}

.technology-item{
    grid-template-columns:1fr;
    min-height:auto;
}

.technology-item.reverse .technology-image,
.technology-item.reverse .technology-text{
    order:unset;
}

.technology-image{height:320px;}

.technology-inner{padding:40px 30px;}

.technology-inner h3{
    font-size:34px;
    line-height:1.2;
    margin-bottom:20px;
}

.technology-inner p{
    font-size:16px;
    line-height:1.8;
    margin-bottom:20px;
}

}