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

BASF Material Solutions Japan
Business Page CSS

PART 1/8

Global
Header
Hero

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



/* ===============================
RESET
================================ */


* {

margin:0;

padding:0;

box-sizing:border-box;

}



html {

scroll-behavior:smooth;

}



body {

font-family:

"Noto Sans JP",
"Helvetica Neue",
Arial,
sans-serif;


color:#111827;

background:#ffffff;

line-height:1.9;

overflow-x:hidden;

}



img {

max-width:100%;

display:block;

}



a {

text-decoration:none;

color:inherit;

}



ul {

list-style:none;

}







/* ===============================
CONTAINER
================================ */


.container {


width:min(1200px,92%);

margin:0 auto;


}







/* ===============================
SECTION BASIC
================================ */


section {


position:relative;

padding:120px 0;

overflow:hidden;


}



.section-heading {


text-align:center;

margin-bottom:80px;

}



.section-heading p {


font-size:13px;

letter-spacing:4px;

font-weight:700;

color:#0066a1;

margin-bottom:15px;


}



.section-heading h2 {


font-size:42px;

font-weight:700;

letter-spacing:2px;

margin-bottom:25px;


}



.section-heading h3 {


font-size:20px;

font-weight:500;

color:#52606d;


}



.section-heading.small h2 {


font-size:36px;


}









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


.business-header {


position:absolute;

top:0;

left:0;

width:100%;

z-index:100;


background:

linear-gradient(

180deg,

rgba(0,0,0,.55),

transparent

);


}



.header-inner {


width:min(1300px,92%);

height:95px;

margin:auto;


display:flex;

align-items:center;

justify-content:space-between;


}



.logo-area img {


width:170px;


}





.business-navigation ul {


display:flex;

gap:40px;


}



.business-navigation a {


color:#fff;

font-size:15px;

font-weight:500;

position:relative;


}



.business-navigation a::after {


content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:#00a6d6;

transition:.4s;


}



.business-navigation a:hover::after,


.business-navigation .active a::after {


width:100%;


}





.language-switch {


display:flex;

gap:15px;

font-size:13px;

color:white;


}



.language-switch span {


opacity:.85;

cursor:pointer;


}








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


.business-hero {


height:900px;

display:flex;

align-items:center;

padding:0;


}



.hero-background {


position:absolute;

inset:0;


}



.hero-background img {


width:100%;

height:100%;

object-fit:cover;


}






.hero-dark-layer {


position:absolute;

inset:0;


background:

linear-gradient(

90deg,

rgba(5,20,35,.88),

rgba(5,20,35,.45),

rgba(5,20,35,.2)

);


}






.hero-container {


position:relative;

z-index:3;

width:min(1200px,92%);

margin:auto;

color:white;


}





.hero-label {


font-size:14px;

letter-spacing:6px;

color:#63d8ff;

margin-bottom:25px;


}




.hero-container h1 {


font-size:64px;

line-height:1.25;

letter-spacing:5px;

font-weight:700;

margin-bottom:25px;


}





.hero-container h2 {


font-size:25px;

font-weight:500;

margin-bottom:35px;


}





.hero-description {


max-width:700px;

font-size:18px;

line-height:2.1;

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


}






/* ===============================
HERO INFORMATION BOX
================================ */


.hero-information-box {


display:grid;

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

gap:20px;

margin-top:55px;


}



.hero-information-box div {


padding:25px;

background:

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


border:

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



backdrop-filter:blur(12px);



position:relative;


}



.hero-information-box div::before {


content:"";

position:absolute;

top:0;

left:0;


width:35px;

height:35px;


border-top:2px solid #00b7ff;

border-left:2px solid #00b7ff;


}





.hero-information-box strong {


display:block;

font-size:24px;

letter-spacing:2px;


}



.hero-information-box span {


font-size:14px;

color:#dbeafe;


}







/* ===============================
TECH ELEMENT
================================ */


.hero-tech-element {


position:absolute;

right:8%;

bottom:15%;

z-index:2;


}



.tech-diamond {


width:180px;

height:180px;

border:

1px solid rgba(0,200,255,.5);


transform:rotate(45deg);


}



.tech-line {


position:absolute;

height:1px;

background:#00b7ff;


}



.line-one {


width:260px;

right:-100px;

top:50px;


}



