/* ==================================

BASF Material Solutions Japan
Corporate Website CSS

================================== */





* {

margin:0;

padding:0;

box-sizing:border-box;

}





html {

scroll-behavior:smooth;

}





body {


font-family:

"Hiragino Kaku Gothic ProN",
"Yu Gothic",
"Meiryo",
sans-serif;


color:#1b2733;


line-height:1.8;


background:#ffffff;


}





img {


width:100%;


display:block;


object-fit:cover;


}





a {


text-decoration:none;


color:inherit;


}





ul {


list-style:none;


}





/* ================================

CONTAINER

================================ */



.container {


width:90%;


max-width:1200px;


margin:0 auto;


}





.section {


padding:110px 0;


}





/* ================================

HEADER

================================ */



.header {


position:relative;


width:100%;


background:#071827;


color:#ffffff;


z-index:10;


}





.header-inner {


width:95%;


max-width:1400px;


margin:auto;


height:95px;


display:flex;


align-items:center;


justify-content:space-between;


}





.logo-area {


display:flex;


align-items:center;


gap:20px;


}





.logo-area img {


width:120px;


height:auto;


}





.company-name h1 {


font-size:18px;


letter-spacing:1px;


font-weight:600;


}





.company-name p {


font-size:12px;


letter-spacing:3px;


color:#b8c4ce;


}





/* ================================

NAVIGATION

================================ */



.navigation ul {


display:flex;


gap:35px;


}





.navigation a {


font-size:14px;


letter-spacing:1px;


position:relative;


padding-bottom:8px;


}





.navigation a::after {


content:"";


position:absolute;


left:0;


bottom:0;


width:0;


height:2px;


background:#c7a86b;


transition:.3s;


}





.navigation a:hover::after {


width:100%;


}







/* ================================

HERO

================================ */



.hero {


height:760px;


position:relative;


overflow:hidden;


}





.hero img {


height:100%;


filter:

brightness(55%);


}





.hero-overlay {


position:absolute;


top:50%;


left:8%;


transform:translateY(-50%);


color:white;


max-width:650px;


}





.hero-en {


font-size:18px;


letter-spacing:5px;


color:#d5c08a;


margin-bottom:20px;


}





.hero h2 {


font-size:52px;


line-height:1.4;


letter-spacing:3px;


margin-bottom:30px;


}





.hero p {


font-size:17px;


line-height:2;


}





.main-button {


display:inline-block;


margin-top:35px;


padding:15px 45px;


border:1px solid #ffffff;


color:white;


transition:.3s;


letter-spacing:2px;


}





.main-button:hover {


background:#c7a86b;


border-color:#c7a86b;


}





/* ================================

SECTION TITLE

================================ */



.section-title {


text-align:center;


max-width:850px;


margin:0 auto 70px;


}





.english-title {


font-size:14px;


letter-spacing:5px;


color:#9b8252;


margin-bottom:15px;


}





.section-title h2 {


font-size:38px;


line-height:1.5;


letter-spacing:2px;


margin-bottom:25px;


}





.section-title p {


font-size:16px;


color:#555;


}


/* ================================

TWO COLUMN LAYOUT

================================ */



.two-column {


display:grid;


grid-template-columns:

1fr 1fr;


gap:70px;


align-items:center;


}





.image-box {


overflow:hidden;


border-radius:4px;


}





.image-box img {


height:500px;


transition:.5s;


}





.image-box:hover img {


transform:scale(1.04);


}





.text-content {


padding:20px;


}





.text-content h3 {


font-size:28px;


line-height:1.5;


margin-bottom:25px;


}





.text-content p {


font-size:16px;


margin-bottom:20px;


color:#444;


}





.text-button {


display:inline-block;


margin-top:20px;


padding:12px 35px;


border:1px solid #172b3a;


font-size:14px;


letter-spacing:2px;


transition:.3s;


}





.text-button:hover {


background:#172b3a;


color:#ffffff;


}





/* ================================

BUSINESS SECTION

================================ */



.business-section {


background:#f4f6f8;


}





.business-flex {


display:grid;


grid-template-columns:

1fr 1fr;


gap:40px;


}





.business-large-card {


background:white;


box-shadow:

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


overflow:hidden;


}





.business-large-card img {


height:360px;


}





.card-content {


padding:45px;


}





.card-en {


font-size:13px;


letter-spacing:4px;


color:#9b8252;


margin-bottom:15px;


}





.card-content h3 {


font-size:30px;


margin-bottom:20px;


}





.card-content p {


font-size:16px;


color:#555;


margin-bottom:15px;


}







/* ================================

MATERIAL SOLUTION

================================ */



.material-section {


background:

linear-gradient(

135deg,

#ffffff,

#eef2f5

);


}





.solution-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.solution-card {


background:white;


padding:40px 30px;


border-top:4px solid #172b3a;


box-shadow:

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


transition:.3s;


}





.solution-card:hover {


transform:translateY(-8px);


}





.solution-card .number {


font-size:35px;


font-weight:bold;


color:#c7a86b;


margin-bottom:20px;


}





.solution-card h3 {


font-size:20px;


letter-spacing:1px;


margin-bottom:8px;


}





.solution-card h4 {


font-size:16px;


margin-bottom:20px;


}





.solution-card p {


font-size:14px;


color:#555;


}





/* ================================

QUALITY CONTROL

重点布局

照片左 / 文字右

================================ */



.quality-section {


background:#ffffff;


}





.quality-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


}





.quality-image {


height:520px;


overflow:hidden;


}





.quality-image img {


height:100%;


}





.quality-content {


padding:20px;


}





.quality-content h2 {


font-size:40px;


line-height:1.5;


margin-bottom:30px;


}





.quality-content p {


font-size:16px;


color:#444;


margin-bottom:22px;


}






/* ================================

GLOBAL BUSINESS

海外事業

================================ */



.global-section {


background:

linear-gradient(

135deg,

#071827,

#142d42

);


color:white;


}





.global-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:70px;


align-items:center;


}





.global-content {


padding:30px;


}





.global-content .english-title {


color:#d1b16c;


}





.global-content h2 {


font-size:40px;


line-height:1.5;


margin-bottom:30px;


}





.global-content p {


font-size:16px;


color:#e1e6ea;


margin-bottom:25px;


}





.global-image {


height:520px;


overflow:hidden;


}





.global-image img {


height:100%;


}





/* ================================

MESSAGE PREVIEW

代表メッセージ

================================ */



.message-preview {


background:#f5f3ef;


}





.message-layout {


display:grid;


grid-template-columns:

420px 1fr;


gap:80px;


align-items:center;


}





.message-image {


height:520px;


}





.message-image img {


height:100%;


}





.message-content h2 {


font-size:38px;


margin-bottom:30px;


}





.message-content p {


font-size:16px;


color:#444;


margin-bottom:20px;


}





/* ================================

STRENGTH

企業の強み

================================ */



.strength-section {


background:

linear-gradient(

135deg,

#ffffff,

#eef1f3

);


}





.strength-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.strength-card {


background:white;


padding:40px 30px;


border-bottom:3px solid #c7a86b;


box-shadow:

0 10px 35px rgba(0,0,0,.07);


}





.strength-card h3 {


font-size:40px;


color:#c7a86b;


margin-bottom:20px;


}





.strength-card h4 {


font-size:22px;


margin-bottom:20px;


}





