:root { --mat-navy: #0f335f; --mat-unit: calc(100vh - var(--header-height)); }
html { font-family: Arial, sans-serif; font-weight: 300; color: #333; background: #fff; }
* { box-sizing: border-box; }
.main { height: auto; min-height: 100vh; max-height: none; }
.main.is-page-stack, .main:has(.page-stack) { overflow: visible; height: auto; max-height: none; }
.page-stack { margin-top: var(--header-height); }
@media (prefers-reduced-motion:reduce) {
.page-stack [class*="-trAnim-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.material-system { position: relative; width: 100%; padding: 0; overflow: hidden; box-sizing: border-box; }
.material-system-bg { position: relative; width: 100%; overflow: hidden; }
/* .material-system-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: #0F335FA1;
pointer-events: none;
} */
.hidden-layer { display: none; }
.material-system-bg-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.material-system-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; vertical-align: bottom; }
.material-system-bg video { display: block; width: 100%; height: auto; vertical-align: middle; }
.material-system-content { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; max-width: 77rem; padding: 5.25rem 2rem 0 7.2%; box-sizing: border-box; }
.materials-item { padding: 10.625rem 0 3.125rem; background: linear-gradient(90deg, #74BCE7 0%, #0F335F 100%) top / 100% 65% no-repeat, #fff; }
.materials-title { font-size: 3.4375rem; line-height: 1.2; font-weight: 700; color: #fff; margin-bottom: 1.5rem; }
.materials-label { font-size: 1.125rem; line-height: 1.2; font-weight: 300; color: #fff; margin-bottom: 3rem; }
.materials-desc { margin-bottom: .625rem; font-size: 1.125rem; line-height: 1.2; font-weight: 300; color: #61ACD8; }
.materials-content { position: relative; margin: 0 auto; width: 80%; max-width: 1440px; }
.materials-content img { width: 100%; }
.materials-content-text { position: absolute; top: 40px; left: 5%; }
.materials-item .materials-item-title { margin-bottom: .625rem; font-size: 2.5rem; line-height: 1.2; font-weight: 400; color: #0F335F; }
.materials-item .materials-item-label { font-size: 1.25rem; color: #0F335F; font-weight: 300; line-height: 1.2; }
.materials-item .materials-item-desc { font-size: 1.25rem; color: #0F335F; font-weight: 300; line-height: 1.2; }
.materials-item-3 .materials-content { position: relative; }
.materials-item-3 .materials-content-text { position: absolute; bottom: 10%; right: 27px; max-width: 44%; top: auto; left: auto; }
.materials-item-4 .materials-item-title { color: #ffffff; }
.materials-item-4 .materials-item-label { color: #ffffff; }
.materials-item-4 .materials-item-desc { color: #ffffff; }
.item-icons { margin: 4rem auto 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; width: 96%; max-width: 1000px; }
.item-icon { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.item-icon img { width: 150px; }
.item-icon__title { font-size: 1.25rem; line-height: 1.2; font-weight: 300; color: #0F335F; }
@media screen and (max-width:1200px) {
.item-icon img { width: 120px; height: 120px; }
}
@media screen and (max-width:991px) {
.material-system, .material-system-bg { height: 500px; }
.material-system-bg-content { display: flex; flex-direction: column; z-index: 1; }
.hidden-layer { display: block; flex: 1 1 auto; width: 100%; min-height: 0; background: #0F335FA1; pointer-events: none; }
.material-system-bg-logo { flex: 0 0 auto; width: 100%; }
.material-system-logo { position: static; display: block; width: 100%; height: auto; object-fit: contain; object-position: bottom center; }
.material-system-bg video { position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; height: 100%; max-width: none; transform: translateX(-50%); object-fit: cover; object-position: top center; }
.materials-title { font-size: 2.5rem; }
.materials-label { font-size: 1rem; }
.materials-desc { font-size: 1rem; }
.materials-content-text { top: 20px; }
.materials-item { padding: 5rem 0 1.5rem; }
.materials-item .materials-item-title { font-size: 2rem; }
.materials-item .materials-item-label { font-size: 1rem; }
.materials-item .materials-item-desc { font-size: 1rem; }
.materials-item-3 .materials-content-text { bottom: 5%; right: 10px; max-width: 50%; }
.item-icon img { width: 100px; height: 100px; }
.item-icon__title { font-size: 1rem; }
}
@media screen and (max-width:576px) {
.materials-content { width: 90%; }
.materials-item { padding: 3rem 0 1.5rem; background: linear-gradient(90deg, #74BCE7 0%, #0F335F 100%) top / 100% 45% no-repeat, #fff; }
.material-system-content { padding: 2rem 1rem 0 1rem; }
.materials-title { font-size: 1.25rem; margin-bottom: 1rem; }
.materials-item .materials-item-title { font-size: 1.25rem; margin-bottom: .5rem; }
.materials-item .materials-item-label { font-size: .875rem; margin-bottom: .5rem; }
.materials-item .materials-item-desc { font-size: .875rem; margin-bottom: .5rem; }
.materials-label { font-size: .875rem; margin-bottom: .5rem; }
.item-icons { margin: 1.5rem auto 0px; }
.item-icon img { width: 60px; height: 60px; }
.item-icon__title { font-size: .75rem; }
}
.body-zh .materials-item-3 .materials-content-text { bottom: 23%; }
@media screen and (max-width:991px) {
.body-zh .materials-item-3 .materials-content-text { bottom: 12%; }
}
@media screen and (max-width:576px) {
.body-zh .materials-item-3 .materials-content-text { bottom: 8%; }
}