.line-two {


width:180px;

right:-50px;

top:110px;


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

BASF Material Solutions Japan
Business Page CSS

PART 2/8

Business Overview
Material Business Area

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





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


.business-overview {


background:

linear-gradient(

135deg,

#ffffff 0%,

#f4f9fc 100%

);


}





.overview-content {


display:grid;

grid-template-columns:

1fr 1fr;


gap:80px;

align-items:center;


}






.overview-image {


position:relative;


}





.overview-image::before {


content:"";

position:absolute;


width:260px;

height:260px;


left:-40px;

top:-40px;


border:

1px solid rgba(0,130,190,.25);


transform:rotate(45deg);


z-index:0;


}





.overview-image img {


position:relative;

z-index:2;


width:100%;

height:520px;

object-fit:cover;


box-shadow:

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


}






.overview-text {


position:relative;


}




.overview-text::after {


content:"";

position:absolute;


right:-80px;

bottom:-80px;


width:160px;

height:160px;


border:

1px solid rgba(0,150,220,.25);


transform:rotate(45deg);


}





.overview-text h3 {


font-size:34px;

line-height:1.5;

margin-bottom:30px;


}



.overview-text p {


font-size:16px;

line-height:2.2;

margin-bottom:25px;

color:#374151;


}







/* ===============================
OVERVIEW DATA BOX
================================ */


.overview-data {


display:grid;

grid-template-columns:

repeat(3,1fr);


gap:15px;

margin-top:45px;


}




.overview-data div {


padding:25px 15px;


background:#fff;


border:

1px solid #e2e8f0;


position:relative;


}



.overview-data div::before {


content:"";


position:absolute;


top:0;

left:0;


width:20px;

height:20px;


border-top:

2px solid #0099d8;


border-left:

2px solid #0099d8;


}




.overview-data strong {


display:block;


font-size:22px;


color:#006b9f;


margin-bottom:8px;


}



.overview-data span {


font-size:13px;

color:#64748b;


}









/* ===============================
MATERIAL BUSINESS AREA
================================ */


.material-business-area {


background:#071827;


color:white;


position:relative;


}




.material-business-area::before {


content:"";


position:absolute;


width:500px;

height:500px;


right:-150px;

top:100px;


border:

1px solid rgba(0,190,255,.18);


transform:rotate(45deg);


}




.material-business-area .section-heading p {


color:#43d5ff;


}



.material-business-area .section-heading h3 {


color:#d1e5f0;


}








/* ===============================
MATERIAL AREA GRID
================================ */


.material-area-grid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:35px;


}





.material-area-card {


background:

linear-gradient(

145deg,

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

rgba(255,255,255,.03)

);


border:

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



padding:45px 35px;


position:relative;


overflow:hidden;



backdrop-filter:blur(10px);


}





 {


content:"";


position:absolute;


right:-60px;

top:-60px;


width:150px;

height:150px;


border:

1px solid rgba(0,200,255,.4);


transform:rotate(45deg);


}





.material-area-card:hover {


transform:translateY(-10px);


border-color:#00b7ff;


transition:.4s;


}





.card-number {


font-size:60px;


font-weight:700;


color:rgba(0,180,255,.25);


position:absolute;


right:25px;

top:15px;


}



.material-area-card h3 {


font-size:28px;


margin-bottom:25px;


position:relative;


}




.material-area-card p {


font-size:15px;


line-height:2;


color:#dbeafe;


margin-bottom:25px;


}




.material-area-card ul {


border-top:

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


padding-top:20px;


}





.material-area-card li {


font-size:14px;


padding:8px 0;


color:#e0f2fe;


position:relative;


padding-left:20px;


}





.material-area-card li::before {


content:"";


width:7px;

height:7px;


background:#00b7ff;


position:absolute;


left:0;

top:16px;


transform:rotate(45deg);


}








/* ===============================
GLASS EFFECT TITLE
================================ */


.material-business-area .section-heading h2 {


color:#fff;


}




.material-business-area .section-heading {


position:relative;


z-index:2;


}






/* ===============================
COMMON IMAGE TEXT LAYOUT
================================ */


.business-image-text-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


}




.business-image-text-layout.reverse {


direction:rtl;


}



.business-image-text-layout.reverse > * {


direction:ltr;


}





.business-image {


position:relative;


}





.business-image::before {


content:"";


position:absolute;


width:180px;

height:180px;


border:

2px solid rgba(0,160,220,.25);


right:-40px;

bottom:-40px;


transform:rotate(45deg);


}





.business-image img {


position:relative;


z-index:2;


height:520px;


width:100%;


object-fit:cover;


box-shadow:

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


}






.business-text {


position:relative;


}





.business-label {


font-size:13px;


letter-spacing:4px;


color:#008ac2;


font-weight:700;


margin-bottom:20px;


}



.business-text h2 {


font-size:38px;


line-height:1.5;


margin-bottom:30px;


}



.business-text p {


font-size:16px;


line-height:2.2;


color:#334155;


margin-bottom:25px;


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

BASF Material Solutions Japan
Business Page CSS

PART 3/8

Cosmetic Material Business
Cosmetic Category
Application Field

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






/* ===============================
COSMETIC MATERIAL BUSINESS
================================ */


.cosmetic-material-business {


background:

linear-gradient(

135deg,

#ffffff,

#f7fbfd

);


}







.cosmetic-material-business .business-image {


order:1;


}



.cosmetic-material-business .business-text {


order:2;


}





.cosmetic-material-business .business-label {


color:#0077aa;


}





.cosmetic-material-business .business-text h2 {


font-size:40px;


letter-spacing:1px;


}





.cosmetic-material-business .business-text h2::after {


content:"";


display:block;


width:80px;


height:3px;


background:#00a6d6;


margin-top:25px;


}





/* ===============================
COSMETIC CATEGORY
================================ */


.cosmetic-category {


background:

#061827;


color:white;


position:relative;


}





.cosmetic-category::before {


content:"";


position:absolute;


left:-180px;

top:150px;


width:400px;

height:400px;


border:

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


transform:

rotate(45deg);


}







.cosmetic-category .section-heading p {


color:#3fd7ff;


}



.cosmetic-category .section-heading h2 {


color:white;


}



.cosmetic-category .section-heading h3 {


color:#cbd5e1;


}








/* ===============================
COSMETIC CATEGORY GRID
================================ */


.cosmetic-category-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


position:relative;


z-index:2;


}