.strength-card p {


font-size:14px;


color:#555;


}





/* ================================

CONTACT SECTION

================================ */



.contact-section {


position:relative;


}





.contact-image {


height:520px;


position:relative;


}





.contact-image img {


height:100%;


filter:

brightness(45%);


}





.contact-overlay {


position:absolute;


top:50%;


left:50%;


transform:

translate(-50%,-50%);


width:90%;


max-width:800px;


text-align:center;


color:white;


}





.contact-overlay .english-title {


color:#d4b46a;


}





.contact-overlay h2 {


font-size:42px;


line-height:1.5;


margin-bottom:30px;


}





.contact-overlay p {


font-size:16px;


line-height:2;


}





/* ================================

FOOTER

================================ */



.footer {


background:#071827;


color:white;


padding:80px 0 30px;


}





.footer-grid {


display:grid;


grid-template-columns:

2fr 1fr 1fr;


gap:60px;


}





.footer-company h3 {


font-size:22px;


margin-bottom:20px;


}





.footer-company p {


color:#c7d0d8;


margin-bottom:10px;


}





.footer h4 {


font-size:16px;


letter-spacing:2px;


margin-bottom:25px;


color:#d0b06a;


}





.footer-menu li {


margin-bottom:12px;


}





.footer-menu a {


color:#d8dee3;


font-size:14px;


}





.footer-business p {


color:#d8dee3;


margin-bottom:10px;


}





.footer-bottom {


border-top:1px solid rgba(255,255,255,.15);


margin-top:50px;


padding-top:25px;


text-align:center;


font-size:13px;


color:#aab5bd;


}


/* ================================

SUB PAGE COMMON

子页面通用

================================ */



.sub-hero {


height:520px;


position:relative;


}





.sub-hero img {


height:100%;


filter:

brightness(50%);


}





.sub-hero .hero-overlay {


max-width:700px;


}





.sub-hero h2 {


font-size:46px;


}





/* ================================

PAGE CONTENT BOX

================================ */



.content-box {


background:white;


padding:45px;


box-shadow:

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


}





.content-box h3 {


font-size:26px;


margin-bottom:20px;


}





.content-box p {


font-size:16px;


color:#555;


}





/* ================================

BUSINESS CARD SYSTEM

================================ */



.business-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.business-card {


background:white;


padding:35px;


min-height:260px;


box-shadow:

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


border-top:3px solid #172b3a;


transition:.3s;


}





.business-card:hover {


transform:translateY(-8px);


}





.business-card h3 {


font-size:21px;


line-height:1.5;


margin-bottom:20px;


}





.business-card p {


font-size:14px;


color:#555;


}





/* ================================

GLOBAL PAGE

================================ */



.global-card-section {


background:#071827;


color:white;


}





.global-card-section .business-card {


background:#10283b;


color:white;


}





.global-card-section .business-card p {


color:#d4dce3;


}





/* ================================

MESSAGE PAGE

================================ */



.message-page {


background:#f4f1eb;


}





.message-profile {


display:grid;


grid-template-columns:

400px 1fr;


gap:80px;


align-items:center;


}





.message-profile img {


height:560px;


}





.message-text h2 {


font-size:42px;


line-height:1.5;


margin-bottom:30px;


}





.message-text p {


font-size:16px;


margin-bottom:25px;


color:#444;


}





/* ================================

CONTACT PAGE

================================ */



.contact-form {


max-width:850px;


margin:auto;


background:white;


padding:60px;


box-shadow:

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


}





.contact-form label {


display:block;


font-size:15px;


margin-bottom:8px;


}





.contact-form input,


.contact-form textarea {


width:100%;


padding:15px;


border:1px solid #ddd;


margin-bottom:25px;


font-size:15px;


}





.contact-form textarea {


height:180px;


resize:none;


}





.contact-submit {


background:#172b3a;


color:white;


border:none;


padding:15px 50px;


letter-spacing:2px;


cursor:pointer;


}





.contact-submit:hover {


background:#c7a86b;


}





/* ================================

IMAGE STYLE

================================ */



.round-image {


border-radius:5px;


overflow:hidden;


}





.shadow-image {


box-shadow:

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


}





/* ================================

ANIMATION

================================ */



.fade-up {


opacity:0;


transform:

translateY(30px);


animation:

fadeUp .8s forwards;


}





@keyframes fadeUp {


from {


opacity:0;


transform:

translateY(30px);


}


to {


opacity:1;


transform:

translateY(0);


}


}





/* ================================

RESPONSIVE

スマートフォン対応

================================ */



@media(max-width:1024px){



.header-inner {


height:auto;


padding:25px 0;


flex-direction:column;


gap:25px;


}



.navigation ul {


flex-wrap:wrap;


justify-content:center;


gap:20px;


}



.hero {


height:650px;


}



.hero h2 {


font-size:38px;


}



.two-column,


.quality-layout,


.global-layout,


.message-layout,


.message-profile {


grid-template-columns:1fr;


gap:40px;


}



.business-flex {


grid-template-columns:1fr;


}



.solution-grid,


.strength-grid,


.business-grid {


grid-template-columns:

repeat(2,1fr);


}



.footer-grid {


grid-template-columns:1fr;


}



}





@media(max-width:600px){



.container {


width:92%;


}



.section {


padding:70px 0;


}



.logo-area {


flex-direction:column;


text-align:center;


}



.hero-overlay {


left:5%;


right:5%;


}



.hero h2 {


font-size:30px;


}



.section-title h2 {


font-size:28px;


}



.solution-grid,


.strength-grid,


.business-grid {


grid-template-columns:1fr;


}



.quality-content h2,


.global-content h2,


.message-content h2 {


font-size:30px;


}



.contact-overlay h2 {


font-size:28px;


}



.contact-form {


padding:30px;


}



}
/* ==================================
BASF MOBILE FINAL OPTIMIZATION
Corporate Responsive Edition
================================== */


