.onhym-ht-root { --onhym-ht-green:    #186a43;
--onhym-ht-green-2:  #1f8a55;
--onhym-ht-green-dk: #0f4a30;
--onhym-ht-gold:     #d4a14a;
--onhym-ht-ink:      #0f1a2a;
--onhym-ht-ink-2:    #4a5564;
--onhym-ht-line:     rgba(15, 30, 50, 0.10);
--onhym-ht-radius:   20px;
--onhym-ht-max:      1200px;
--onhym-ht-font:     system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif; display: block !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
clear: both !important;
float: none !important;
contain: layout style;
isolation: isolate;
background: #ffffff !important;
padding: 0 0 16px !important;
margin: 0 !important; font-family: var(--onhym-ht-font) !important;
font-size: 16px !important;
line-height: 1.55 !important;
font-weight: 400 !important;
color: var(--onhym-ht-ink) !important;
text-align: left !important;
-webkit-font-smoothing: antialiased;
box-sizing: border-box !important;
} .onhym-ht-root *,
.onhym-ht-root *::before,
.onhym-ht-root *::after {
box-sizing: border-box;
} .onhym-ht-root button,
.onhym-ht-root button:hover,
.onhym-ht-root button:focus,
.onhym-ht-root button:active {
all: unset;
box-sizing: border-box;
cursor: pointer;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
-webkit-font-smoothing: antialiased;
}
.onhym-ht-root a {
all: unset;
box-sizing: border-box;
cursor: pointer;
text-decoration: none;
-webkit-font-smoothing: antialiased;
} .onhym-ht-data { display: none !important; } .onhym-ht-hero-wrap {
display: block;
width: 100%;
padding: 16px 20px 0;
}
.onhym-ht-hero {
position: relative;
width: 100%;
max-width: var(--onhym-ht-max);
margin: 0 auto;
border-radius: var(--onhym-ht-radius);
overflow: hidden;
background: linear-gradient(135deg, #134d2f 0%, #1a6a3f 60%, #1c8650 100%);
color: #fff;
isolation: isolate;
}
.onhym-ht-hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.onhym-ht-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
}
.onhym-ht-glow-1 { width: 360px; height: 360px; background: #2ea162; top: -120px; left: -80px; }
.onhym-ht-glow-2 { width: 320px; height: 320px; background: #0a3d24; bottom: -120px; right: -80px; }
.onhym-ht-hero-inner {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: center;
gap: 24px;
padding: 44px 44px 80px;
min-height: 220px;
}
.onhym-ht-hero-text  { z-index: 2; max-width: 560px; }
.onhym-ht-hero-title {
display: block;
margin: 0 0 12px;
font-family: var(--onhym-ht-font);
font-size: clamp(28px, 4.4vw, 54px);
line-height: 1.06;
font-weight: 800;
letter-spacing: -0.02em;
color: #fff;
}
.onhym-ht-hero-sub {
display: block;
margin: 0;
font-family: var(--onhym-ht-font);
font-size: clamp(14px, 1.25vw, 17px);
color: rgba(255,255,255,0.85);
line-height: 1.55;
max-width: 480px;
}
.onhym-ht-hero-art { justify-self: end; width: clamp(120px, 18vw, 200px); }
.onhym-ht-hero-art svg { display: block; width: 100%; height: auto; } .onhym-ht-hero-cta {
position: absolute;
right: 44px;
bottom: 28px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px 12px 22px;
background: #fff;
color: var(--onhym-ht-green-dk);
font-family: var(--onhym-ht-font);
font-weight: 600;
font-size: 14px;
border-radius: 999px;
box-shadow: 0 10px 28px -10px rgba(0,0,0,0.28);
transition: transform .25s ease, box-shadow .25s ease;
z-index: 3;
}
.onhym-ht-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.35); }
.onhym-ht-hero-cta svg { display: inline-block; flex-shrink: 0; color: var(--onhym-ht-green); } .onhym-ht-nav-wrap {
display: block;
width: 100%;
padding: 20px 20px 0;
}
.onhym-ht-nav-card {
display: block;
width: 100%;
max-width: 90%;
margin: 0 auto;
background: #ffffff;
border-radius: var(--onhym-ht-radius);
border: 1px solid var(--onhym-ht-line);
box-shadow: 0 8px 32px -16px rgba(15, 50, 30, 0.14);
padding: 28px 28px 24px;
text-align: center;
}
.onhym-ht-active-lbl {
display: block;
margin: 0 0 4px;
font-family: var(--onhym-ht-font);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--onhym-ht-ink-2);
font-weight: 600;
}
.onhym-ht-big-year {
display: inline-block;
font-family: var(--onhym-ht-font);
font-size: clamp(48px, 6.5vw, 76px);
font-weight: 800;
color: var(--onhym-ht-green);
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 8px;
}
.onhym-ht-year-underline {
display: block;
width: 56px;
height: 3px;
border-radius: 3px;
background: var(--onhym-ht-gold);
margin: 0 auto 22px;
} .onhym-ht-track-row {
display: flex;
align-items: center;
gap: 22px;
padding: 8px 4px 6px;
} .onhym-ht-root .onhym-timeline-prev,
.onhym-ht-root .onhym-timeline-next,
.onhym-ht-root .onhym-timeline-prev:hover,
.onhym-ht-root .onhym-timeline-next:hover,
.onhym-ht-root .onhym-timeline-prev:focus,
.onhym-ht-root .onhym-timeline-next:focus,
.onhym-ht-root .onhym-timeline-prev:active,
.onhym-ht-root .onhym-timeline-next:active {
flex: 0 0 auto;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
color: var(--onhym-ht-green) !important;
border: 1px solid rgba(15, 50, 30, 0.08) !important;
box-shadow:
0 1px 2px rgba(15, 50, 30, 0.06),
0 10px 24px -12px rgba(15, 50, 30, 0.22) !important;
opacity: 1 !important;
visibility: visible !important;
cursor: pointer !important;
transition:
transform .35s cubic-bezier(.2,.7,.2,1),
box-shadow .35s ease,
color .25s ease,
background-color .25s ease !important;
-webkit-tap-highlight-color: transparent;
} .onhym-ht-root .onhym-timeline-prev:hover,
.onhym-ht-root .onhym-timeline-next:hover {
transform: translateY(-2px) !important;
box-shadow:
0 2px 4px rgba(15, 50, 30, 0.08),
0 18px 36px -14px rgba(15, 50, 30, 0.32) !important;
color: var(--onhym-ht-green-dk) !important;
}
.onhym-ht-root .onhym-timeline-prev:active,
.onhym-ht-root .onhym-timeline-next:active {
transform: translateY(0) scale(.96) !important;
} .onhym-ht-root .onhym-timeline-prev svg,
.onhym-ht-root .onhym-timeline-next svg {
display: block !important;
flex-shrink: 0;
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
stroke-width: 2.4;
pointer-events: none;
} .onhym-ht-root .onhym-timeline-prev:focus-visible,
.onhym-ht-root .onhym-timeline-next:focus-visible {
outline: 2px solid var(--onhym-ht-green) !important;
outline-offset: 3px !important;
} .onhym-ht-root .onhym-timeline-prev[disabled],
.onhym-ht-root .onhym-timeline-next[disabled],
.onhym-ht-root .onhym-timeline-prev.is-disabled,
.onhym-ht-root .onhym-timeline-next.is-disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: 0 1px 2px rgba(15, 50, 30, 0.05) !important;
} @media (max-width: 600px) {
.onhym-ht-track-row { gap: 12px; }
.onhym-ht-root .onhym-timeline-prev,
.onhym-ht-root .onhym-timeline-next {
width: 36px !important;
height: 36px !important;
}
.onhym-ht-root .onhym-timeline-prev svg,
.onhym-ht-root .onhym-timeline-next svg {
width: 15px !important;
height: 15px !important;
}
} .onhym-ht-track {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 64px;
display: flex;
align-items: center;
} .onhym-ht-track-line,
.onhym-ht-track-fill {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
border-radius: 2px;
transform: translateY(-50%);
pointer-events: none;
z-index: 0;
}
.onhym-ht-track-line { background: var(--onhym-ht-line); }
.onhym-ht-track-fill {
right: auto;
width: 0;
background: linear-gradient(90deg, var(--onhym-ht-green-2), var(--onhym-ht-green));
transition: width .45s ease;
} .onhym-ht-years {
position: relative;
z-index: 1;
flex: 1 1 auto;
width: 100%;
min-width: 0;
overflow: hidden;
padding: 12px 0;
}
.onhym-ht-years .swiper-wrapper {
display: flex;
align-items: center;
box-sizing: content-box;
}
.onhym-ht-year-slide {
flex-shrink: 0 !important;
width: 92px !important;
height: auto;
display: flex;
margin-top: 13px;
align-items: center;
justify-content: center;
} .onhym-ht-year-btn,
.onhym-ht-year-btn:hover,
.onhym-ht-year-btn:focus,
.onhym-ht-year-btn:active,
.onhym-ht-year-btn.is-active {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
.onhym-ht-year-btn {
width: 100%;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 6px 4px;
font-family: var(--onhym-ht-font);
font-size: 14px;
font-weight: 600;
color: var(--onhym-ht-ink-2);
letter-spacing: 0.02em;
transition: color .25s ease, transform .25s ease;
white-space: nowrap;
text-align: center;
line-height: 1;
}
.onhym-ht-year-btn:hover { color: var(--onhym-ht-green); transform: none; }
.onhym-ht-year-dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #d6dce3;
opacity: 0.45;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease;
} .onhym-ht-year-btn.is-past .onhym-ht-year-dot {
background: var(--onhym-ht-green-2);
opacity: 0.72;
transform: scale(1.05);
}
.onhym-ht-year-btn.is-past {
color: var(--onhym-ht-green-2);
opacity: 0.72;
}
.onhym-ht-year-lbl {
display: block;
line-height: 1;
font-size: 14px;
letter-spacing: 0.02em;
}
.onhym-ht-year-btn.is-active {
color: var(--onhym-ht-green);
font-weight: 800;
font-size: 16px;
}
.onhym-ht-year-btn.is-active .onhym-ht-year-lbl { font-size: 16px; }
.onhym-ht-year-btn.is-active .onhym-ht-year-dot {
background: var(--onhym-ht-green);
transform: scale(1.4);
box-shadow: 0 0 0 5px rgba(24, 106, 67, 0.14);
} .swiper-slide.is-dup-year {
width: 1px !important;
overflow: hidden;
pointer-events: none;
}
.swiper-slide.is-dup-year .onhym-ht-year-btn {
visibility: hidden;
pointer-events: none;
} .onhym-ht-content-wrap {
display: block;
width: 100%;
padding: 20px 20px 24px;
}
.onhym-ht-stage {
display: block;
width: 100%;
max-width: 90%;
margin: 0 auto;
}
.onhym-ht-card {
display: block;
background: #ffffff;
border: 1px solid var(--onhym-ht-line);
border-radius: var(--onhym-ht-radius);
box-shadow: 0 8px 32px -16px rgba(15, 50, 30, 0.14);
overflow: hidden;
opacity: 1;
transform: none;
transition: opacity .5s ease, transform .5s ease;
}
.onhym-ht-card.is-in { opacity: 1; transform: translateY(0); }
.onhym-ht-card-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 22px;
padding: 56px 40px 60px;
max-width: 820px;
margin: 0 auto;
}
.onhym-ht-card-pill {
display: inline-flex;
align-self: center;
align-items: center;
padding: 6px 16px;
font-family: var(--onhym-ht-font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--onhym-ht-green-dk);
background: #e8f2ec;
border-radius: 999px;
line-height: 1;
}
.onhym-ht-card-title {
display: block;
margin: 0;
max-width: 720px;
font-family: var(--onhym-ht-font);
font-size: clamp(26px, 3.6vw, 42px);
line-height: 1.18;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--onhym-ht-green);
}
.onhym-ht-card-year-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.onhym-ht-card-year {
display: block;
font-family: var(--onhym-ht-font);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--onhym-ht-ink-2);
}
.onhym-ht-card-year-bar {
display: block;
width: 56px;
height: 2px;
border-radius: 2px;
background: var(--onhym-ht-gold);
}
.onhym-ht-card-desc {
max-width: 680px;
font-family: var(--onhym-ht-font);
font-size: 16px;
line-height: 1.8;
font-weight: 400;
color: var(--onhym-ht-ink-2);
}
.onhym-ht-card-desc p { display: block; margin: 0 0 14px; }
.onhym-ht-card-desc p:last-child { margin-bottom: 0; } @media (max-width: 720px) {
.onhym-ht-content-wrap { padding: 16px 14px 20px; }
.onhym-ht-card-body    { padding: 40px 22px 44px; gap: 18px; }
.onhym-ht-card-title   { font-size: clamp(22px, 6vw, 30px); line-height: 1.22; }
.onhym-ht-card-desc    { font-size: 15px; line-height: 1.72; }
.onhym-ht-card-year    { font-size: 16px; }
} .onhym-ht-stats-wrap {
display: block;
width: 100%;
padding: 16px 20px 28px;
}
.onhym-ht-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
width: 100%;
max-width: var(--onhym-ht-max);
margin: 0 auto;
background: linear-gradient(135deg, #134d2f 0%, #1a6a3f 100%);
border-radius: var(--onhym-ht-radius);
padding: 22px 24px;
color: #ffffff;
box-shadow: 0 22px 54px -28px rgba(15, 50, 30, 0.38);
}
.onhym-ht-stat {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 8px;
}
.onhym-ht-stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #ffffff;
margin-bottom: 4px;
}
.onhym-ht-stat-icon svg { display: block; width: 22px; height: 22px; }
.onhym-ht-stat-value {
display: block;
font-family: var(--onhym-ht-font);
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 800;
color: #ffffff;
line-height: 1.15;
}
.onhym-ht-stat-lbl {
display: block;
font-family: var(--onhym-ht-font);
font-size: 12px;
color: rgba(255,255,255,0.8);
line-height: 1.35;
} .onhym-ht-empty-wrap {
display: block;
width: 100%;
padding: 24px 20px;
}
.onhym-ht-empty {
display: block;
max-width: var(--onhym-ht-max);
margin: 0 auto;
padding: 40px 24px;
text-align: center;
font-family: var(--onhym-ht-font);
color: var(--onhym-ht-ink-2);
background: #ffffff;
border-radius: var(--onhym-ht-radius);
border: 1px solid var(--onhym-ht-line);
} @media (max-width: 900px) {
.onhym-ht-hero-wrap,
.onhym-ht-nav-wrap,
.onhym-ht-content-wrap,
.onhym-ht-stats-wrap { padding-left: 14px; padding-right: 14px; }
.onhym-ht-stats { grid-template-columns: repeat(4, 1fr); padding: 18px 14px; gap: 8px; }
.onhym-ht-stat-icon { width: 38px; height: 38px; }
}
@media (max-width: 720px) {
.onhym-ht-hero-inner {
grid-template-columns: 1fr;
gap: 18px;
padding: 30px 22px 80px;
}
.onhym-ht-hero-art { display: none; }
.onhym-ht-big-year { font-size: clamp(40px, 12vw, 58px); }
.onhym-ht-btn-arrow { width: 34px; height: 34px; }
.onhym-ht-track { height: 52px; }
.onhym-ht-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.onhym-ht-hero-wrap,
.onhym-ht-nav-wrap,
.onhym-ht-content-wrap,
.onhym-ht-stats-wrap { padding-left: 10px; padding-right: 10px; }
.onhym-ht-nav-card { padding: 20px 14px 18px; }
.onhym-ht-track-row { gap: 8px; }
.onhym-ht-year-btn  { padding: 4px 8px; font-size: 12px; }
.onhym-ht-year-slide { width: 72px !important; }
} @media (prefers-reduced-motion: reduce) {
.onhym-ht-card,
.onhym-ht-card-img,
.onhym-ht-btn-arrow,
.onhym-ht-card-cta,
.onhym-ht-track-fill { transition: none !important; }
}