.cosmetic-category-card {


padding:40px 30px;


background:

linear-gradient(

145deg,

rgba(255,255,255,.09),

rgba(255,255,255,.02)

);



border:

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



min-height:420px;


position:relative;


overflow:hidden;


}





 {


content:"";


position:absolute;


width:120px;

height:120px;


right:-40px;

bottom:-40px;


border:

1px solid rgba(0,200,255,.35);


transform:

rotate(45deg);


}





.cosmetic-category-card:hover {


transform:

translateY(-12px);


transition:.45s;


border-color:#00b7ff;


}






.cosmetic-category-card h3 {


font-size:22px;


line-height:1.5;


margin-bottom:20px;


}




.cosmetic-category-card p {


font-size:14px;


line-height:2;


color:#d5e8f2;


margin-bottom:25px;


}




.cosmetic-category-card ul {


border-top:

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


padding-top:18px;


}




.cosmetic-category-card li {


font-size:14px;


padding:8px 0;


padding-left:18px;


position:relative;


}




.cosmetic-category-card li::before {


content:"";


position:absolute;


left:0;

top:16px;


width:6px;

height:6px;


background:#00b7ff;


transform:

rotate(45deg);


}








/* ===============================
COSMETIC APPLICATION FIELD
================================ */


.cosmetic-application-field {


background:#fff;


}




.cosmetic-application-field .section-heading {


margin-bottom:70px;


}







.application-detail-grid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:35px;


}





.application-detail-card {


background:white;


border:

1px solid #e2e8f0;


padding:40px;


position:relative;


overflow:hidden;


box-shadow:

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


}





 {


content:"";


position:absolute;


right:-50px;

top:-50px;


width:150px;

height:150px;


border:

1px solid rgba(0,140,220,.25);


transform:

rotate(45deg);


}





.application-detail-card:hover {


box-shadow:

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


transform:

translateY(-8px);


transition:.4s;


}







.application-icon {


font-size:55px;


font-weight:700;


color:#008ac2;


opacity:.18;


margin-bottom:-20px;


}





.application-detail-card h3 {


font-size:27px;


margin-bottom:8px;


}




.application-detail-card h4 {


font-size:15px;


color:#0077aa;


letter-spacing:2px;


margin-bottom:25px;


}




.application-detail-card p {


font-size:15px;


line-height:2.1;


color:#475569;


margin-bottom:25px;


}




.application-detail-card ul {


border-top:

1px solid #e5e7eb;


padding-top:20px;


}




.application-detail-card li {


font-size:14px;


padding:8px 0;


padding-left:18px;


position:relative;


}



.application-detail-card li::before {


content:"";


position:absolute;


left:0;


top:15px;


width:7px;

height:7px;


background:#008ac2;


transform:

rotate(45deg);


}








/* ===============================
DEVELOPMENT SUPPORT FLOW
================================ */


.development-support {


background:

linear-gradient(

135deg,

#f5f9fc,

#ffffff

);


}




.development-flow-box {


display:flex;


align-items:stretch;


justify-content:center;


gap:20px;


}





.development-step-box {


flex:1;


padding:35px 25px;


background:white;


border:

1px solid #dbe4ea;


position:relative;


}



.development-step-box span {


display:block;


font-size:45px;


font-weight:700;


color:#008ac2;


opacity:.2;


}





.development-step-box h3 {


font-size:22px;


margin:15px 0;


}





.development-step-box p {


font-size:14px;


line-height:2;


color:#475569;


}






.flow-arrow {


display:flex;


align-items:center;


font-size:35px;


color:#009dd5;


font-weight:300;


}






/* ===============================
COSMETIC VALUE MESSAGE
================================ */


.cosmetic-value-message {


background:

linear-gradient(

135deg,

#071827,

#0c2940

);


color:white;


text-align:center;


}




.value-message-box {


max-width:850px;


margin:auto;


padding:80px 40px;


border:

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


position:relative;


}




.value-message-box::before {


content:"";


position:absolute;


width:180px;

height:180px;


left:-80px;


top:-80px;


border:

1px solid rgba(0,200,255,.4);


transform:

rotate(45deg);


}




.value-message-box p:first-child {


font-size:13px;


letter-spacing:5px;


color:#4dd9ff;


}




.value-message-box h2 {


font-size:42px;


line-height:1.5;


margin:30px 0;


}