@media(max-width:600px){



/* ================================
GLOBAL
================================ */


body{

    font-size:15px;

}



.container{

    width:92%;

}



.section{

    padding:65px 0;

}



/* ================================
HEADER
================================ */


.header-inner{

    height:auto;

    padding:20px 0;

    display:flex;

    flex-direction:column;

    gap:18px;

}



.logo-area{

    flex-direction:column;

    gap:10px;

    text-align:center;

}



.logo-area img{

    width:105px;

}



.company-name h1{

    font-size:15px;

    letter-spacing:1px;

}



.company-name p{

    font-size:10px;

    letter-spacing:2px;

}



/* NAV */

.navigation ul{

    justify-content:center;

    flex-wrap:wrap;

    gap:12px 18px;

}



.navigation a{

    font-size:12px;

    letter-spacing:.8px;

}



/* ================================
HERO
================================ */


.hero{

    height:520px;

}



.hero img{

    height:520px;

    object-position:center;

}



.hero-overlay{

    left:6%;

    right:6%;

    max-width:none;

}



.hero-en{

    font-size:12px;

    letter-spacing:3px;

    margin-bottom:15px;

}



.hero h2{

    font-size:28px;

    line-height:1.45;

    letter-spacing:1px;

    margin-bottom:20px;

}



.hero p{

    font-size:14px;

    line-height:1.9;

}



.main-button{

    margin-top:25px;

    padding:12px 30px;

    font-size:13px;

}



/* ================================
TITLE
================================ */


.section-title{

    margin-bottom:45px;

}



.english-title{

    font-size:11px;

    letter-spacing:4px;

}



.section-title h2{

    font-size:26px;

    line-height:1.5;

}



.section-title p{

    font-size:14px;

}



/* ================================
COMMON IMAGE
================================ */


.image-box{

    height:auto;

}



.image-box img{

    height:280px;

    object-position:center;

}



/* ================================
BUSINESS
================================ */


.business-flex{

    gap:30px;

}



.business-large-card img{

    height:230px;

}



.card-content{

    padding:28px 25px;

}



.card-content h3{

    font-size:25px;

}



.card-content p{

    font-size:14px;

    line-height:1.9;

}



/* ================================
MATERIAL SOLUTION
================================ */


.solution-grid{

    gap:20px;

}



.solution-card{

    padding:30px 25px;

}



.solution-card .number{

    font-size:30px;

}



.solution-card h3{

    font-size:19px;

}



/* ================================
QUALITY CONTROL
================================ */


.quality-layout{

    gap:30px;

}



.quality-image{

    height:300px;

}



.quality-image img{

    height:300px;

    object-position:center;

}



.quality-content{

    padding:0;

}



.quality-content h2{

    font-size:28px;

}



/* ================================
GLOBAL BUSINESS
================================ */


.global-layout{

    gap:30px;

}



.global-image{

    height:300px;

}



.global-image img{

    height:300px;

}



.global-content{

    padding:0;

}



.global-content h2{

    font-size:28px;

}



/* ================================
MESSAGE
================================ */


.message-layout{

    gap:35px;

}



.message-image{

    height:350px;

}



.message-image img{

    height:350px;

    object-position:center top;

}



.message-content h2{

    font-size:28px;

}



/* ================================
STRENGTH
================================ */


.strength-grid{

    gap:20px;

}



.strength-card{

    padding:30px 25px;

}



.strength-card h3{

    font-size:34px;

}



.strength-card h4{

    font-size:20px;

}



/* ================================
CONTACT
================================ */


.contact-image{

    height:350px;

}



.contact-image img{

    height:350px;

    object-position:center;

}



.contact-overlay{

    width:85%;

}



.contact-overlay h2{

    font-size:28px;

}



.contact-overlay p{

    font-size:14px;

}



/* FORM */


.contact-form{

    padding:25px;

}



.contact-form input,
.contact-form textarea{

    font-size:14px;

}



/* ================================
SUB PAGE
================================ */


.sub-hero{

    height:360px;

}



.sub-hero img{

    height:360px;

}



.sub-hero h2{

    font-size:30px;

}



/* ================================
FOOTER
================================ */


.footer{

    padding:55px 0 25px;

}



.footer-company h3{

    font-size:19px;

}



.footer h4{

    font-size:14px;

}




}/* ================================
LANGUAGE MENU
================================ */


.language-menu{

position:relative;

margin-left:30px;

}



.language-button{

background:none;

border:none;

color:white;

font-size:13px;

letter-spacing:2px;

cursor:pointer;

padding:10px 0;

}



.language-button:hover{

color:#d5b46a;

}




.language-dropdown{


position:absolute;


right:0;


top:45px;


width:150px;


background:#071827;


border:

1px solid rgba(255,255,255,.15);


opacity:0;


visibility:hidden;


transform:

translateY(10px);


transition:.3s;


box-shadow:

0 15px 35px rgba(0,0,0,.25);


z-index:200;



}



.language-dropdown a{


display:block;


padding:14px 20px;


color:white;


font-size:13px;


letter-spacing:1px;


}



.language-dropdown a:hover{


background:#d5b46a;


color:#071827;


}




.language-menu:hover 
.language-dropdown{


opacity:1;


visibility:visible;


transform:

translateY(0);


}/* =================================================

BASF MATERIAL SOLUTIONS JAPAN

PREMIUM CORPORATE DESIGN

PART 1

================================================= */





:root{


--main-blue:#08263d;

--deep-blue:#041824;

--light-blue:#0d496b;

--silver:#d9e2e8;

--gray:#64727c;

--white:#ffffff;


}







*{

margin:0;

padding:0;

box-sizing:border-box;

}




body{


font-family:

"Helvetica Neue",
"Yu Gothic",
YuGothic,
Arial,
sans-serif;


color:#1b2730;

background:#ffffff;

line-height:1.8;


}







img{


max-width:100%;

display:block;


}





.container{


width:88%;

max-width:1280px;

margin:auto;


}









/* =========================

HEADER

========================= */



.premium-header{


position:absolute;

top:0;

left:0;

width:100%;

z-index:100;


background:

rgba(4,24,36,0.45);


backdrop-filter:blur(12px);


border-bottom:

1px solid rgba(255,255,255,.15);


}





.header-inner{


height:95px;

display:flex;

align-items:center;

justify-content:space-between;


}





.logo-area{


display:flex;

align-items:center;

gap:18px;

color:white;


}





.logo-area img{


width:70px;


}





.logo-area h1{


font-size:16px;

font-weight:600;

letter-spacing:1px;


}





.logo-area p{


font-size:11px;

letter-spacing:3px;

opacity:.8;


}







.premium-header nav ul{


display:flex;

gap:38px;

list-style:none;


}




.premium-header nav a{


color:white;

text-decoration:none;

font-size:13px;

letter-spacing:2px;


transition:.3s;


}




.premium-header nav a:hover{


opacity:.55;


}









/* =========================

HERO

========================= */


.premium-hero{


height:100vh;

min-height:760px;

position:relative;

overflow:hidden;


background:#061b2b;


}





.hero-image{


position:absolute;

width:100%;

height:100%;


}





.hero-image img{


width:100%;

height:100%;


object-fit:cover;


}





.hero-overlay{


position:absolute;

inset:0;


background:


linear-gradient(

90deg,

rgba(3,18,30,.85),

rgba(3,18,30,.35),

rgba(3,18,30,.55)

);


}







.hero-grid{


position:absolute;

inset:0;


background-image:


linear-gradient(

rgba(255,255,255,.05) 1px,

transparent 1px

),


linear-gradient(

90deg,

rgba(255,255,255,.05) 1px,

transparent 1px

);



background-size:

80px 80px;


opacity:.25;


}





.hero-content{


position:absolute;

left:8%;

top:50%;

transform:translateY(-50%);


color:white;


}





.hero-label{


font-size:14px;

letter-spacing:6px;

margin-bottom:35px;


opacity:.8;


}





.hero-content h2{


font-size:clamp(40px,5vw,72px);


line-height:1.35;


font-weight:700;


letter-spacing:3px;


}




.hero-sub{


margin-top:35px;


font-size:16px;

letter-spacing:4px;


}





/* HERO DATA PANEL */


.hero-data-panel{


position:absolute;

bottom:60px;

right:8%;


display:flex;

gap:20px;


}




.hero-data-panel div{


width:180px;

padding:25px;


background:


rgba(255,255,255,.12);


backdrop-filter:blur(15px);


border:

1px solid rgba(255,255,255,.25);


color:white;


}





.hero-data-panel strong{


display:block;


font-size:24px;


letter-spacing:2px;


}





.hero-data-panel span{


font-size:12px;


letter-spacing:3px;


opacity:.8;


}









