* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: #fff;
            color: #050505;
            font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans", Arial, Helvetica, sans-serif;
            line-height: 1.45;
            overflow-x: hidden;
            padding-top: 0;
        }

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

        a {
            color: inherit;
            text-decoration: none;
        }

        button {
            border: 0;
            background: transparent;
            cursor: pointer;
            font-family: inherit;
        }

        :root {
            --page-max: 1420px;
            --side: clamp(22px, 4.4vw, 70px);
            --gold: #d2ba92;
            --coffee: #8a6a43;
            --coffee-deep: #6f5434;
            --soft-text: #9b9b9b;
        }

        .hidden {
            display: none !important;
        }

        .oe-hero {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            width: 100%;
            aspect-ratio: 1920 / 800;
            min-height: 420px;
            padding: 156px var(--side) 50px;
            background: #15110d;
            color: #fff;
            display: grid;
            place-items: center;
            text-align: center;
        }

        .oe-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.76));
            pointer-events: none;
        }

        .oe-hero-media {
            position: absolute;
            inset: 0;
            z-index: -2;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .oe-hero > div {
            position: relative;
            z-index: 1;
        }

        .oe-hero h1 {
            max-width: 1180px;
            font-size: clamp(34px, 3.4vw, 54px);
            font-weight: 800;
            letter-spacing: 0.05em;
            line-height: 1.15;
            text-transform: uppercase;
            opacity: 0;
            animation: heroRise 0.9s ease forwards;
        }

        .oe-hero .rule {
            display: block;
            width: 48px;
            height: 2px;
            margin: 70px auto 44px;
            background: rgba(255, 255, 255, 0.7);
            opacity: 0;
            transform: scaleX(0);
            animation: heroLine 0.72s ease 0.18s forwards;
        }

        .oe-hero p {
            max-width: 940px;
            margin: 0 auto;
            color: rgba(255, 255, 255, 0.84);
            font-size: clamp(14px, 1.4vw, 21px); 
            letter-spacing: 0.03em;
            line-height: 1.45;
            text-transform: none;
            opacity: 0;
            animation: heroRise 0.9s ease 0.32s forwards;
        }

        @keyframes heroRise {
            from {
                opacity: 0;
                transform: translateY(22px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes heroLine {
            from {
                opacity: 0;
                transform: scaleX(0);
            }
            to {
                opacity: 1;
                transform: scaleX(1);
            }
        }

        .fx-reveal {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity 0.8s ease, transform 0.8s ease;
            transition-delay: var(--fx-delay, 0s);
        }

        .fx-reveal.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .oe-section {
            width: min(var(--page-max), calc(100% - var(--side) * 2));
            margin: 0 auto;
        }

        .oem-showcase {
            position: relative;
            overflow: hidden;
            padding: 54px 0 86px;
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86)),
                radial-gradient(circle at 35% 34%, rgba(223, 222, 220, 0.28), transparent 32%);
        }

        .oem-showcase::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.18;
            background-image:
                linear-gradient(72deg, transparent 0 33%, rgba(192, 192, 192, 0.36) 33.2% 33.5%, transparent 33.7% 100%),
                linear-gradient(105deg, transparent 0 52%, rgba(192, 192, 192, 0.32) 52.2% 52.5%, transparent 52.7% 100%);
            background-size: 430px 430px, 520px 520px;
            pointer-events: none;
        }

        .oem-layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 0.62fr 1.38fr;
            grid-template-rows: auto auto;
            column-gap: clamp(42px, 5vw, 72px);
            row-gap: 22px;
            align-items: start;
        }

        .oem-copy {
            position: relative;
            min-width: 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            grid-column: 1;
            grid-row: 1; 
        }

        .oem-copy h2,
        .material h2,
        .support-head h2 {
            font-size: clamp(40px, 4.1vw, 68px);
            font-weight: 900;
            letter-spacing: 0.11em;
            line-height: 1.05;
            text-transform: uppercase;
            white-space: normal;
            text-wrap: balance;
        }

        .oem-copy h2 {
            font-size: clamp(34px, 3.25vw, 56px);
            letter-spacing: 0.06em;
            white-space: normal;
            text-wrap: balance;
        }

        .material h2 {
            white-space: normal;
        }

        .oem-pager {
            display: grid;
            grid-template-columns: repeat(13, auto);
            align-items: baseline;
            justify-content: space-between;
            gap: 0;
            width: 100%;
            margin: 34px 0 46px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            color: #aaa;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }

        .oem-pager::-webkit-scrollbar {
            display: none;
        }

        .oem-pager button {
            color: #aaa;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.08em;
            transition: color 0.25s ease, font-size 0.25s ease;
        }

        .oem-pager button.active {
            color: #111;
            font-size: 29px;
            letter-spacing: 0.03em;
        }

        .oem-pager .divider {
            color: #aaa;
        }

        .oem-copy h3 {
            font-size: clamp(18px, 1.48vw, 23px);
            font-weight: 500;
            letter-spacing: 0.075em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .oem-copy p {
            margin-top: 18px;
            max-width: 560px;
            color: #111;
            font-size: clamp(18px, 1.22vw, 21px);
            font-weight: 500;
            letter-spacing: 0.03em;
            line-height: 1.42;
            text-transform: none;
        }

        .gold-swatch {
            display: block;
            width: 72px;
            height: 28px;
            margin: 56px auto 0;
            background: var(--gold);
        }

        .watermark {
            position: absolute;
            left: 0;
            bottom: -12px;
            color: rgba(148, 131, 157, 0.08);
            font-size: clamp(116px, 13vw, 210px);
            font-weight: 900;
            line-height: 1;
            pointer-events: none;
        }

        .oem-dots {
            position: static;
            grid-column: 1;
            grid-row: 2;
            align-self: center;
            display: flex;
            align-items: center;
            gap: 52px;
            margin-top: 0;
        }

        .oem-dots button {
            width: 8px;
            height: 8px;
            padding: 0;
            border: 2px solid #b79b78;
            border-radius: 50%;
            background: transparent;
            transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }

        .oem-dots button.active {
            width: 13px;
            height: 13px;
            border-color: var(--coffee);
            box-shadow: inset 0 0 0 4px #fff;
            background: var(--coffee);
        }

        .oem-media {
            position: relative;
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            width: min(100%, 760px);
            justify-self: end;
            margin-bottom: 0;
            aspect-ratio: 800 / 426;
            background: #000;
            overflow: hidden;
        }

        .oem-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.16) 46%, transparent 62%);
            pointer-events: none;
            opacity: 0;
            transform: translateX(-120%);
            transition: opacity 0.25s ease, transform 0.65s ease;
        }

        .oem-media:hover::after {
            opacity: 1;
            transform: translateX(120%);
        }

        .oem-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.9;
            transition: opacity 0.28s ease, transform 0.45s ease;
        }

        .oem-media:hover img {
            transform: none;
        }

        .oem-media.is-changing img {
            opacity: 0.25;
            transform: none;
        }

        .oem-arrows {
            position: static;
            grid-column: 2;
            grid-row: 2;
            justify-self: end;
            align-self: center;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 0;
        }

        .oem-arrow {
            width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 1px solid #ececec;
            background: #fff;
            color: #777;
            font-size: 12px;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
        }

        .oem-arrow:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
        }

        .oem-arrow.next {
            background: var(--coffee);
            border-color: rgba(255, 255, 255, 0.65);
            color: #fff;
        }

        .oem-arrow.next:hover {
            background: var(--coffee-deep);
            border-color: rgba(255, 255, 255, 0.82);
            box-shadow: 0 12px 26px rgba(64, 46, 28, 0.28);
        }

        .material {
            padding: 0;
            background: #fff;
        }

        .material .oe-section {
            position: relative;
            z-index: 2;
        }

        .material h2 {
            position: absolute;
            z-index: 2;
            left: 16%;
            top: 20%;
            max-width: 300px;
            margin: 0;
            color: #111;
            font-size: clamp(13px, 0.92vw, 18px);
            font-weight: 500;
            letter-spacing: 0.09em;
            line-height: 1.25;
            text-transform: uppercase;
            white-space: normal;
            text-wrap: balance;
        }

        .material-lead {
            position: absolute;
            z-index: 2;
            left: auto;
            right: 28%;
            bottom: 5%;
            max-width: 310px;
            margin: 0;
            color: #111;
            font-size: clamp(12px, 0.85vw, 16px);
            font-weight: 500;
            letter-spacing: 0.03em;
            line-height: 1.42;
            text-transform: none;
        }

        .material-collage-wrap {
            position: relative;
            min-height: 0;
            overflow: hidden;
        }

        .material-collage-wrap::after {
            content: none;
        }

        .material-collage {
            position: relative;
            z-index: 1;
            width: 100%;
            min-height: 0;
            margin: 0 auto;
        }

        .material-full-image {
            width: 100%;
            margin: 0;
            overflow: hidden;
        }

        .material-full-image img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
        }

        .material-tags {
            position: absolute;
            z-index: 2;
            top: 25%;
            right: 1%;
            display: grid;
            gap: 9px;
            width: min(240px, 13.5vw);
            color: #111;
            font-size: clamp(13px, 0.92vw, 18px);
            font-weight: 500;
            letter-spacing: 0.09em;
            line-height: 1.25;
            text-align: right;
            text-transform: uppercase;
        }

        .mat-img {
            position: absolute;
            overflow: hidden;
            background: #eee;
            transition: box-shadow 0.45s ease, filter 0.45s ease;
        }

        .mat-img img {
            transition: transform 0.7s ease;
        }

        .mat-img:hover {
            filter: saturate(1.04);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);
        }

        .mat-img:hover img {
            transform: scale(1.045);
        }

        .mat-left {
            left: -70px;
            top: 150px;
            width: 270px;
            height: 500px;
        }

        .mat-small {
            left: 140px;
            top: 174px;
            width: 190px;
            height: 360px;
            box-shadow: 0 24px 54px rgba(0, 0, 0, 0.12);
        }

        .mat-main {
            left: 36%;
            top: 0;
            width: min(650px, 46vw);
            height: 690px;
            transform: translateX(-10%);
            box-shadow: 0 28px 70px rgba(0, 0, 0, 0.12);
        }

        .mat-right {
            right: -56px;
            top: 286px;
            width: 360px;
            height: 330px;
        }

        .mat-label {
            position: absolute;
            z-index: 2;
            color: #111;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.09em;
            line-height: 1.22;
            text-transform: uppercase;
        }

        .mat-label.left {
            left: 120px;
            top: 100px;
            text-align: right;
            width: 250px;
            font-size: 16px;
        }

        .mat-label.right {
            right: -56px;
            top: 214px;
            width: 300px;
            text-align: right;
            font-size: 16px;
        }

        .mat-label.main {
            right: 23%;
            bottom: 68px;
            text-align: right;
            font-size: 16px;
            line-height: 1.32;
        }

        .support {
            padding: 72px var(--side) 72px;
            background: #fff;
        }

        .support-inner {
            width: min(var(--page-max), 100%);
            margin: 0 auto;
        }

        .support-head {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: clamp(56px, 7vw, 96px);
            align-items: end;
            margin-bottom: 58px;
        }

        .support-head h2 {
            max-width: 760px;
            font-size: clamp(36px, 3.2vw, 54px);
            letter-spacing: 0.08em;
            line-height: 1.12;
        }

        .support-head h2 span {
            display: block;
            white-space: normal;
        }

        .support-head p {
            max-width: 590px;
            color: var(--soft-text);
            font-size: clamp(15px, 1.08vw, 17px);
            font-weight: 400;
            letter-spacing: 0.11em;
            line-height: 1.48;
        }

        .support-list {
            display: grid;
            gap: 58px;
        }

        .support-row {
            display: grid;
            grid-template-columns: 1.07fr 0.93fr;
            gap: clamp(56px, 7vw, 104px);
            align-items: center;
            scroll-margin-top: 118px;
        }

        .support-row.flip {
            grid-template-columns: 0.93fr 1.07fr;
        }

        .support-row.flip .support-visual {
            order: 2;
        }

        .support-row.flip .support-copy {
            order: 1;
            padding-left: 54px;
        }

        .support-visual {
            height: clamp(270px, 27vw, 440px);
            overflow: hidden;
            background: #eee;
        }

        .support-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.72s ease, filter 0.45s ease;
        }

        .support-visual:hover img {
            transform: scale(1.055);
            filter: saturate(1.05);
        }

        .support-copy {
            min-height: 270px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .support-number {
            margin-bottom: 48px;
            color: #000;
            font-size: clamp(46px, 4.3vw, 72px);
            font-weight: 900;
            line-height: 1;
        }

        .support-copy h3 {
            font-size: clamp(30px, 2.55vw, 46px);
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 1.05;
            text-transform: uppercase;
        }

        .support-copy p {
            max-width: 560px;
            margin-top: 22px;
            color: #747474;
            font-size: clamp(15px, 1.05vw, 18px);
            font-weight: 400;
            letter-spacing: 0.02em;
            line-height: 1.58;
        }

        .custom-why {
            padding: clamp(56px, 5vw, 86px) 0 0;
            background: transparent;
        }

        .custom-why-panel {
            width: 100%;
            min-height: clamp(500px, 40vw, 700px);
            margin: 0;
            display: grid;
            align-items: center;
            overflow: hidden;
            color: #fff;
            background:
                linear-gradient(90deg, rgba(12, 9, 5, 0.86) 0%, rgba(12, 9, 5, 0.68) 42%, rgba(12, 9, 5, 0.38) 100%),
                url("/skin/static/image/oem-why.jpg") center/cover;
        }

        .custom-why-content {
            width: min(var(--page-max), calc(100% - var(--side) * 2));
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1fr);
            gap: clamp(48px, 7vw, 118px);
            align-items: center;
            padding: clamp(54px, 5.4vw, 92px) 0;
        }

        .custom-why h2 {
            max-width: 560px;
            font-size: clamp(34px, 3.85vw, 64px);
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 1.08;
            text-transform: uppercase;
        }

        .custom-why h2::after {
            content: "";
            display: block;
            width: 96px;
            height: 2px;
            margin-top: 34px;
            background: var(--gold);
        }

        .custom-why-list {
            display: grid;
            gap: 18px;
            margin-top: 0;
            padding: 0;
            list-style: none;
            color: rgba(255, 255, 255, 0.86);
            font-size: clamp(14px, 0.96vw, 17px);
            line-height: 1.52;
        }

        .custom-why-list li {
            position: relative;
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 18px;
            align-items: start;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        }

        .custom-why-list li::before {
            content: counter(why-item, decimal-leading-zero);
            counter-increment: why-item;
            position: static;
            color: var(--gold);
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 0.14em;
            line-height: 1.65;
        }

        .custom-why-list {
            counter-reset: why-item;
        }

        .support-copy .line {
            display: block;
            align-self: flex-end;
            width: min(360px, 66%);
            height: 5px;
            margin-top: 42px;
            background: #000;
            transform: scaleX(0.5);
            transform-origin: left center;
            transition: transform 0.75s ease;
        }

        .support-row.is-visible .support-copy .line {
            transform: scaleX(1);
        }

        @media (prefers-reduced-motion: reduce) {.oe-hero h1,
            .oe-hero .rule,
            .oe-hero p,
            .fx-reveal {
                opacity: 1;
                animation: none;
                transform: none;
                transition: none;
            }

            .oem-media img,
            .mat-img img,
            .support-visual img,
            .support-copy .line {
                transition: none;
                transform: none;
            }
}

        .index-footer-main {
            width: 100%;
            font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans", Arial, Helvetica, sans-serif;
            background-color: #1a1a1a;
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/skin/static/image/footer-main-bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .rongdu-index-section {
            width: 100%;
            background: transparent;
            overflow: hidden;
        }

        .rongdu-index-section + .index-footer-main {
            margin-top: 0 !important;
        }

        .rongdu-index-section .round-photo {
            height: auto;
        }

        .footer-banner {
            margin: 0 auto;
            max-width: 1400px;
            width: 100%;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 50px;
            color: #fff;
        }

        .footer-banners {
            margin: 0 auto;
            max-width: 1400px;
            width: 100%;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 50px;
            color: #fff;
        }

        .banner-title {
            font-size: 2.5rem;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 30px;
            width: 100%;
        }

        .banner-button-wrap {
            width: 100%;
            text-align: right;
        }

        .banner-link {
            padding: 12px 25px;
            border: 1px solid #d4b06a;
            background: transparent;
            color: #fff;
            font-size: 1rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .banner-link:hover {
            background-color: #d4b06a;
            color: #1a1a1a;
            text-decoration: none;
        }

        .index-footer {
            max-width: 1400px;
            margin: 0 auto;
            color: #fff;
            padding: 40px 50px;
        }

        .index-footer-bg {
            width: 100%;
            font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans", Arial, Helvetica, sans-serif;
            background-color: #1a1a1a;
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/skin/static/image/footer-bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .inquiry-title {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            margin-bottom: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .inquiry-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .footer-form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer-form-group label {
            font-size: 0.9rem;
            text-transform: uppercase;
            opacity: 0.9;
        }

        .footer-form-group input,
        .footer-form-group select,
        .footer-form-group textarea {
            font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans", Arial, Helvetica, sans-serif;
            padding: 12px 15px;
            border: none;
            border-radius: 0;
            font-size: 1rem;
            width: 100%;
            background: #fff;
            color: #333;
        }

        .footer-form-group.message {
            grid-column: 1 / 3;
        }

        .footer-form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .submit-btn {
            grid-column: 2 / 3;
            text-align: right;
        }

        .submit-btn button {
            font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans", Arial, Helvetica, sans-serif;
            background: #C9B176;
            color: #fff;
            border: none;
            padding: 12px 40px;
            font-size: 1rem;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .submit-btn button:hover {
            background:#9b895c;
        }

        .social-icons {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            align-items: center;
        }

        .social-icons a {
            color: #fff;
            font-size: 1.5rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .social-icons a:hover {
            color: #ff8c00;
        }

        .banner-link,
        .submit-btn button {
            position: relative;
            overflow: hidden;
            transition: transform 0.35s ease, background 0.35s ease, background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
        }

        .banner-link::before,
        .submit-btn button::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.28) 48%, transparent 100%);
            transform: translateX(-120%);
            transition: transform 0.65s ease;
            pointer-events: none;
        }

        .banner-link:hover {
            box-shadow: 0 12px 26px rgba(212, 176, 106, 0.24);
            transform: translateY(-3px);
        }

        .banner-link:hover::before,
        .submit-btn button:hover::before {
            transform: translateX(120%);
        }

        .footer-form-group input,
        .footer-form-group select,
        .footer-form-group textarea {
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .footer-form-group input:focus,
        .footer-form-group select:focus,
        .footer-form-group textarea:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(212, 176, 106, 0.72), 0 10px 22px rgba(0,0,0,0.16);
            transform: translateY(-1px);
        }

        .submit-btn button:hover {
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
            transform: translateY(-3px);
        }

        .social-icons a {
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        .footer-fx {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity 0.78s ease, transform 0.78s ease;
        }

        .footer-fx.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {.footer-fx {
                opacity: 1;
                transform: none;
                transition: none;
            }
}

        .copyright {
            font-size: 0.8rem;
            opacity: 0.8;
            text-align: left;
        }

        @media (max-width: 1100px) {body {
                padding-top: 0;
            }

            .oe-hero {
                min-height: 360px;
            }

            .oem-layout,
            .support-head,
            .support-row,
            .support-row.flip {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                gap: 42px;
            }

            .oem-copy {
                min-height: auto;
                padding-bottom: 0;
                padding-top: 0;
                grid-column: auto;
                grid-row: auto;
                order: 1;
            }

            .oem-dots {
                grid-column: auto;
                grid-row: auto;
                order: 2;
                margin-top: -18px;
            }

            .oem-copy h2,
            .material h2,
            .support-head h2 span {
                white-space: normal;
            }

            .oem-media {
                grid-column: auto;
                grid-row: auto;
                order: 3;
                width: 100%;
                margin-bottom: 0;
                min-height: auto;
                aspect-ratio: 800 / 426;
                overflow: hidden;
            }

            .oem-arrows {
                grid-column: auto;
                grid-row: auto;
                order: 4;
                justify-self: end;
                margin-top: -76px;
                margin-right: 16px;
                position: relative;
                z-index: 3;
            }

            .material-collage-wrap {
                min-height: auto;
                padding-bottom: 0;
            }

            .material-collage {
                min-height: 0;
                display: block;
            }

            .mat-img,
            .mat-label {
                position: static;
                transform: none;
            }

            .mat-img {
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 5;
            }

            .mat-main {
                grid-column: 1 / -1;
                aspect-ratio: 1.35 / 1;
                order: 4;
            }

            .mat-left {
                order: 3;
            }

            .mat-small {
                order: 2;
            }

            .mat-right {
                order: 6;
            }

            .mat-label {
                width: auto !important;
                text-align: left !important;
                font-size: 15px;
            }

            .mat-label.left {
                order: 1;
            }

            .mat-label.right {
                order: 5;
            }

            .mat-label.main {
                grid-column: 1 / -1;
                text-align: right !important;
                font-size: 20px;
                order: 7;
            }

            .custom-why-panel {
                min-height: 500px;
                background:
                    linear-gradient(rgba(15, 12, 8, 0.72), rgba(15, 12, 8, 0.72)),
                    url("/skin/static/image/oem-why.jpg") center/cover;
            }

            .custom-why-content {
                width: 100%;
                grid-template-columns: 1fr;
                gap: 38px;
            }

            .support-row.flip .support-visual,
            .support-row.flip .support-copy {
                order: initial;
                padding-left: 0;
            }

            .support-copy {
                min-height: 0;
            }

            .support-number {
                margin-bottom: 32px;
            }
}

        @media (max-width: 640px) {:root {
                --side: 18px;
            }

            .oe-hero {
                min-height: 330px;
                padding-top: 62px;
                padding-bottom: 70px;
            }

            .oe-hero h1,
            .oem-copy h2,
            .material h2,
            .support-head h2 {
                letter-spacing: 0.08em;
            }

            .oe-hero .rule {
                margin: 44px auto 30px;
            }

            .oem-showcase {
                padding: 54px 0 52px;
            }

            .oem-pager {
                margin: 28px 0 36px;
            }

            .oem-copy h3 {
                font-size: 30px;
            }

            .oem-copy p {
                font-size: 16px;
            }

            .gold-swatch {
                margin-left: 0;
            }

            .oem-dots {
                gap: 34px;
                margin-top: -12px;
            }

            .oem-arrow {
                width: 34px;
                height: 34px;
            }

            .oem-media {
                min-height: auto;
                aspect-ratio: 800 / 426;
            }

            .oem-arrows {
                margin-top: -66px;
                margin-right: 12px;
            }

            .material {
                padding-top: 0;
            }

            .material h2 {
                left: 7%;
                top: 5%;
                max-width: 34%;
                font-size: clamp(15px, 4.2vw, 20px);
                line-height: 1.1;
            }

            .material-lead {
                left: auto;
                right: 27%;
                bottom: 5%;
                max-width: 31%;
                margin-bottom: 0;
                font-size: clamp(9px, 2.45vw, 12px);
                line-height: 1.3;
            }

            .material-tags {
                top: 5%;
                right: 5%;
                width: 34%;
                gap: 4px;
                font-size: clamp(9px, 2.4vw, 12px);
            }

            .material-collage {
                grid-template-columns: 1fr;
            }

            .mat-main {
                grid-column: auto;
            }

            .support {
                padding: 58px var(--side) 78px;
            }

            .custom-why {
                padding: 42px 0 0;
                background: transparent;
            }

            .custom-why-panel {
                min-height: auto;
            }

            .custom-why-content {
                width: calc(100% - var(--side) * 2);
                padding: 46px 0;
            }

            .custom-why h2 {
                font-size: clamp(28px, 8.6vw, 40px);
            }

            .custom-why-list li {
                grid-template-columns: 42px 1fr;
                gap: 12px;
                padding: 16px 0;
            }

            .support-head {
                margin-bottom: 48px;
            }

            .support-list {
                gap: 56px;
            }

            .support-visual {
                height: 230px;
            }

            .support-copy p {
                letter-spacing: 0.09em;
            }

            .inquiry-form {
                grid-template-columns: 1fr;
            }

            .footer-form-group.message,
            .submit-btn {
                grid-column: 1 / 2;
            }

            .submit-btn,
            .inquiry-title,
            .copyright {
                text-align: center;
            }
}

.oem-delay-002 { --fx-delay: 0.02s; }
.oem-delay-006 { --fx-delay: 0.06s; }
.oem-delay-008 { --fx-delay: 0.08s; }
.oem-delay-010 { --fx-delay: 0.1s; }
.oem-delay-014 { --fx-delay: 0.14s; }
.oem-delay-018 { --fx-delay: 0.18s; }
.oem-delay-022 { --fx-delay: 0.22s; }
.oem-delay-026 { --fx-delay: 0.26s; }
#products-collections { scroll-margin-top: 118px; }