.value-message-box p:last-child {


font-size:16px;


line-height:2.2;


color:#dbeafe;


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

BASF Material Solutions Japan
Business Page CSS

PART 4/8

Industrial Material Business
Automotive
Electronic Materials

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







/* ===============================
INDUSTRIAL MATERIAL BUSINESS
================================ */


.industrial-material-business {


background:

linear-gradient(

135deg,

#ffffff,

#f2f7fa

);


}




business::before {


content:"";


position:absolute;


right:-120px;


top:100px;


width:350px;

height:350px;


border:

1px solid rgba(0,130,190,.18);


transform:

rotate(45deg);


}





.industrial-material-business .business-text {


position:relative;


z-index:2;


}





.industrial-material-business .business-text h2 {


font-size:42px;


line-height:1.5;


}




.industrial-material-business .business-text h2::after {


content:"";


display:block;


width:90px;


height:3px;


background:#008ac2;


margin-top:25px;


}





.industrial-material-business .business-image img {


height:560px;


}








/* ===============================
INDUSTRIAL CATEGORY
================================ */


.industrial-material-category {


background:#071827;


color:white;


position:relative;


}





.industrial-material-category::after {


content:"";


position:absolute;


right:-200px;


bottom:-200px;


width:600px;

height:600px;


border:

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


transform:

rotate(45deg);


}







.industrial-material-category .section-heading h2 {


color:white;


}



.industrial-material-category .section-heading h3 {


color:#cbd5e1;


}



.industrial-material-category .section-heading p {


color:#41d8ff;


}








/* ===============================
INDUSTRIAL CATEGORY GRID
================================ */


.industrial-category-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:30px;


position:relative;


z-index:2;


}






.industrial-category-card {


background:

linear-gradient(

145deg,

rgba(255,255,255,.1),

rgba(255,255,255,.03)

);



border:

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


padding:45px 30px;


min-height:430px;


position:relative;


overflow:hidden;


}




{


content:"";


position:absolute;


left:-50px;


bottom:-50px;


width:150px;

height:150px;


border:

1px solid rgba(0,180,255,.4);


transform:

rotate(45deg);


}




.industrial-category-card:hover {


border-color:#00b7ff;


transform:

translateY(-10px);


transition:.4s;


}







.category-number {


font-size:60px;


font-weight:700;


color:rgba(0,190,255,.25);


line-height:1;


margin-bottom:20px;


}





.industrial-category-card h3 {


font-size:25px;


margin-bottom:25px;


}





.industrial-category-card p {


font-size:15px;


line-height:2;


color:#dbeafe;


margin-bottom:25px;


}





.industrial-category-card ul {


border-top:

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


padding-top:20px;


}





.industrial-category-card li {


padding:8px 0;


font-size:14px;


padding-left:18px;


position:relative;


}




.industrial-category-card li::before {


content:"";


position:absolute;


left:0;


top:15px;


width:7px;

height:7px;


background:#00b7ff;


transform:

rotate(45deg);


}









/* ===============================
AUTOMOTIVE MATERIAL FIELD
================================ */



.automotive-material-field {


background:#fff;


}





.industry-detail-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


}





.industry-detail-layout.reverse {


direction:rtl;


}





.industry-detail-layout.reverse > * {


direction:ltr;


}







.industry-detail-image {


position:relative;


}





 {


content:"";


position:absolute;


left:-40px;


top:-40px;


width:200px;

height:200px;


border:

1px solid rgba(0,140,220,.08);


transform:

rotate(45deg);


}





.industry-detail-image img {


position:relative;


z-index:2;


height:500px;


width:100%;


object-fit:cover;


box-shadow:

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


}





.industry-detail-text p:first-child {


font-size:13px;


letter-spacing:4px;


color:#008ac2;


font-weight:700;


margin-bottom:20px;


}





.industry-detail-text h2 {


font-size:40px;


margin-bottom:30px;


line-height:1.5;


}





.industry-detail-text p {


font-size:16px;


line-height:2.2;


color:#374151;


margin-bottom:25px;


}





.industry-detail-text h3 {


font-size:22px;


margin:30px 0 20px;


}





.industry-detail-text ul {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:12px;


}





.industry-detail-text li {


padding:15px;


background:#f1f5f9;


border-left:

3px solid #008ac2;


font-size:14px;


}









/* ===============================
ELECTRONIC MATERIAL FIELD
================================ */


.electronic-material-field {


background:

linear-gradient(

135deg,

#f6fafc,

#ffffff

);


}







.electronic-material-field .industry-detail-image::before {


left:auto;


right:-40px;


}





.electronic-material-field .industry-detail-text h2 {


font-size:40px;


}








/* ===============================
TECH GRID DECORATION
================================ */


,


.electronic-material-field::after {


content:"";


position:absolute;


width:220px;


height:220px;


background-image:


linear-gradient(

90deg,

rgba(0,140,220,.08) 1px,

transparent 1px

),


linear-gradient(

0deg,

rgba(0,140,220,.08) 1px,

transparent 1px

);


background-size:

30px 30px;


right:40px;


bottom:40px;


opacity:.6;


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

BASF Material Solutions Japan
Business Page CSS

PART 5/8

Industrial Application
Global Supply Chain
Import Process

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







/* ===============================
INDUSTRIAL APPLICATION FIELD
================================ */


.industrial-application-field {


background:#ffffff;


}





.industrial-application-field .section-heading {


position:relative;


}





.industrial-application-field .section-heading::after {


content:"";


position:absolute;


width:120px;


height:1px;


background:#008ac2;


left:50%;


bottom:-35px;


transform:translateX(-50%);


}








/* ===============================
APPLICATION GRID
================================ */


.industrial-application-grid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:35px;


}