/* =========================

SECTION COMMON

========================= */


.section-heading{


text-align:center;

margin-bottom:70px;


}




.en-title{


font-size:13px;

letter-spacing:5px;


color:#557080;


margin-bottom:20px;


}





.section-heading h2{


font-size:42px;

line-height:1.5;


letter-spacing:2px;


color:#09283d;


}





.section-heading p:last-child{


color:#71818c;

letter-spacing:3px;


}









/* =========================

CORPORATE OVERVIEW

========================= */


.corporate-overview{


padding:130px 0;


}





.overview-text{


max-width:900px;

margin:auto;


text-align:center;


font-size:17px;


margin-bottom:80px;


}









.company-data-grid{


display:grid;

grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.data-box{


padding:45px 30px;


background:#f4f7f9;


border:

1px solid #e4eaee;


position:relative;


transition:.4s;


}





.data-box:hover{


transform:translateY(-10px);


box-shadow:

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


}





.data-box span{


font-size:13px;

color:#789;


letter-spacing:3px;


}





.data-box strong{


display:block;


font-size:28px;


margin:15px 0;


color:#09283d;


letter-spacing:2px;


}





.data-box p{


font-size:14px;


color:#586974;


}/* =================================================

PART 2

MATERIAL ECOSYSTEM
COMPANY PROFILE
CEO MESSAGE

================================================= */







/* =========================

MATERIAL ECOSYSTEM

========================= */


.material-ecosystem{


padding:140px 0;

background:


linear-gradient(

135deg,

#f7fafc,

#ffffff

);


}





.ecosystem-area{


height:650px;

position:relative;


display:flex;

align-items:center;

justify-content:center;


}





.ecosystem-center{


width:220px;

height:220px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


text-align:center;


font-size:22px;


font-weight:700;


letter-spacing:3px;


color:white;


background:


linear-gradient(

135deg,

#09283d,

#146080

);


box-shadow:


0 0 60px rgba(9,40,61,.35);


position:relative;


}





.ecosystem-center::after{


content:"";


position:absolute;


width:300px;

height:300px;


border-radius:50%;


border:

1px solid rgba(9,40,61,.2);


animation:

pulse 4s infinite;


}






@keyframes pulse{


0%{

transform:scale(.9);

opacity:.5;

}


50%{

transform:scale(1.15);

opacity:.2;

}


100%{

transform:scale(.9);

opacity:.5;

}


}









.eco-item{


position:absolute;


width:210px;


padding:30px;


background:white;


border:

1px solid #dfe7eb;


box-shadow:


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


text-align:center;


transition:.4s;


}





.eco-item:hover{


transform:translateY(-12px);


}





.eco-item h3{


font-size:18px;

letter-spacing:2px;


color:#09283d;


margin-bottom:10px;


}





.eco-item p{


font-size:14px;


color:#667782;


}





.eco01{


top:80px;

left:15%;


}





.eco02{


top:80px;

right:15%;


}





.eco03{


bottom:80px;

left:20%;


}





.eco04{


bottom:80px;

right:20%;


}









/* =========================

COMPANY PROFILE

========================= */



.company-profile-premium{


padding:150px 0;


}





.profile-visual{


position:relative;


margin-bottom:90px;


}





.profile-photo{


width:80%;


}





.profile-photo img{


height:600px;


width:100%;


object-fit:cover;


}





.profile-floating-card{


position:absolute;


right:0;


bottom:-40px;


width:360px;


padding:50px;


background:


rgba(255,255,255,.95);


box-shadow:


0 25px 60px rgba(0,0,0,.15);


border-left:

5px solid #0d496b;


}





.profile-floating-card p{


font-size:12px;


letter-spacing:4px;


color:#60727e;


}





.profile-floating-card h3{


font-size:30px;


line-height:1.5;


margin-top:20px;


color:#09283d;


}









.profile-content{


max-width:1100px;


margin:auto;


}





.profile-lead{


padding-bottom:50px;


border-bottom:

1px solid #dde5e9;


}





.profile-lead h3{


font-size:32px;


color:#09283d;


margin-bottom:25px;


}





.profile-lead p{


font-size:17px;


}





.profile-columns{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:40px;


margin-top:60px;


}





.profile-columns h4{


font-size:18px;


letter-spacing:2px;


color:#0d496b;


margin-bottom:20px;


}





.profile-columns p{


font-size:15px;


color:#556872;


}









/* =========================

CEO MESSAGE

========================= */


.ceo-message-premium{


padding:150px 0;


background:#f5f8fa;


}





.ceo-layout{


display:grid;


grid-template-columns:

1fr 1.2fr;


gap:80px;


align-items:center;


}





.ceo-title-block h2{


font-size:44px;


line-height:1.5;


color:#09283d;


}





.vision-mark{


margin-top:45px;


width:130px;

height:130px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:#09283d;


color:white;


letter-spacing:3px;


font-size:14px;


}





.ceo-message-text p{


font-size:17px;


margin-bottom:35px;


line-height:2;


}





.ceo-principle-grid{


margin-top:90px;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}





.ceo-principle-grid div{


padding:45px;


background:white;


border:

1px solid #e1e8ec;


}





.ceo-principle-grid strong{


font-size:40px;


color:#d0dce3;


}





.ceo-principle-grid h3{


font-size:25px;


margin:15px 0;


color:#09283d;


}





.ceo-principle-grid p{


font-size:14px;


color:#60727e;


}/* =================================================

PART 3

GLOBAL MATERIAL NETWORK
MATERIAL FLOW
GLOBAL PARTNERSHIP

================================================= */









/* =========================

GLOBAL MATERIAL NETWORK

========================= */


.global-network-premium{


padding:150px 0;


background:#ffffff;


}





.network-main-visual{


position:relative;


margin-top:80px;


}





.network-photo{


width:100%;


height:650px;


overflow:hidden;


}





.network-photo img{


width:100%;


height:100%;


object-fit:cover;


}





.network-glass-panel{


position:absolute;


right:60px;


bottom:-50px;


width:420px;


padding:55px;


background:


rgba(255,255,255,.92);


backdrop-filter:blur(15px);


box-shadow:


0 30px 70px rgba(0,0,0,.15);


border-top:

4px solid #0d496b;


}





.network-glass-panel h3{


font-size:28px;


letter-spacing:2px;


color:#09283d;


margin-bottom:20px;


}





.network-glass-panel p{


font-size:15px;


line-height:2;


color:#596d78;


}









/* =========================

GLOBAL NODE SYSTEM

========================= */


.global-node-system{


margin-top:140px;


display:flex;


align-items:center;


justify-content:center;


gap:30px;


}





.node-item{


width:260px;


height:260px;


border-radius:50%;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


background:white;


border:

1px solid #d9e4ea;


box-shadow:


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


text-align:center;


position:relative;


transition:.4s;


}





.node-item:hover{


transform:translateY(-15px);


}





.node-item span{


font-size:12px;


letter-spacing:3px;


color:#789;


}





.node-item h3{


font-size:28px;


margin:15px 0;


color:#09283d;


letter-spacing:2px;


}





.node-item p{


font-size:14px;


color:#60727e;


}







.node-line{


width:80px;


height:1px;


background:#b9cbd5;


position:relative;


}





.node-line::after{


content:"";


position:absolute;


width:10px;


height:10px;


border-radius:50%;


background:#0d496b;


top:-5px;


left:0;


animation:

flowMove 3s infinite;


}






@keyframes flowMove{


0%{

left:0;

opacity:0;

}


50%{

opacity:1;

}


100%{

left:70px;

opacity:0;

}


}









/* =========================

NETWORK DESCRIPTION

========================= */


.network-description{


max-width:950px;


margin:100px auto 0;


text-align:center;


}





.network-description p{


font-size:17px;


margin-bottom:35px;


line-height:2;


}









/* =========================

MATERIAL FLOW

========================= */


.material-flow-premium{


padding:150px 0;


background:


linear-gradient(

135deg,

#061d2d,

#0b334a

);


color:white;


}





.material-flow-premium .section-heading h2{


color:white;


}





.material-flow-premium .en-title{


color:#b9d4e3;


}





.flow-system-premium{


margin-top:90px;


display:flex;


align-items:center;


justify-content:center;


gap:25px;


}





.flow-step{


width:220px;


height:220px;


border-radius:50%;


border:

1px solid rgba(255,255,255,.3);


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


text-align:center;


background:


rgba(255,255,255,.05);


backdrop-filter:blur(10px);


transition:.4s;


}





.flow-step:hover{


background:

rgba(255,255,255,.15);


transform:scale(1.08);


}





.flow-number{


font-size:13px;


letter-spacing:4px;


opacity:.7;


}





.flow-step h3{


font-size:25px;


letter-spacing:3px;


margin:15px 0;


}





.flow-step p{


font-size:14px;


}







.flow-arrow{


font-size:35px;


opacity:.6;


}









/* =========================

GLOBAL PARTNERSHIP

========================= */


.global-partnership-premium{


padding:120px 0;


}





.partnership-box{


padding:80px;


text-align:center;


background:


#f5f8fa;


border:


1px solid #e2e9ed;


}





.partnership-box h2{


font-size:42px;


line-height:1.5;


color:#09283d;


margin:30px 0;


}





.partnership-box p:last-child{


max-width:850px;


margin:auto;


font-size:17px;


line-height:2;


}/* =================================================

PART 4

BUSINESS FOUNDATION
SUPPLY CHAIN
TECHNICAL SUPPORT

================================================= */









/* =========================

BUSINESS FOUNDATION

========================= */


.business-foundation-premium{


padding:150px 0;


background:#ffffff;


}





.business-introduction{


max-width:1000px;


margin:0 auto 90px;


text-align:center;


font-size:17px;


line-height:2;


color:#526671;


}









/* BUSINESS FIELD */




.business-field-grid{


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:50px;


}





.business-field-card{


position:relative;


padding:60px;


background:


linear-gradient(

135deg,

#ffffff,

#f4f8fa

);


border:

1px solid #dce6eb;


overflow:hidden;


transition:.4s;


}





.business-field-card::before{


content:"";


position:absolute;


top:0;


left:0;


width:100%;


height:5px;


background:


linear-gradient(

90deg,

#0d496b,

#9bb8c8

);


}





.business-field-card:hover{


transform:translateY(-12px);


box-shadow:


0 30px 60px rgba(0,0,0,.12);


}





.field-number{


font-size:50px;


font-weight:700;


color:#d7e2e8;


letter-spacing:3px;


}





.business-field-card h3{


margin-top:20px;


font-size:26px;


letter-spacing:2px;


color:#09283d;


}





.business-field-card h4{


font-size:22px;


margin:15px 0 25px;


color:#0d496b;


}





.business-field-card p{


font-size:15px;


line-height:2;


color:#60727e;


}





.field-tag{


display:inline-block;


margin-top:30px;


padding:10px 25px;


border-radius:30px;


background:#09283d;


color:white;


font-size:12px;


letter-spacing:2px;


}









/* =========================

SUPPLY CHAIN ARCHITECTURE

========================= */


.supply-chain-premium{


padding:160px 0;


background:#f5f8fa;


}





.supply-architecture{


height:650px;


position:relative;


display:flex;


align-items:center;


justify-content:center;


}





.supply-center{


width:240px;


height:240px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


background:


linear-gradient(

135deg,

#09283d,

#17617d

);


color:white;


font-size:25px;


font-weight:bold;


letter-spacing:3px;


box-shadow:


0 0 60px rgba(9,40,61,.3);


}





.supply-stage{


position:absolute;


width:240px;


padding:35px;


background:white;


border:


1px solid #dde7ec;


box-shadow:


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


text-align:center;


}





.supply-stage span{


font-size:12px;


letter-spacing:3px;


color:#789;


}





.supply-stage h3{


font-size:18px;


margin:15px 0;


color:#09283d;


}





.supply-stage p{


font-size:14px;


color:#60727e;


}







.stage01{


top:40px;


left:15%;


}





.stage02{


top:40px;


right:15%;


}





.stage03{


bottom:40px;


left:15%;


}





.stage04{


bottom:40px;


right:15%;


}





.stage05{


bottom:-60px;


left:50%;


transform:translateX(-50%);


}









/* =========================

TECHNICAL SUPPORT

========================= */


.technical-support-premium{


padding:150px 0;


}





.technical-layout{


display:grid;


grid-template-columns:

1fr 1.2fr;


gap:80px;


align-items:center;


}





.technical-title h2{


font-size:45px;


line-height:1.5;


color:#09283d;


}





.technical-content{


display:grid;


gap:30px;


}





.technical-item{


padding:40px;


background:#f5f8fa;


border-left:

5px solid #0d496b;


transition:.3s;


}





.technical-item:hover{


transform:translateX(10px);


background:#eef5f8;


}





.technical-item h3{


font-size:22px;


letter-spacing:2px;


color:#09283d;


margin-bottom:15px;


}





.technical-item p{


font-size:15px;


color:#60727e;


line-height:2;


}/* =================================================

PART 5

QUALITY MANAGEMENT
QUALITY CONTROL CENTER
QUALITY PROCESS

================================================= */









/* =========================

QUALITY MANAGEMENT

========================= */


.quality-management-premium{


padding:150px 0;


background:white;


}





.quality-main-visual{


position:relative;


margin-top:80px;


}





.quality-photo{


width:82%;


height:620px;


}





.quality-photo img{


width:100%;


height:100%;


object-fit:cover;


}





.quality-panel{


position:absolute;


right:0;


bottom:-50px;


width:400px;


padding:55px;


background:


rgba(255,255,255,.95);


box-shadow:


0 30px 70px rgba(0,0,0,.15);


border-right:

5px solid #0d496b;


}





.quality-panel p{


font-size:12px;


letter-spacing:5px;


color:#60727e;


}





.quality-panel h3{


margin-top:20px;


font-size:32px;


line-height:1.5;


color:#09283d;


}









.quality-introduction{


max-width:1000px;


margin:120px auto 0;


text-align:center;


}





.quality-introduction p{


font-size:17px;


line-height:2;


margin-bottom:35px;


color:#536874;


}









/* =========================

QUALITY CONTROL CENTER

========================= */



.quality-center-system{


padding:160px 0;


background:


linear-gradient(

135deg,

#061c2b,

#103b52

);


color:white;


}





.quality-center-system .section-heading h2{


color:white;


}





.quality-center-system .en-title{


color:#b7d0dd;


}









.quality-orbit{


height:650px;


position:relative;


display:flex;


justify-content:center;


align-items:center;


}





.quality-core{


width:220px;


height:220px;


border-radius:50%;


display:flex;


justify-content:center;


align-items:center;


text-align:center;


font-size:24px;


font-weight:bold;


letter-spacing:3px;


background:


linear-gradient(

135deg,

#ffffff,

#cbdbe3

);


color:#09283d;


box-shadow:


0 0 70px rgba(255,255,255,.35);


position:relative;


}





.quality-core::before{


content:"";


position:absolute;


width:330px;


height:330px;


border-radius:50%;


border:

1px solid rgba(255,255,255,.25);


animation:

rotateRing 12s linear infinite;


}






@keyframes rotateRing{


from{


transform:rotate(0deg);


}


to{


transform:rotate(360deg);


}


}









.quality-module{


position:absolute;


width:220px;


padding:35px;


text-align:center;


background:


rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.25);


backdrop-filter:blur(10px);


transition:.4s;


}





