浅念
631 lines
19 KiB
CSS
631 lines
19 KiB
CSS
/* ============================================================
|
||
business-pages.css — page-specific styles for the 5 business
|
||
sub-pages (loaded AFTER business.css, which owns all shared
|
||
components: hero, intro, caps, view-more, reveal, typography).
|
||
Page hooks on <body>:
|
||
.is-ae auto-export .is-bm building-materials
|
||
.is-as after-sales .is-gl global-logistics
|
||
.is-dh development-history
|
||
============================================================ */
|
||
|
||
.bp-cap__ico { width: 52px; height: 52px; object-fit: contain; display: block; }
|
||
.bp-cap__label { font-size: 0.82rem; letter-spacing: 0.01em; line-height: 1.35; }
|
||
|
||
/* ---------- per-page hero overrides ---------- */
|
||
.is-ae .bp-hero__bg { object-position: center 36%; }
|
||
/* .is-ae .bp-hero .btn-explore { background: #000; color: #fff; } */
|
||
/* .is-ae .bp-hero .btn-explore:hover { background: #ffe6c8; color: #0b141d; border-color: #ffe6c8; } */
|
||
|
||
.is-as .bp-hero__sub {
|
||
font-family: var(--font-display);
|
||
font-weight: 600;
|
||
font-size: clamp(1.2rem, 2.6vw, 2rem);
|
||
letter-spacing: 0.06em;
|
||
color: #ffffff;
|
||
text-shadow: 0 2px 18px rgba(0,0,0,.6);
|
||
}
|
||
|
||
.is-bm .bp-hero__bg { object-position: center right; }
|
||
|
||
|
||
.is-gl .bp-cap__label { line-height: 0.35; }
|
||
|
||
|
||
/* ############################################################
|
||
AUTO EXPORT
|
||
############################################################ */
|
||
|
||
/* 3. VEHICLE SHOWCASE — centered title + wide image
|
||
============================================================ */
|
||
.ae-showcase { padding: 30px 0 60px; }
|
||
.ae-showcase__head { margin-bottom: 56px; }
|
||
|
||
.ae-showcase__img { width: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ============================================================
|
||
4. BRANDS — 4-column logo wall
|
||
============================================================ */
|
||
.ae-brands { padding: 40px 0 120px; }
|
||
.ae-brands__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.ae-brand { display: flex; flex-direction: column; align-items: center; }
|
||
.ae-brand__card {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
|
||
}
|
||
.ae-brand:hover .ae-brand__card {
|
||
transform: translateY(-6px);
|
||
}
|
||
.ae-brand__logo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
.ae-brand__name {
|
||
margin-top: 22px;
|
||
font-family: var(--font-display);
|
||
font-weight: 600;
|
||
font-size: clamp(1.2rem, 4vw, 2rem);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #2a3340;
|
||
}
|
||
|
||
/* ============================================================
|
||
5. AUTHORIZED VEHICLE MODELS — text + tag pills
|
||
============================================================ */
|
||
.ae-models {
|
||
padding: 0px 0 110px;
|
||
}
|
||
/* .ae-models__inner { max-width: 920px; } */
|
||
.ae-models__body {margin-top: 8px; }
|
||
|
||
/* ============================================================
|
||
6 + 7. REGIONAL SUPPORT → WORLD MAP
|
||
============================================================ */
|
||
.ae-region { padding: 120px 0 60px; }
|
||
.ae-region__head { text-align: center; margin-bottom: 72px; }
|
||
|
||
.ae-map {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 1080px;
|
||
margin: 0 auto;
|
||
aspect-ratio: 1135 / 647;
|
||
}
|
||
.ae-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
|
||
|
||
/* SVG markers overlay — cycles one active marker at a time (main.js) */
|
||
.ae-map__overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: visible;
|
||
pointer-events: none;
|
||
}
|
||
/* markers — entrance pops in with a staggered double ripple; exit reverses into
|
||
the base states (dot shrinks, label slides away, ripples decay). Children own
|
||
their hidden base states; the group itself never toggles opacity. */
|
||
.ae-map .marker .label {
|
||
fill: #000;
|
||
font-weight: 700;
|
||
paint-order: stroke;
|
||
stroke: rgba(255, 255, 255, .08);
|
||
stroke-width: 1px;
|
||
opacity: 0;
|
||
transform: translateY(5px);
|
||
transition: opacity .3s ease, transform .3s ease;
|
||
}
|
||
.ae-map .marker .dot {
|
||
transform-box: fill-box;
|
||
transform-origin: center;
|
||
opacity: 0;
|
||
transform: scale(.55);
|
||
transition: opacity .28s ease, transform .28s ease;
|
||
}
|
||
.ae-map .marker .pulse {
|
||
fill: none;
|
||
stroke-width: 2;
|
||
vector-effect: non-scaling-stroke;
|
||
opacity: 0;
|
||
transform-box: fill-box;
|
||
transform-origin: center;
|
||
transition: opacity .4s ease;
|
||
}
|
||
.ae-map .marker.orange .dot { fill: #ff8738; }
|
||
.ae-map .marker.orange .pulse { stroke: #ff8738; }
|
||
.ae-map .marker.yellow .dot { fill: #ffd21c; }
|
||
.ae-map .marker.yellow .pulse { stroke: #ffd21c; }
|
||
/* exit choreography — .out is added by main.js on deactivate */
|
||
.ae-map .marker.out .dot { animation: ae-dotOut .28s ease both; }
|
||
.ae-map .marker.out .label { animation: ae-labelOut .3s ease both; }
|
||
.ae-map .marker.out .pulse { animation: ae-haloOut .45s ease-out both; }
|
||
|
||
.ae-map .marker.active .dot {
|
||
animation: ae-dotIn .3s cubic-bezier(.2,1.5,.35,1) both,
|
||
ae-breatheS 3.2s .8s ease-in-out infinite;
|
||
}
|
||
.ae-map .marker.yellow.active .dot { animation-name: ae-dotIn, ae-breatheL; }
|
||
.ae-map .marker.active .label { animation: ae-textIn .28s .06s ease both; }
|
||
.ae-map .marker.active .pulse { animation: ae-mapPulse .9s .15s ease-out infinite; }
|
||
.ae-map .marker.active .pulse.p2 { animation-delay: .6s; }
|
||
|
||
@keyframes ae-dotIn {
|
||
from { opacity: 0; transform: scale(.2); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
@keyframes ae-textIn {
|
||
from { opacity: 0; transform: translateY(5px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes ae-mapPulse {
|
||
0% { opacity: .65; transform: scale(.45); }
|
||
75% { opacity: 0; transform: scale(2.25); }
|
||
100% { opacity: 0; transform: scale(2.25); }
|
||
}
|
||
@keyframes ae-breatheS {
|
||
0%, 100% { r: 5.5px; }
|
||
50% { r: 6.3px; }
|
||
}
|
||
@keyframes ae-breatheL {
|
||
0%, 100% { r: 6px; }
|
||
50% { r: 6.9px; }
|
||
}
|
||
@keyframes ae-dotOut {
|
||
from { opacity: 1; transform: scale(1); }
|
||
to { opacity: 0; transform: scale(.55); }
|
||
}
|
||
@keyframes ae-labelOut {
|
||
from { opacity: 1; transform: translateY(0); }
|
||
to { opacity: 0; transform: translateY(5px); }
|
||
}
|
||
@keyframes ae-haloOut {
|
||
from { opacity: .5; }
|
||
to { opacity: 0; }
|
||
}
|
||
|
||
@keyframes ae-pulse {
|
||
0%,100% { box-shadow: 0 0 0 5px rgba(255,138,30,.2), 0 0 16px rgba(255,138,30,.7); }
|
||
50% { box-shadow: 0 0 0 11px rgba(255,138,30,.05), 0 0 24px rgba(255,138,30,.95); }
|
||
}
|
||
/* ---------- page-specific responsive ---------- */
|
||
@media (max-width: 1024px) {
|
||
.ae-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.ae-showcase { padding: 10px 0 90px; }
|
||
.ae-brands { padding: 30px 0 90px; }
|
||
.ae-models { padding: 90px 0; }
|
||
.ae-region { padding: 90px 0 40px; }
|
||
.ae-region__head { margin-bottom: 48px; }
|
||
/* on narrow screens the floating labels crowd the map — show a legend instead */
|
||
}
|
||
@media (max-width: 480px) {
|
||
.ae-brands__grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ############################################################
|
||
AFTER-SALES
|
||
############################################################ */
|
||
|
||
/* ============================================================
|
||
3. SERVICE CONTENTS — centered title + 6 circular services (3 × 2)
|
||
============================================================ */
|
||
.as-services {
|
||
padding: 100px 0 120px;
|
||
}
|
||
.as-services__head { text-align: center; margin-bottom: 76px; }
|
||
.as-services__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 64px 44px;
|
||
justify-items: center;
|
||
}
|
||
.as-svc {
|
||
display: flex; flex-direction: column; align-items: center; gap: 24px;
|
||
width: 100%;
|
||
max-width: 260px;
|
||
}
|
||
.as-svc__ring img { width: 100%; height: auto; display: block; transition: transform .45s var(--ease); }
|
||
/* decorative dashed orbit ring */
|
||
.as-svc:hover .as-svc__ring img { transform: scale(1.08); }
|
||
.as-svc__name {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
letter-spacing: 0.01em;
|
||
text-align: center;
|
||
color: var(--text-dark);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* ============================================================
|
||
4. REGIONAL SUPPORT — centered title + 3 location cards
|
||
============================================================ */
|
||
.as-region { padding: 120px 0 120px; }
|
||
.as-region__head { text-align: center; margin-bottom: 72px; }
|
||
.as-region__head .bp-body { margin-top: 8px; margin-inline: auto; max-width: 1000px; }
|
||
|
||
.as-region__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 30px;
|
||
}
|
||
.as-loc {
|
||
display: flex; flex-direction: column;
|
||
overflow: hidden;
|
||
transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
|
||
}
|
||
.as-loc__media { aspect-ratio: 16 / 10; overflow: hidden; }
|
||
.as-loc__media img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
transition: transform .6s var(--ease);
|
||
}
|
||
.as-loc:hover .as-loc__media img { transform: scale(1.06); }
|
||
/* location card title — city on line 1, country on line 2, identical type */
|
||
.as-loc__title {
|
||
padding: 22px 20px 26px;
|
||
text-align: center;
|
||
font-family: var(--font-display);
|
||
font-weight: 400;
|
||
font-size: 1.2rem;
|
||
line-height: 1.45;
|
||
letter-spacing: 0.02em;
|
||
color: #404040;
|
||
}
|
||
|
||
/* ---------- page-specific responsive ---------- */
|
||
@media (max-width: 1024px) {
|
||
.as-region__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.as-services { padding: 80px 0 90px; }
|
||
.as-services__head { margin-bottom: 52px; }
|
||
.as-region { padding: 90px 0 100px; }
|
||
.as-region__head { margin-bottom: 48px; }
|
||
.as-services__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.as-services__grid { grid-template-columns: 1fr; margin-inline: auto; }
|
||
}
|
||
|
||
/* ---------- reduced motion ---------- */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.as-loc__media img { animation: none !important; }
|
||
}
|
||
|
||
/* ############################################################
|
||
BUILDING MATERIALS
|
||
############################################################ */
|
||
|
||
/* ============================================================
|
||
5. LARGE INVENTORY IMAGE — stacked corrugated pipe stock
|
||
============================================================ */
|
||
.bm-stock { padding: 10px 0 0; }
|
||
.bm-stock__frame {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
}
|
||
.bm-stock__img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* ============================================================
|
||
6 + 7. PRODUCT CATEGORIES — centered title + 5-col cards
|
||
============================================================ */
|
||
.bm-products { padding: 120px 0 40px; }
|
||
.bm-products__head { text-align: center; margin-bottom: 64px; }
|
||
|
||
.bm-products__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 24px;
|
||
}
|
||
.bm-card { display: flex; flex-direction: column; }
|
||
|
||
.bm-card__img img {
|
||
width: 100%; height: 100%; object-fit: contain; display: block;
|
||
transition: transform .5s var(--ease);
|
||
}
|
||
.bm-card:hover .bm-card__img img { transform: scale(1.06); }
|
||
.bm-card__name {
|
||
margin-top: 20px;
|
||
text-align: center;
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
letter-spacing: 0.02em;
|
||
color: var(--text-mid);
|
||
transition: color .25s;
|
||
}
|
||
.bm-card:hover .bm-card__name { color: var(--orange-700); }
|
||
|
||
/* ---------- page-specific responsive ---------- */
|
||
@media (max-width: 1024px) {
|
||
.bm-products__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.bm-products { padding: 90px 0 30px; }
|
||
.bm-products__head { margin-bottom: 44px; }
|
||
.bm-stock__frame { padding: 0 18px; }
|
||
.bm-products__grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.bm-products__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
}
|
||
|
||
/* ############################################################
|
||
GLOBAL LOGISTICS
|
||
############################################################ */
|
||
|
||
/* ============================================================
|
||
PORT IMAGE — full-width port / cargo-ship photo
|
||
============================================================ */
|
||
.gl-port { padding: 10px 0 0; }
|
||
.gl-port__frame {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: var(--container);
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
}
|
||
.gl-port__img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
box-shadow: 0 30px 70px rgba(16,24,40,0.18);
|
||
}
|
||
|
||
/* ============================================================
|
||
SERVICE CONTENTS — centered title + 2×3 round cards
|
||
============================================================ */
|
||
.gl-services { padding: 120px 0 40px; }
|
||
.gl-services__head { text-align: center; margin-bottom: 64px; }
|
||
|
||
.gl-services__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 48px 40px;
|
||
}
|
||
.gl-svc { display: flex; flex-direction: column; align-items: center; }
|
||
/* service icon = self-contained round artwork (image/global-logistics/Service*.png),
|
||
shown bare like after-sales — no extra CSS circle around it */
|
||
.gl-svc__ico {
|
||
width: clamp(140px, 13vw, 190px);
|
||
transition: transform .4s var(--ease);
|
||
}
|
||
.gl-svc__ico img { width: 100%; height: auto; display: block; }
|
||
.gl-svc:hover .gl-svc__ico { transform: translateY(-6px); }
|
||
.gl-svc__name {
|
||
margin-top: 22px;
|
||
text-align: center;
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
letter-spacing: 0.02em;
|
||
color: var(--text-dark);
|
||
transition: color .25s;
|
||
}
|
||
.gl-svc:hover .gl-svc__name { color: var(--orange-700); }
|
||
|
||
/* ---------- page-specific responsive ---------- */
|
||
@media (max-width: 760px) {
|
||
.gl-services { padding: 90px 0 30px; }
|
||
.gl-services__head { margin-bottom: 44px; }
|
||
.gl-port__frame { padding: 0 18px; }
|
||
.gl-services__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
|
||
.gl-svc__ico { width: 140px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.gl-services__grid { grid-template-columns: 1fr; gap: 36px; }
|
||
}
|
||
|
||
/* ############################################################
|
||
DEVELOPMENT HISTORY
|
||
############################################################ */
|
||
|
||
/* ============================================================
|
||
1. HERO — staggered oversized orange wordmark
|
||
============================================================ */
|
||
.dh-hero .bp-hero__veil {
|
||
background:
|
||
linear-gradient(180deg, rgba(6,12,22,.40) 0%, rgba(6,12,22,.10) 38%, rgba(6,12,22,.52) 100%),
|
||
radial-gradient(72% 60% at 50% 50%, rgba(6,12,22,.28), transparent 70%);
|
||
}
|
||
/* override the shared hero's vertical centering: anchor the copy
|
||
from the TOP with an explicit offset (tweak margin-top to move it) */
|
||
.dh-hero { align-items: stretch; }
|
||
.dh-hero .bp-hero__copy { align-items: stretch; } /* spacing now comes from business.css split layout */
|
||
.dh-hero__title {
|
||
-webkit-text-fill-color: var(--orange-500);
|
||
color: var(--orange-500);
|
||
background: none;
|
||
width: 100%;
|
||
letter-spacing: 0.01em;
|
||
line-height: 0.95;
|
||
text-shadow: 0 8px 44px rgba(0,0,0,.5);
|
||
}
|
||
.dh-hero__title .dh-plus { color: var(--orange-300); }
|
||
|
||
.dh-line { display: block; }
|
||
.dh-line--lg {
|
||
font-size: clamp(2.75rem, 11vw, 9rem);
|
||
text-align: left;
|
||
margin-bottom: 2rem; /* let the two lines interlock slightly */
|
||
}
|
||
.dh-line--sm {
|
||
font-size: clamp(1.8rem, 7vw, 6rem);
|
||
text-align: right;
|
||
margin-top: -0.06em; /* let the two lines interlock slightly */
|
||
}
|
||
|
||
/* ============================================================
|
||
2. DEVELOPMENT HISTORY — title + folded two-row timeline
|
||
Each row = blocks separated by a date node. A node is
|
||
CALENDAR ICON → vertical line → DOT (top to bottom).
|
||
Row 1 and row 2 are joined by one such dividing node.
|
||
============================================================ */
|
||
.dh-timeline-section { padding: 110px 0 130px; }
|
||
|
||
.dh-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 32px;
|
||
margin-bottom: 96px;
|
||
}
|
||
.dh-head__title {
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: clamp(2.4rem, 5vw, 4rem);
|
||
line-height: 1.02;
|
||
letter-spacing: -0.01em;
|
||
color: var(--orange-700);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---------- folded route ---------- */
|
||
.dh-route { position: relative; }
|
||
|
||
.dh-rail {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
.dh-rail--2 { max-width: 760px; margin-left: auto; margin-right: auto; }
|
||
|
||
.dh-stage {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
display: flex;
|
||
}
|
||
.dh-stage__card {
|
||
width: 100%;
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
.dh-stage__img {
|
||
flex-shrink: 0;
|
||
/* width: 116px; */
|
||
aspect-ratio: 1 / 1;
|
||
object-fit: cover;
|
||
display: block;
|
||
overflow: hidden;
|
||
box-shadow: 0 14px 30px rgba(16,24,40,.14);
|
||
}
|
||
.dh-stage__body { padding-top: 2px; }
|
||
.dh-stage__year {
|
||
font-family: var(--font-display);
|
||
font-weight: 800;
|
||
font-size: 1.2rem;
|
||
letter-spacing: 0.01em;
|
||
color: var(--text-dark);
|
||
margin: 0 0 8px;
|
||
}
|
||
.dh-stage__text {
|
||
font-family: var(--font-body);
|
||
font-size: 0.86rem;
|
||
line-height: 1.65;
|
||
color: var(--text-mid);
|
||
margin: 0;
|
||
}
|
||
|
||
.dh-node {
|
||
flex: 0 0 auto;
|
||
width: 56px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: -60px;
|
||
margin-bottom: -60px;
|
||
}
|
||
/* mirror the two rows around the timeline axis:
|
||
row 1 (above the axis) reads bottom→top so the CALENDAR hugs the axis below it;
|
||
row 2 (below the axis) reads top→bottom so the CALENDAR hugs the axis above it */
|
||
.dh-rail--1 .dh-node { flex-direction: column-reverse; }
|
||
.dh-node__cal {
|
||
flex: 0 0 auto;
|
||
width: 34px; height: 34px;
|
||
border-radius: 50%;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
}
|
||
.dh-node__cal svg { width: 17px; height: 17px; }
|
||
.dh-node__line {
|
||
flex: 1 1 auto;
|
||
width: 1px;
|
||
margin: 10px 0;
|
||
background: #000;
|
||
}
|
||
.dh-node__dot {
|
||
flex: 0 0 auto;
|
||
width: 12px; height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--text-dark);
|
||
}
|
||
|
||
.dh-fold {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 64px;
|
||
margin: 40px 0;
|
||
}
|
||
.dh-fold__line {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: #000;
|
||
}
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
@media (max-width: 1024px) {
|
||
.dh-timeline-section { padding: 90px 0 100px; }
|
||
.dh-head { margin-bottom: 64px; }
|
||
.dh-stage__img { width: 96px; }
|
||
.dh-node { width: 44px; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
/* stack blocks; each node becomes a centered horizontal divider */
|
||
.dh-rail { flex-direction: column; }
|
||
.dh-rail--2 { max-width: none; }
|
||
.dh-stage { flex: none; }
|
||
.dh-node,
|
||
.dh-rail--1 .dh-node {
|
||
width: 100%;
|
||
height: 52px;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.dh-node__cal { position: relative; z-index: 1; }
|
||
.dh-node__line {
|
||
position: absolute;
|
||
top: 50%; left: 0; right: 0;
|
||
width: auto; height: 2px;
|
||
margin: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
.dh-node__dot { display: none; }
|
||
.dh-fold { height: 56px; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.dh-stage__card { flex-direction: column; gap: 12px; }
|
||
.dh-stage__img { width: 100%; }
|
||
}
|