.industrial-application-card {


padding:40px 35px;


background:

linear-gradient(

135deg,

#ffffff,

#f5f9fc

);



border:

1px solid #e2e8f0;


position:relative;


overflow:hidden;


min-height:360px;


}





.industrial-application-card::before {


content:"";


position:absolute;


right:-45px;


top:-45px;


width:130px;


height:130px;


border:

1px solid rgba(0,150,220,.08);


transform:

rotate(45deg);


}





.industrial-application-card:hover {


transform:

translateY(-8px);


box-shadow:

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


transition:.4s;


}





.application-number {


font-size:55px;


font-weight:700;


color:#008ac2;


opacity:.18;


margin-bottom:-15px;


}





.industrial-application-card h3 {


font-size:26px;


margin-bottom:20px;


}





.industrial-application-card p {


font-size:15px;


line-height:2;


color:#475569;


margin-bottom:25px;


}





.industrial-application-card ul {


border-top:

1px solid #e5e7eb;


padding-top:18px;


}





.industrial-application-card li {


font-size:14px;


padding:8px 0;


padding-left:18px;


position:relative;


}





.industrial-application-card li::before {


content:"";


position:absolute;


left:0;


top:15px;


width:6px;


height:6px;


background:#008ac2;


transform:

rotate(45deg);


}









/* ===============================
GLOBAL SUPPLY CHAIN
================================ */


.global-supply-chain-business {


background:


linear-gradient(

135deg,

#061725,

#0b2940

);


color:white;


position:relative;


overflow:hidden;


}






.global-supply-chain-business::before {


content:"";


position:absolute;


width:600px;


height:600px;


right:-220px;


top:-150px;


border:


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


transform:

rotate(45deg);


}







.global-supply-chain-business .section-heading p {


color:#43d9ff;


}



.global-supply-chain-business .section-heading h2 {


color:white;


}



.global-supply-chain-business .section-heading h3 {


color:#dbeafe;


}







/* ===============================
SUPPLY LAYOUT
================================ */


.global-supply-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


position:relative;


z-index:2;


}







.global-supply-image {


position:relative;


}





.global-supply-image::before {


content:"";


position:absolute;


left:-50px;


bottom:-50px;


width:180px;


height:180px;


border:


1px solid rgba(0,200,255,.4);


transform:

rotate(45deg);


}




.global-supply-image img {


position:relative;


z-index:2;


height:500px;


width:100%;


object-fit:cover;


box-shadow:

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


}






.global-supply-text h2 {


font-size:40px;


line-height:1.5;


margin-bottom:30px;


}





.global-supply-text p {


font-size:16px;


line-height:2.2;


color:#dbeafe;


margin-bottom:25px;


}








/* ===============================
SUPPLY FEATURE LIST
================================ */


.supply-feature-list {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:20px;


margin-top:40px;


}





.supply-feature-list div {


padding:25px;


border:


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


background:


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


position:relative;


}




.supply-feature-list div::before {


content:"";


position:absolute;


left:0;


top:0;


height:35px;


width:35px;


border-top:


2px solid #00b7ff;


border-left:


2px solid #00b7ff;


}





.supply-feature-list h4 {


font-size:16px;


letter-spacing:2px;


color:#4dd9ff;


margin-bottom:10px;


}




.supply-feature-list p {


font-size:14px;


margin:0;


}








/* ===============================
IMPORT PROCESS
================================ */


.import-process {


background:#f5f9fc;


}





.import-flow {


display:flex;


align-items:stretch;


gap:20px;


}





.import-step {


flex:1;


background:white;


padding:35px 25px;


border:


1px solid #dbe4ea;


position:relative;


}





.import-step:hover {


box-shadow:

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


transform:

translateY(-8px);


transition:.4s;


}




.import-step span {


font-size:50px;


font-weight:700;


color:#008ac2;


opacity:.18;


}




.import-step h3 {


font-size:22px;


margin:15px 0;


}





.import-step p {


font-size:14px;


line-height:2;


color:#475569;


}







.import-arrow {


display:flex;


align-items:center;


font-size:35px;


color:#008ac2;


}









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


.supply-message {


background:


linear-gradient(

135deg,

#008ac2,

#00557f

);


color:white;


text-align:center;


}




.message-box {


max-width:900px;


margin:auto;


padding:90px 50px;


border:


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


position:relative;


overflow:hidden;


}





.message-box::before {


content:"";


position:absolute;


right:-80px;


bottom:-80px;


width:220px;


height:220px;


border:


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


transform:

rotate(45deg);


}




.message-box p:first-child {


font-size:13px;


letter-spacing:5px;


}




.message-box h2 {


font-size:42px;


line-height:1.5;


margin:30px 0;


}




.message-box p:last-child {


font-size:16px;


line-height:2.2;


color:#e0f2fe;


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

BASF Material Solutions Japan
Business Page CSS

PART 6/8

Quality Management
Technical Support
BtoB Solution

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







/* ===============================
QUALITY MANAGEMENT SYSTEM
================================ */


.quality-management-system {


background:


linear-gradient(

135deg,

#ffffff,

#f4f9fc

);


}







.quality-introduction-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


}







.quality-image {


position:relative;


}





.quality-image::before {


content:"";


position:absolute;


left:-50px;


top:-50px;


width:220px;


height:220px;


border:


1px solid rgba(0,140,220,.25);


transform:

rotate(45deg);


}