.quality-module:hover{


background:


rgba(255,255,255,.18);


transform:translateY(-10px);


}





.quality-module span{


font-size:12px;


letter-spacing:3px;


opacity:.7;


}





.quality-module h3{


margin:15px 0;


font-size:19px;


letter-spacing:2px;


}





.quality-module p{


font-size:14px;


opacity:.8;


}









.quality01{


top:40px;


left:18%;


}





.quality02{


top:40px;


right:18%;


}





.quality03{


bottom:40px;


left:18%;


}





.quality04{


bottom:40px;


right:18%;


}









/* =========================

QUALITY PROCESS

========================= */


.quality-process-premium{


padding:150px 0;


}





.process-timeline{


display:flex;


align-items:center;


justify-content:center;


margin-top:80px;


}





.process-item{


width:230px;


text-align:center;


}





.process-number{


width:80px;


height:80px;


margin:auto;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:#09283d;


color:white;


font-size:18px;


letter-spacing:2px;


}





.process-item h3{


margin:25px 0 10px;


font-size:20px;


color:#09283d;


}





.process-item p{


font-size:14px;


color:#60727e;


}





.process-line{


width:90px;


height:1px;


background:#c7d5dc;


}









/* =========================

TRUST VALUE

========================= */


.trust-value-premium{


padding:120px 0;


background:#f4f8fa;


}





.trust-box{


max-width:1000px;


margin:auto;


text-align:center;


padding:80px;


background:white;


border:


1px solid #e0e8ed;


box-shadow:


0 25px 60px rgba(0,0,0,.08);


}





.trust-box h2{


font-size:42px;


line-height:1.5;


margin:30px 0;


color:#09283d;


}





.trust-box p:last-child{


font-size:17px;


line-height:2;


color:#60727e;


}/* =================================================

PART 6

TEAM & PEOPLE
PEOPLE DEVELOPMENT

================================================= */









/* =========================

TEAM & PEOPLE

========================= */


.team-people-premium{


padding:160px 0;


background:#ffffff;


}





.team-main-visual{


position:relative;


margin-top:80px;


}





.team-photo{


width:85%;


height:650px;


overflow:hidden;


}





.team-photo img{


width:100%;


height:100%;


object-fit:cover;


}





.team-overlay-panel{


position:absolute;


right:0;


bottom:-50px;


width:380px;


padding:55px;


background:


rgba(255,255,255,.95);


box-shadow:


0 30px 70px rgba(0,0,0,.15);


border-left:

5px solid #0d496b;


}





.team-overlay-panel p{


font-size:12px;


letter-spacing:5px;


color:#60727e;


}





.team-overlay-panel h3{


font-size:32px;


line-height:1.5;


color:#09283d;


margin-top:20px;


}









.team-introduction-text{


max-width:1000px;


margin:120px auto 80px;


text-align:center;


}





.team-introduction-text p{


font-size:17px;


line-height:2;


margin-bottom:35px;


color:#556a76;


}









/* =========================

TEAM EXPERTISE NETWORK

========================= */



.team-expertise-network{


height:700px;


position:relative;


display:flex;


justify-content:center;


align-items:center;


}





.team-center{


width:230px;


height:230px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


background:


linear-gradient(

135deg,

#09283d,

#146080

);


color:white;


font-size:24px;


font-weight:bold;


letter-spacing:3px;


box-shadow:


0 0 60px rgba(13,73,107,.35);


}





.expert-box{


position:absolute;


width:250px;


padding:35px;


background:white;


border:


1px solid #dce6eb;


box-shadow:


0 20px 45px rgba(0,0,0,.08);


text-align:center;


transition:.4s;


}





.expert-box:hover{


transform:translateY(-12px);


}





.expert-box h3{


font-size:18px;


letter-spacing:2px;


color:#09283d;


margin-bottom:15px;


}





.expert-box p{


font-size:14px;


color:#60727e;


line-height:1.8;


}







.expert01{


top:60px;


left:15%;


}





.expert02{


top:60px;


right:15%;


}





.expert03{


bottom:60px;


left:15%;


}





.expert04{


bottom:60px;


right:15%;


}









/* =========================

PEOPLE DEVELOPMENT

========================= */


.people-development-premium{


padding:160px 0;


background:#f5f8fa;


}





.growth-system{


margin-top:100px;


display:flex;


justify-content:center;


align-items:center;


gap:40px;


}





.growth-stage{


width:280px;


height:280px;


border-radius:50%;


background:white;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;


text-align:center;


border:


1px solid #dce6eb;


box-shadow:


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


transition:.4s;


}





.growth-stage:hover{


transform:scale(1.08);


}





.growth-stage span{


font-size:13px;


letter-spacing:4px;


color:#789;


}





.growth-stage h3{


font-size:22px;


letter-spacing:2px;


color:#09283d;


margin:20px 0;


}





.growth-stage p{


font-size:14px;


color:#60727e;


}





.growth-arrow{


font-size:40px;


color:#0d496b;


}





.development-content{


max-width:950px;


margin:100px auto 0;


text-align:center;


}





.development-content p{


font-size:17px;


line-height:2;


margin-bottom:35px;


color:#556a76;


}









/* =========================

PEOPLE VALUE

========================= */


.people-value-premium{


padding:120px 0;


background:


linear-gradient(

135deg,

#061c2b,

#123d55

);


color:white;


}





.value-highlight{


max-width:1000px;


margin:auto;


text-align:center;


}





.value-highlight .en-title{


color:#b7d0dd;


}





.value-highlight h2{


font-size:45px;


line-height:1.5;


margin:30px 0;


}





.value-highlight p:last-child{


font-size:18px;


line-height:2;


opacity:.9;


}/* =================================================

PART 7

CORPORATE CULTURE
COMPANY STRENGTH
PHILOSOPHY
FUTURE VISION

================================================= */









/* =========================

CORPORATE CULTURE

========================= */


.corporate-culture-premium{


padding:160px 0;


background:#ffffff;


}





.culture-value-system{


position:relative;


height:650px;


display:flex;


align-items:center;


justify-content:center;


}





.culture-core{


width:230px;


height:230px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


flex-direction:column;


background:


linear-gradient(

135deg,

#09283d,

#146080

);


color:white;


box-shadow:


0 0 70px rgba(9,40,61,.35);


}





.culture-core h3{


font-size:28px;


letter-spacing:4px;


}





.culture-core p{


font-size:14px;


margin-top:10px;


opacity:.8;


}