.quality-image img {


position:relative;


z-index:2;


height:520px;


width:100%;


object-fit:cover;


box-shadow:


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


}







.quality-introduction-text h2 {


font-size:38px;


line-height:1.5;


margin-bottom:30px;


}





.quality-introduction-text p {


font-size:16px;


line-height:2.2;


color:#374151;


margin-bottom:25px;


}









/* ===============================
QUALITY PROCESS
================================ */


.quality-control-process {


background:#071827;


color:white;


position:relative;


}







.quality-control-process::before {


content:"";


position:absolute;


right:-150px;


top:100px;


width:450px;


height:450px;


border:


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


transform:

rotate(45deg);


}





.quality-control-process .section-heading p {


color:#40d7ff;


}



.quality-control-process .section-heading h2 {


color:white;


}







.quality-process-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


position:relative;


z-index:2;


}





.quality-process-card {


padding:40px 25px;


background:


rgba(255,255,255,.06);


border:


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


position:relative;


}





.quality-process-card:hover {


border-color:#00b7ff;


transform:

translateY(-10px);


transition:.4s;


}





.process-number {


font-size:55px;


font-weight:700;


color:#00b7ff;


opacity:.25;


}





.quality-process-card h3 {


font-size:23px;


margin:20px 0;


}





.quality-process-card p {


font-size:14px;


line-height:2;


color:#dbeafe;


}








/* ===============================
TECHNICAL SUPPORT PLATFORM
================================ */


.technical-support-platform {


background:white;


}





.technical-support-layout {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


}




.technical-support-text h2 {


font-size:40px;


line-height:1.5;


margin-bottom:30px;


}





.technical-support-text p {


font-size:16px;


line-height:2.2;


color:#475569;


margin-bottom:25px;


}





.technical-support-image {


position:relative;


}





.technical-support-image::after {


content:"";


position:absolute;


right:-40px;


bottom:-40px;


width:180px;


height:180px;


border:


1px solid rgba(0,150,220,.3);


transform:

rotate(45deg);


}




.technical-support-image img {


position:relative;


z-index:2;


height:480px;


width:100%;


object-fit:cover;


box-shadow:


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


}









/* ===============================
TECHNICAL INFORMATION
================================ */


.technical-information {


background:


linear-gradient(

135deg,

#f4f8fb,

#ffffff

);


}





.technical-information-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.technical-information-card {


background:white;


padding:35px 25px;


border:


1px solid #dbe4ea;


position:relative;


overflow:hidden;


}




.technical-information-card::before {


content:"";


position:absolute;


right:-40px;


top:-40px;


width:100px;


height:100px;


border:


1px solid rgba(0,140,220,.3);


transform:

rotate(45deg);


}





.technical-information-card h3 {


font-size:22px;


margin-bottom:20px;


color:#006b9f;


}





.technical-information-card p {


font-size:14px;


line-height:2;


color:#475569;


}








/* ===============================
BTOB SOLUTION PARTNER
================================ */


.btob-solution-partner {


background:


linear-gradient(

135deg,

#061725,

#0a314a

);


color:white;


text-align:center;


}





.partner-message-box {


max-width:950px;


margin:auto;


padding:90px 60px;


border:


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


position:relative;


}





.partner-message-box::before {


content:"";


position:absolute;


width:250px;


height:250px;


left:-100px;


bottom:-100px;


border:


1px solid rgba(0,190,255,.35);


transform:

rotate(45deg);


}




.partner-message-box p:first-child {


font-size:13px;


letter-spacing:5px;


color:#45d8ff;


}




.partner-message-box h2 {


font-size:44px;


line-height:1.5;


margin:35px 0;


}





.partner-message-box p:last-child {


font-size:16px;


line-height:2.2;


color:#dbeafe;


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

BASF Material Solutions Japan
Business Page CSS

PART 7/8

Business Advantage
Customer Value
Corporate Message

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







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


.business-advantage {


background:


linear-gradient(

135deg,

#ffffff,

#f5f9fc

);


position:relative;


}





.business-advantage::before {


content:"";


position:absolute;


left:-180px;


top:100px;


width:400px;


height:400px;


border:


1px solid rgba(0,140,220,.18);


transform:

rotate(45deg);


}







.business-advantage .section-heading {


position:relative;


z-index:2;


}







.advantage-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


position:relative;


z-index:2;


}







.advantage-card {


background:white;


padding:45px 30px;


border:


1px solid #dbe4ea;


position:relative;


overflow:hidden;


min-height:430px;


}





.advantage-card::before {


content:"";


position:absolute;


right:-50px;


bottom:-50px;


width:160px;


height:160px;


border:


1px solid rgba(0,140,220,.25);


transform:

rotate(45deg);


}




.advantage-card:hover {


transform:

translateY(-10px);


box-shadow:


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


transition:.4s;


}





.advantage-number {


font-size:60px;


font-weight:700;


color:#008ac2;


opacity:.15;


}




.advantage-card h3 {


font-size:28px;


margin:20px 0 8px;


}





.advantage-card h4 {


font-size:15px;


letter-spacing:2px;


color:#008ac2;


margin-bottom:25px;


}