.culture-item{


position:absolute;


width:240px;


padding:35px;


background:#f6f9fb;


border:


1px solid #dce6eb;


text-align:center;


transition:.4s;


}





.culture-item:hover{


transform:translateY(-12px);


box-shadow:


0 20px 45px rgba(0,0,0,.1);


}





.culture-item h3{


font-size:18px;


letter-spacing:2px;


color:#09283d;


margin-bottom:15px;


}





.culture-item p{


font-size:14px;


line-height:1.8;


color:#60727e;


}





.culture-item:nth-child(2){


top:50px;


left:18%;


}





.culture-item:nth-child(3){


top:50px;


right:18%;


}





.culture-item:nth-child(4){


bottom:50px;


left:18%;


}





.culture-item:nth-child(5){


bottom:50px;


right:18%;


}









.culture-description{


max-width:950px;


margin:100px auto 0;


text-align:center;


}





.culture-description p{


font-size:17px;


line-height:2;


margin-bottom:30px;


color:#566b77;


}









/* =========================

COMPANY STRENGTH

========================= */


.company-strength-premium{


padding:160px 0;


background:#f5f8fa;


}





.strength-matrix{


height:700px;


position:relative;


display:flex;


justify-content:center;


align-items:center;


}





.strength-center{


width:240px;


height:240px;


border-radius:50%;


display:flex;


justify-content:center;


align-items:center;


text-align:center;


background:


linear-gradient(

135deg,

#061c2b,

#155a76

);


color:white;


font-size:26px;


font-weight:bold;


letter-spacing:3px;


box-shadow:


0 0 70px rgba(13,73,107,.4);


}





.strength-item{


position:absolute;


width:270px;


padding:40px;


background:white;


border:


1px solid #dce6eb;


box-shadow:


0 20px 45px rgba(0,0,0,.08);


transition:.4s;


}





.strength-item:hover{


transform:translateY(-15px);


}





.strength-number{


font-size:45px;


font-weight:bold;


color:#d7e2e8;


}





.strength-item h3{


font-size:20px;


letter-spacing:2px;


color:#09283d;


margin:15px 0;


}





.strength-item p{


font-size:14px;


line-height:1.8;


color:#60727e;


}





.strength01{


top:50px;


left:15%;


}





.strength02{


top:50px;


right:15%;


}





.strength03{


bottom:50px;


left:15%;


}





.strength04{


bottom:50px;


right:15%;


}









/* =========================

CORPORATE PHILOSOPHY

========================= */


.corporate-philosophy-premium{


padding:180px 0;


background:


linear-gradient(

135deg,

#061b2a,

#10394f

);


color:white;


}





.philosophy-background{


padding:100px;


border:


1px solid rgba(255,255,255,.2);


background:


rgba(255,255,255,.05);


backdrop-filter:blur(15px);


}





.philosophy-content{


max-width:1000px;


margin:auto;


text-align:center;


}





.philosophy-content .en-title{


color:#b7d0dd;


}





.philosophy-content h2{


font-size:48px;


line-height:1.5;


margin:35px 0;


}





.philosophy-content p{


font-size:17px;


line-height:2;


margin-bottom:30px;


opacity:.9;


}









/* =========================

FUTURE VISION

========================= */


.future-vision-premium{


padding:160px 0;


background:#ffffff;


}





.future-system{


height:650px;


position:relative;


display:flex;


justify-content:center;


align-items:center;


}





.future-core{


width:240px;


height:240px;


border-radius:50%;


display:flex;


justify-content:center;


align-items:center;


text-align:center;


background:


linear-gradient(

135deg,

#09283d,

#17617d

);


color:white;


font-size:28px;


font-weight:bold;


letter-spacing:3px;


}





.future-card{


position:absolute;


width:260px;


padding:40px;


background:#f5f8fa;


border:


1px solid #dce6eb;


text-align:center;


transition:.4s;


}





.future-card:hover{


transform:translateY(-12px);


box-shadow:


0 25px 50px rgba(0,0,0,.1);


}





.future-card h3{


font-size:20px;


letter-spacing:2px;


color:#09283d;


margin-bottom:15px;


}





.future-card p{


font-size:14px;


line-height:1.8;


color:#60727e;


}





.future-card:nth-child(2){


top:40px;


left:15%;


}





.future-card:nth-child(3){


top:40px;


right:15%;


}





.future-card:nth-child(4){


bottom:40px;


left:15%;


}





.future-card:nth-child(5){


bottom:40px;


right:15%;


}/* =================================================

PART 8 FINAL

CONTACT
FOOTER
ANIMATION
RESPONSIVE

================================================= */









/* =========================

CONTACT PREMIUM

========================= */


.contact-premium{


padding:180px 0;


background:


linear-gradient(

135deg,

#061b2a,

#123f56

);


color:white;


}





.contact-background{


position:relative;


padding:100px;


border:


1px solid rgba(255,255,255,.2);


background:


rgba(255,255,255,.05);


backdrop-filter:blur(15px);


overflow:hidden;


}





.contact-grid-line{


position:absolute;


inset:0;


background-image:


linear-gradient(

rgba(255,255,255,.08) 1px,

transparent 1px

),


linear-gradient(

90deg,

rgba(255,255,255,.08),

transparent 1px

);



background-size:

80px 80px;


opacity:.3;


}





.contact-content{


position:relative;


z-index:2;


max-width:900px;


margin:auto;


text-align:center;


}





.contact-content .en-title{


color:#b8d3df;


}





.contact-content h2{


font-size:50px;


line-height:1.5;


margin:40px 0;


}





.contact-content p{


font-size:17px;


line-height:2;


opacity:.9;


}









.premium-contact-button{


display:inline-block;


margin-top:50px;


padding:20px 55px;


border-radius:50px;


background:white;


color:#09283d;


text-decoration:none;


font-size:15px;


letter-spacing:3px;


transition:.4s;


}





.premium-contact-button:hover{


transform:translateY(-8px);


box-shadow:


0 20px 40px rgba(0,0,0,.25);


}









/* =========================

BUSINESS PARTNERSHIP

========================= */


.business-partnership-premium{


padding:150px 0;


}





.partnership-header{


text-align:center;


margin-bottom:80px;


}





.partnership-header h2{


font-size:45px;


line-height:1.5;


color:#09283d;


}





.partnership-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:35px;


}





.partnership-item{


padding:50px 40px;


background:#f5f8fa;


border:


1px solid #dde7ec;


transition:.4s;


}





.partnership-item:hover{


transform:translateY(-12px);


box-shadow:


0 25px 50px rgba(0,0,0,.1);


}





.partnership-icon{


font-size:45px;


font-weight:bold;


color:#d3e0e6;


}





.partnership-item h3{


font-size:20px;


letter-spacing:2px;


color:#09283d;


margin:20px 0;


}





.partnership-item p{


font-size:14px;


line-height:2;


color:#60727e;


}









/* =========================

COMPANY INFORMATION

========================= */


.company-information-premium{


padding:120px 0;


background:#f5f8fa;


}





.company-info-panel{


padding:80px;


background:white;


box-shadow:


0 25px 60px rgba(0,0,0,.08);


}





.info-title{


text-align:center;


margin-bottom:70px;


}





.info-title h2{


font-size:38px;


color:#09283d;


}





.info-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:40px;


}





.info-block{


padding:35px;


border-left:


4px solid #0d496b;


}





.info-block h3{


font-size:18px;


letter-spacing:2px;


color:#09283d;


margin-bottom:20px;


}





.info-block p{


font-size:15px;


line-height:2;


color:#60727e;


}









/* =========================

FOOTER

========================= */


.premium-footer{


padding:100px 0 30px;


background:#041824;


color:white;


}





.footer-main{


display:grid;


grid-template-columns:

1.5fr 1fr 1fr;


gap:70px;


padding-bottom:70px;


border-bottom:


1px solid rgba(255,255,255,.15);


}





.footer-brand img{


width:80px;


margin-bottom:25px;


}





.footer-brand h3{


font-size:18px;


letter-spacing:1px;


}





.footer-brand p{


font-size:12px;


letter-spacing:3px;


opacity:.7;


}





.footer-menu h4,

.footer-field h4{


font-size:14px;


letter-spacing:3px;


margin-bottom:25px;


}





.footer-menu ul{


list-style:none;


}





.footer-menu li{


margin-bottom:15px;


}





.footer-menu a{


color:white;


text-decoration:none;


font-size:14px;


opacity:.8;


}





.footer-field p{


font-size:14px;


opacity:.8;


margin-bottom:12px;


}





.footer-bottom{


padding-top:30px;


text-align:center;


font-size:12px;


opacity:.6;


}









/* =========================

GLOBAL ANIMATION

========================= */


section{


animation:

fadeUp .8s ease both;


}





@keyframes fadeUp{


from{


opacity:0;


transform:translateY(40px);


}



to{


opacity:1;


transform:translateY(0);


}


}









/* =========================

RESPONSIVE TABLET

========================= */


@media(max-width:1024px){



.company-data-grid,

.business-field-grid,

.profile-columns,

.partnership-grid,

.info-grid{


grid-template-columns:

repeat(2,1fr);


}





.ceo-layout,

.technical-layout{


grid-template-columns:1fr;


}




.hero-data-panel{


right:5%;


}




}





/* =========================

RESPONSIVE MOBILE

========================= */


@media(max-width:768px){



.container{


width:92%;


}




.premium-header{


position:relative;


}



.header-inner{


height:auto;


padding:25px 0;


flex-direction:column;


gap:25px;


}




.premium-header nav ul{


gap:15px;


flex-wrap:wrap;


justify-content:center;


}





.hero-content{


left:5%;


right:5%;


}





.hero-content h2{


font-size:38px;


}





.hero-data-panel{


display:none;


}





.section-heading h2,


.contact-content h2,


.philosophy-content h2{


font-size:32px;


}





.company-data-grid,

.business-field-grid,

.profile-columns,

.partnership-grid,

.info-grid{


grid-template-columns:1fr;


}





.profile-photo{


width:100%;


}





.profile-photo img,


.team-photo,


.quality-photo{


height:400px;


}





.profile-floating-card,

.team-overlay-panel,

.quality-panel{


position:relative;


width:100%;


bottom:auto;


margin-top:30px;


}





.ecosystem-area,

.team-expertise-network,

.strength-matrix,

.future-system,

.quality-orbit,


.supply-architecture{


height:auto;


padding:80px 0;


display:flex;


flex-direction:column;


gap:30px;


}





.eco-item,

.expert-box,

.strength-item,

.future-card,

.quality-module,

.supply-stage{


position:relative;


top:auto;

right:auto;

left:auto;

bottom:auto;


width:100%;


}





.flow-system-premium,

.global-node-system,

.process-timeline,


.growth-system{


flex-direction:column;


}





.node-line,

.flow-arrow,

.process-line{


width:1px;


height:50px;


}





.footer-main{


grid-template-columns:1fr;


gap:40px;


}




}

/* 统一所有页面导航位置 */

.premium-header{
    height:90px;
}

.header-inner{
    height:90px;
    display:flex;
    align-items:center;
}

/* Shared responsive refinements and consistent navigation */
.header{position:relative}.header-inner{min-height:90px;height:auto;gap:20px;padding:12px 0;flex-wrap:wrap}.logo-area{flex:0 0 auto;min-width:220px}.logo-area img{width:82px;max-height:58px;object-fit:contain}.company-name strong{display:block;font-size:15px}.company-name small{display:block;font-size:10px;letter-spacing:2px;color:#b8c4ce}.navigation{margin-left:auto}.navigation a{display:inline-block;font-size:13px;white-space:nowrap;padding:8px 0}.language-menu{display:flex;gap:10px;font-size:12px;white-space:nowrap;color:#dce3e8}.language-menu a:hover,.navigation a:hover{color:#d1b16c}.nav-toggle{display:none;background:none;border:1px solid #71808b;color:white;border-radius:6px;padding:8px 11px;font-size:20px}.hero-overlay h1,.hero-overlay h2{font-size:clamp(30px,4.5vw,56px);line-height:1.25}.hero-overlay>p:not(.hero-en){max-width:680px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}.feature-card{display:block;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 36px #07182718;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #07182724}.feature-card img{height:220px;object-fit:cover}.feature-card div{display:flex;justify-content:space-between;align-items:center;padding:20px}.detail-content{max-width:880px}.detail-content>p{font-size:17px}.detail-panel{margin:36px 0;padding:28px;border-left:4px solid #b79655;background:#f4f6f8}.contact-form{display:grid;gap:18px;margin:32px 0;max-width:700px}.contact-form label{display:grid;gap:7px;font-weight:600}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #c8d0d7;border-radius:6px;padding:12px;font:inherit;background:white}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid #b79655;outline-offset:1px}.contact-form .main-button{border:0;cursor:pointer;justify-self:start}.form-note{font-size:13px;color:#596775}.footer-row{display:flex;justify-content:space-between;gap:32px;padding:48px 0}.footer-row nav{display:flex;gap:18px;flex-wrap:wrap}.footer-row nav a{font-size:13px}.footer-bottom{text-align:center;padding:16px;border-top:1px solid #ffffff24;font-size:12px}
@media(max-width:1100px){.header-inner{gap:12px}.navigation{order:4;flex:1 0 100%;margin:0}.navigation ul{flex-wrap:wrap;justify-content:center;gap:12px 24px}.navigation a{font-size:12px}}
@media(max-width:700px){.header-inner{width:92%;min-height:72px;justify-content:space-between}.logo-area{min-width:0;gap:10px}.logo-area img{width:58px}.company-name strong{font-size:12px}.company-name small{font-size:8px;letter-spacing:1px}.nav-toggle{display:block;margin-left:auto}.navigation{display:none;order:5;flex-basis:100%;width:100%}.navigation.is-open{display:block}.navigation ul{display:flex;flex-direction:column;align-items:stretch;gap:0}.navigation a{display:block;border-top:1px solid #ffffff20;padding:10px 4px;font-size:14px}.language-menu{order:4;flex-basis:100%;justify-content:flex-end;font-size:12px}.section{padding:64px 0}.hero{min-height:560px}.hero>img{height:560px;object-fit:cover}.hero-overlay{padding:24px}.feature-grid{grid-template-columns:1fr;gap:16px}.feature-card img{height:210px}.footer-row{display:block;padding:36px 0}.footer-row nav{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.sub-hero{min-height:360px}.contact-form{gap:14px}.detail-content>p{font-size:15px}}