.advantage-card p {


font-size:15px;


line-height:2;


color:#475569;


}





.advantage-card ul {


margin-top:25px;


border-top:


1px solid #e5e7eb;


padding-top:20px;


}





.advantage-card li {


font-size:14px;


padding:8px 0;


padding-left:18px;


position:relative;


}





.advantage-card li::before {


content:"";


position:absolute;


left:0;


top:15px;


width:6px;


height:6px;


background:#008ac2;


transform:

rotate(45deg);


}









/* ===============================
CUSTOMER VALUE CREATION
================================ */


.customer-value-creation {


background:


linear-gradient(

135deg,

#061725,

#0b2c43

);


color:white;


position:relative;


}





.customer-value-creation::after {


content:"";


position:absolute;


right:-180px;


bottom:-180px;


width:500px;


height:500px;


border:


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


transform:

rotate(45deg);


}







.customer-value-creation .section-heading p {


color:#45d8ff;


}




.customer-value-creation .section-heading h2 {


color:white;


}



.customer-value-creation .section-heading h3 {


color:#dbeafe;


}








/* ===============================
VALUE FLOW
================================ */


.value-flow {


display:flex;


align-items:stretch;


gap:20px;


position:relative;


z-index:2;


}





.value-flow-item {


flex:1;


padding:40px 25px;


border:


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


background:


rgba(255,255,255,.06);


}





.value-flow-item span {


font-size:55px;


font-weight:700;


color:#00b7ff;


opacity:.3;


}





.value-flow-item h3 {


font-size:23px;


margin:20px 0;


}




.value-flow-item p {


font-size:14px;


line-height:2;


color:#dbeafe;


}





.value-arrow {


display:flex;


align-items:center;


font-size:35px;


color:#00b7ff;


}









/* ===============================
INDUSTRY SOLUTION MATRIX
================================ */


.industry-solution-matrix {


background:#ffffff;


}







.solution-matrix-grid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}





.solution-item {


padding:40px;


background:


linear-gradient(

135deg,

#ffffff,

#f4f8fb

);


border:


1px solid #dbe4ea;


position:relative;


}





.solution-item::before {


content:"";


position:absolute;


top:0;


left:0;


width:40px;


height:40px;


border-top:


3px solid #008ac2;


border-left:


3px solid #008ac2;


}





.solution-item:hover {


transform:

translateY(-8px);


box-shadow:


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


transition:.4s;


}





.solution-item h3 {


font-size:24px;


margin-bottom:20px;


}





.solution-item p {


font-size:15px;


line-height:2;


color:#475569;


}









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


.business-message {


background:


linear-gradient(

135deg,

#0077aa,

#003b58

);


color:white;


text-align:center;


}





.business-message-inner {


max-width:950px;


margin:auto;


padding:100px 60px;


border:


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


position:relative;


overflow:hidden;


}





.business-message-inner::before {


content:"";


position:absolute;


width:300px;


height:300px;


right:-120px;


top:-120px;


border:


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


transform:

rotate(45deg);


}





.business-message-inner p:first-child {


font-size:13px;


letter-spacing:6px;


color:#b8efff;


}





.business-message-inner h2 {


font-size:46px;


line-height:1.5;


margin:35px 0;


}




.business-message-inner p:last-child {


font-size:17px;


line-height:2.2;


color:#e0f2fe;


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

BASF Material Solutions Japan
Business Page CSS

PART 8/8

Future Vision
Contact
Footer
Responsive

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







/* ===============================
FUTURE VISION
================================ */


.future-vision {


background:


linear-gradient(

135deg,

#061725,

#0c3048

);


color:white;


position:relative;


overflow:hidden;


}







.future-background-element {


position:absolute;


inset:0;


pointer-events:none;


}





.diamond-shape {


position:absolute;


right:8%;


top:20%;


width:260px;


height:260px;


border:


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


transform:

rotate(45deg);


}





.hexagon-shape {


position:absolute;


left:8%;


bottom:15%;


width:180px;


height:180px;


border:


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


clip-path:

polygon(

25% 6%,

75% 6%,

100% 50%,

75% 94%,

25% 94%,

0 50%

);


}







.future-content {


max-width:950px;


margin:auto;


position:relative;


z-index:2;


}





.future-label {


font-size:13px;


letter-spacing:6px;


color:#45d8ff;


margin-bottom:25px;


}





.future-content h2 {


font-size:48px;


line-height:1.5;


margin-bottom:40px;


}





.future-content p {


font-size:17px;


line-height:2.3;


color:#e0f2fe;


margin-bottom:25px;


}









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


.business-summary {


background:


linear-gradient(

135deg,

#ffffff,

#f4f8fb

);


}







.summary-grid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}







.summary-card {


padding:40px 30px;


background:white;


border:


1px solid #dbe4ea;


position:relative;


overflow:hidden;


}





.summary-card::before {


content:"";


position:absolute;


right:-40px;


bottom:-40px;


width:120px;


height:120px;


border:


1px solid rgba(0,140,220,.25);


transform:

rotate(45deg);


}





.summary-card h3 {


font-size:24px;


margin-bottom:20px;


color:#006b9f;


}





.summary-card p {


font-size:15px;


line-height:2;


color:#475569;


}









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


.business-contact-cta {


background:


linear-gradient(

135deg,

#f1f7fb,

#ffffff

);


}





.contact-cta-box {


display:flex;


align-items:center;


justify-content:space-between;


gap:50px;


padding:70px;


background:white;


border:


1px solid #dbe4ea;


box-shadow:


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


position:relative;


overflow:hidden;


}





.contact-cta-box::after {


content:"";


position:absolute;


right:-100px;


top:-100px;


width:300px;


height:300px;


border:


1px solid rgba(0,150,220,.2);


transform:

rotate(45deg);


}






.cta-content {


position:relative;


z-index:2;


}





.cta-content > p:first-child {


font-size:13px;


letter-spacing:5px;


color:#008ac2;


font-weight:700;


}





.cta-content h2 {


font-size:38px;


line-height:1.5;


margin:20px 0;


}





.cta-content p:last-child {


font-size:16px;


line-height:2;


color:#475569;


max-width:700px;


}





.cta-button {


display:inline-flex;


align-items:center;


justify-content:center;


padding:20px 45px;


background:


linear-gradient(

135deg,

#008ac2,

#00557f

);


color:white;


font-size:16px;


font-weight:600;


white-space:nowrap;


position:relative;


z-index:2;


}





.cta-button:hover {


opacity:.85;


transition:.3s;


}









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


.business-footer {


background:#061725;


color:white;


padding:80px 0 30px;


}





.footer-content {


display:grid;


grid-template-columns:

2fr 1fr 1fr;


gap:60px;


padding-bottom:50px;


border-bottom:


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


}





.footer-company img {


width:180px;


margin-bottom:25px;


}





.footer-company h3 {


font-size:22px;


margin-bottom:15px;


}





.footer-company p {


font-size:14px;


line-height:2;


color:#cbd5e1;


margin-bottom:10px;


}





.footer-links h4,


.footer-business h4 {


font-size:16px;


letter-spacing:3px;


margin-bottom:25px;


color:#45d8ff;


}





.footer-links li,


.footer-business li {


padding:8px 0;


font-size:14px;


color:#dbeafe;


}





.footer-links a:hover {


color:#45d8ff;


}





.footer-bottom {


text-align:center;


padding-top:30px;


font-size:13px;


color:#94a3b8;


}









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

RESPONSIVE DESIGN

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







@media(max-width:1200px){



.hero-container h1 {


font-size:52px;


}



.material-area-grid,


.cosmetic-category-grid,


.industrial-category-grid,


.advantage-grid {


grid-template-columns:

repeat(2,1fr);


}




.technical-information-grid {


grid-template-columns:

repeat(2,1fr);


}



.summary-grid {


grid-template-columns:

repeat(2,1fr);


}


}









@media(max-width:900px){



section {


padding:80px 0;


}




.header-inner {


height:auto;


padding:25px 0;


flex-direction:column;


gap:25px;


}



.business-navigation ul {


flex-wrap:wrap;


justify-content:center;


gap:20px;


}



.overview-content,


.business-image-text-layout,


.global-supply-layout,


.quality-introduction-layout,


.technical-support-layout,


.industry-detail-layout {


grid-template-columns:1fr;


gap:50px;


}



.hero-information-box {


grid-template-columns:

repeat(2,1fr);


}



.application-detail-grid,


.industrial-application-grid,


.solution-matrix-grid {


grid-template-columns:

repeat(2,1fr);


}



.import-flow,


.value-flow {


flex-direction:column;


}



.import-arrow,


.value-arrow {


justify-content:center;


transform:

rotate(90deg);


}



.contact-cta-box {


flex-direction:column;


align-items:flex-start;


}



.footer-content {


grid-template-columns:1fr;


}


}









@media(max-width:600px){



.container {


width:92%;


}




.section-heading h2 {


font-size:30px;


}



.section-heading h3 {


font-size:16px;


}




.hero-container h1 {


font-size:36px;


letter-spacing:2px;


}



.hero-container h2 {


font-size:20px;


}



.hero-description {


font-size:15px;


}



.hero-information-box {


grid-template-columns:1fr;


}



.material-area-grid,


.cosmetic-category-grid,


.industrial-category-grid,


.application-detail-grid,


.industrial-application-grid,


.technical-information-grid,


.solution-matrix-grid,


.summary-grid {


grid-template-columns:1fr;


}



.hero-tech-element {


display:none;


}



.business-image img,


.overview-image img,


.quality-image img {


height:360px;


}



.future-content h2 {


font-size:32px;


}



.future-content p {


font-size:15px;


}



.message-box,


.partner-message-box,


.business-message-inner {


padding:50px 25px;


}



.message-box h2,


.partner-message-box h2,


.business-message-inner h2 {


font-size:30px;


}



.contact-cta-box {


padding:40px 25px;


}



.cta-content h2 {


font-size:28px;


}



.cta-button {


width:100%;


}



.footer-company img {


width:150px;


}


}/* 隐藏蓝色菱形线条 */

.tech-diamond,
.hero-tech-element,
.overview-image::before,
.overview-text::after,
.business-image::before,
.global-supply-image::before,
.diamond-shape,
.hexagon-shape {
    display:none;
}