/* =================================================================
DAEYANG ROPE SYSTEM — clone (ropesystem.imweb.me)
minimalist · architecture · industrial · navy + steel palette
================================================================= */
/* ---------- TOKENS ---------- */
:root{
--c-bg:#ffffff;
--c-bg-alt:#f5f6f8;
--c-bg-dark:#0b1220;
--c-bg-dark2:#111a2e;
--c-text:#15202b;
--c-text-soft:#54607a;
--c-text-muted:#8590a6;
--c-line:#e6e8ee;
--c-line-dark:rgba(255,255,255,.12);
--c-primary:#1b3a6b; /* deep navy */
--c-primary-2:#2e5aa4; /* steel blue */
--c-accent:#c8a464; /* swiss brass */
--c-white:#ffffff;
--shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
--shadow-md:0 8px 24px rgba(15,23,42,.08);
--shadow-lg:0 20px 60px rgba(15,23,42,.14);
--r-sm:6px;
--r-md:12px;
--r-lg:20px;
--container:1440px;
--header-h:74px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:'Inter','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-weight:400;
color:var(--c-text);
background:var(--c-bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden; /* 풀블리드/워터마크 등 가로 오버플로우 방지 (가로 스크롤바 X) */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none;padding:0;margin:0}
h1,h2,h3,h4,h5,h6,p{margin:0}
/* ---------- LAYOUT ---------- */
.dyr-section{padding:120px 0;position:relative}
.dyr-section__inner{
max-width:var(--container);
margin:0 auto;
padding:0 32px;
}
.dyr-section__head{margin-bottom:64px;max-width:720px}
.dyr-section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.dyr-section__eyebrow{
font-size:12px;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--c-primary-2);
margin-bottom:14px;
}
.dyr-section__eyebrow--light{color:var(--c-accent)}
.dyr-section__title{
font-size:clamp(28px,3.6vw,46px);
font-weight:700;
line-height:1.25;
letter-spacing:-.02em;
color:var(--c-text);
margin-bottom:18px;
}
.dyr-section__title--light{color:var(--c-white)}
.dyr-section__desc{
font-size:17px;
color:var(--c-text-soft);
line-height:1.7;
}
.dyr-section__desc--light{color:rgba(255,255,255,.78)}
/* ---------- BUTTONS ---------- */
.dyr-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 28px;
font-size:14px;font-weight:600;letter-spacing:.02em;
border-radius:999px;
border:1px solid transparent;
transition:all .25s var(--ease);
cursor:pointer;
white-space:nowrap;
}
.dyr-btn i{font-size:12px;transition:transform .2s var(--ease)}
.dyr-btn:hover i{transform:translateX(3px)}
.dyr-btn--primary{background:var(--c-primary);color:#fff}
.dyr-btn--primary:hover{background:var(--c-primary-2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.dyr-btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.dyr-btn--ghost:hover{background:#fff;color:var(--c-primary)}
.dyr-btn--outline{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.dyr-btn--outline:hover{background:var(--c-primary);color:#fff}
.dyr-btn--block{width:100%}
/* =================================================================
HEADER
================================================================= */
.dyr-header{
position:fixed;top:0;left:0;right:0;z-index:100;
height:var(--header-h);
background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid transparent;
transition:background .25s var(--ease), border-color .25s var(--ease);
}
.dyr-header.is-scrolled{
background:rgba(255,255,255,.98);
border-bottom-color:var(--c-line);
box-shadow:0 1px 8px rgba(0,0,0,.04);
}
.dyr-header__inner{
max-width:var(--container);
height:100%;
margin:0 auto;
padding:0 32px;
display:flex;align-items:center;justify-content:space-between;
}
.dyr-logo{display:inline-flex;align-items:center;text-decoration:none}
.dyr-logo img{display:block;height:40px;width:auto;object-fit:contain}
.dyr-logo__mark{font-size:18px;color:var(--c-primary);font-weight:800;letter-spacing:.04em}
.dyr-logo__mark--light{color:#fff;font-size:20px;font-weight:800;letter-spacing:.04em}
.dyr-logo__sub{font-size:10px;color:var(--c-text-muted);margin-top:4px;letter-spacing:.22em;font-weight:800}
.dyr-nav__list{display:flex;align-items:center;gap:4px}
.dyr-nav__item > a{
display:inline-block;
padding:10px 18px;
font-size:13.5px;
font-weight:600;
letter-spacing:.04em;
color:var(--c-text);
position:relative;
}
.dyr-nav__item > a::after{
content:'';position:absolute;left:18px;right:18px;bottom:4px;height:2px;
background:var(--c-primary);transform:scaleX(0);transform-origin:left;
transition:transform .25s var(--ease);
}
.dyr-nav__item > a:hover::after{transform:scaleX(1)}
/* 현재 위치 표시 — 톱레벨 메뉴 */
.dyr-nav__item.is-active > a{color:var(--c-primary);font-weight:700}
.dyr-nav__item.is-active > a::after{transform:scaleX(1)}
.dyr-nav__item--cta > a{
margin-left:10px;
background:var(--c-primary);color:#fff;
border-radius:999px;padding:9px 18px;
}
.dyr-nav__item--cta > a::after{display:none}
.dyr-nav__item--cta > a:hover{background:var(--c-primary-2)}
.dyr-nav__item--has-sub{position:relative}
.dyr-nav__sub{
position:absolute;top:100%;left:0;
min-width:200px;
padding:10px;
background:#fff;
border:1px solid var(--c-line);
border-radius:var(--r-md);
box-shadow:var(--shadow-md);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:all .2s var(--ease);
}
.dyr-nav__item--has-sub:hover .dyr-nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.dyr-nav__sub a{display:block;padding:10px 14px;font-size:13.5px;border-radius:8px;color:var(--c-text-soft)}
.dyr-nav__sub a:hover{background:var(--c-bg-alt);color:var(--c-primary)}
.dyr-nav__sub a.is-active{background:rgba(27,58,107,.06);color:var(--c-primary);font-weight:700}
/* MEGA MENU (Product) */
.dyr-nav__item--has-mega{position:relative}
.dyr-mega{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
min-width:560px;padding:22px;
background:#fff;border:1px solid var(--c-line);
border-radius:var(--r-md);box-shadow:var(--shadow-md);
display:grid;grid-template-columns:1fr 1fr;gap:24px;
opacity:0;visibility:hidden;
transition:all .2s var(--ease);
}
.dyr-mega--4col{
grid-template-columns:repeat(4, 1fr);
min-width:1080px; /* 4 컬럼 충분히 넓게 */
padding:24px 28px;
gap:18px 28px;
}
.dyr-mega--4col .dyr-mega__col a{ padding:8px 10px; }
.dyr-mega--4col .dyr-mega__col a strong{ font-size:13.5px; }
.dyr-mega--4col .dyr-mega__col a span{ font-size:11px; }
.dyr-nav__item--has-mega:hover .dyr-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dyr-mega__head{
font-size:11px;font-weight:700;letter-spacing:.18em;
color:var(--c-primary-2);text-transform:uppercase;
margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--c-line);
}
.dyr-mega__col ul{display:flex;flex-direction:column;gap:2px}
.dyr-mega__col a{
display:flex;flex-direction:column;gap:2px;
padding:10px 12px;border-radius:8px;color:var(--c-text);
transition:background .15s var(--ease);
}
.dyr-mega__col a:hover{background:var(--c-bg-alt)}
.dyr-mega__col a strong{font-size:14px;font-weight:600}
.dyr-mega__col a span{font-size:11.5px;color:var(--c-text-muted);letter-spacing:.04em}
.dyr-mega__col a.is-active{background:rgba(27,58,107,.06)}
.dyr-mega__col a.is-active strong{color:var(--c-primary)}
.dyr-burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.dyr-burger span{width:22px;height:2px;background:var(--c-text);transition:all .25s var(--ease)}
.dyr-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dyr-burger.is-open span:nth-child(2){opacity:0}
.dyr-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* =================================================================
HERO
================================================================= */
.dyr-hero{
position:relative;
min-height:100vh;
padding:calc(var(--header-h) + 80px) 0 80px;
display:flex;align-items:center;
color:#fff;
overflow:hidden;
}
.dyr-hero__bg{
position:absolute;inset:0;
background:
linear-gradient(135deg,#0b1220 0%, #122347 55%, #1b3a6b 100%);
z-index:0;
}
/* ───────── 슬라이드쇼 변형 — 풀블리드 사진 순환 ───────── */
.dyr-hero--slides{background:#0b1220}
.dyr-hero--slides .dyr-hero__slides{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.dyr-hero--slides .dyr-hero__slide{
position:absolute;inset:0;
background-size:cover;background-position:center;
opacity:0;
animation:dyrSlideFade 36s infinite;
}
/* 각 슬라이드 6초 간격으로 등장 — 총 6장 × 6s = 36s 순환 */
.dyr-hero--slides .dyr-hero__slide:nth-child(1){animation-delay:0s}
.dyr-hero--slides .dyr-hero__slide:nth-child(2){animation-delay:6s}
.dyr-hero--slides .dyr-hero__slide:nth-child(3){animation-delay:12s}
.dyr-hero--slides .dyr-hero__slide:nth-child(4){animation-delay:18s}
.dyr-hero--slides .dyr-hero__slide:nth-child(5){animation-delay:24s}
.dyr-hero--slides .dyr-hero__slide:nth-child(6){animation-delay:30s}
@keyframes dyrSlideFade{
0% {opacity:0}
3% {opacity:1}
17% {opacity:1}
20% {opacity:0}
100% {opacity:0}
}
/* 슬라이드 사진 위 텍스트 가독성 — 오버레이 없이 그림자만 살짝 */
.dyr-hero--slides .dyr-hero__inner,
.dyr-hero--slides .dyr-hero__quick{
text-shadow:0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
}
.dyr-hero--slides .dyr-hero__quick-item{
text-shadow:none; /* 칩 박스 안 글자는 칩 배경이 가독성 담당 */
}
@media (prefers-reduced-motion: reduce){
.dyr-hero--slides .dyr-hero__slide{animation:none;opacity:1}
.dyr-hero--slides .dyr-hero__slide:not(:first-child){display:none}
}
/* 비디오 변형 — hero 배경 자리에 풀블리드 영상 */
.dyr-hero--video .dyr-hero__video{
position:absolute;inset:0;z-index:0;
width:100%;height:100%;object-fit:cover;
pointer-events:none;
}
/* 비디오 위에 어두운 그라데이션 오버레이 — 텍스트 가독성 확보 */
.dyr-hero--video .dyr-hero__bg{
z-index:1;
background:
linear-gradient(135deg, rgba(11,18,32,.78) 0%, rgba(18,35,71,.62) 55%, rgba(27,58,107,.58) 100%);
}
.dyr-hero__bg::before{
content:'';position:absolute;inset:0;
background-image:
radial-gradient(circle at 20% 30%, rgba(46,90,164,.32) 0, transparent 42%),
radial-gradient(circle at 80% 70%, rgba(200,164,100,.22) 0, transparent 42%);
}
.dyr-hero__bg::after{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse at center, black 40%, transparent 80%);
}
/* 메쉬 네트 패턴 — 로프 테마 SVG (육각 그리드) */
.dyr-hero__mesh{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:160px 138px;
opacity:.55;
mask-image:radial-gradient(ellipse at center, black 35%, transparent 80%);
animation:dyrMeshDrift 60s linear infinite;
}
@keyframes dyrMeshDrift{
0%{background-position:0 0}
100%{background-position:480px 414px}
}
/* 글로우 오브 — 좌상단/우하단 */
.dyr-hero__glow{
position:absolute;border-radius:50%;
filter:blur(80px);pointer-events:none;z-index:0;
animation:dyrGlowPulse 8s ease-in-out infinite alternate;
}
.dyr-hero__glow--a{top:-160px;left:-160px;width:520px;height:520px;
background:radial-gradient(circle, rgba(46,90,164,.55) 0%, transparent 70%);}
.dyr-hero__glow--b{bottom:-180px;right:-160px;width:560px;height:560px;
background:radial-gradient(circle, rgba(200,164,100,.32) 0%, transparent 70%);
animation-delay:-4s;}
@keyframes dyrGlowPulse{
0%{transform:scale(1) translate(0,0);opacity:.85}
100%{transform:scale(1.15) translate(20px,-10px);opacity:1}
}
/* 우측 상단 파트너 뱃지 */
.dyr-hero__badge{
position:absolute;top:calc(var(--header-h) + 28px);right:32px;
display:inline-flex;align-items:center;gap:12px;
padding:10px 16px 10px 12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
border-radius:14px;
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
z-index:2;
color:#fff;text-decoration:none;
transition:transform .3s var(--ease,ease), background .3s var(--ease,ease), border-color .3s var(--ease,ease);
}
.dyr-hero__badge:hover{
transform:translateY(-2px);
background:rgba(255,255,255,.1);
border-color:rgba(200,164,100,.4);
}
.dyr-hero__badge-mark{
width:36px;height:36px;border-radius:10px;
display:grid;place-items:center;
background:linear-gradient(135deg, rgba(200,164,100,.4), rgba(200,164,100,.18));
border:1px solid rgba(200,164,100,.5);
color:var(--c-accent);font-size:15px;
}
.dyr-hero__badge-text{display:flex;flex-direction:column;line-height:1.2;}
.dyr-hero__badge-text small{
font-size:9px;letter-spacing:.28em;color:rgba(255,255,255,.55);
font-weight:600;text-transform:uppercase;
}
.dyr-hero__badge-text strong{
font-size:12.5px;letter-spacing:.06em;color:#fff;font-weight:700;margin-top:2px;
}
/* ───────────────────────────────────────────────────────────
우측 상단 빠른 바로가기 — 기존 badge 자리 (z-index/blur/색감 동일)
─────────────────────────────────────────────────────────── */
.dyr-hero__quick{
position:absolute;top:calc(var(--header-h) + 28px);right:32px;
z-index:2;
display:flex;flex-direction:column;gap:8px;
min-width:210px;
}
.dyr-hero__quick-label{
margin:0 0 2px 12px;
font-size:9px;letter-spacing:.28em;
color:rgba(255,255,255,.72);
font-weight:700;text-transform:uppercase;
}
.dyr-hero__quick-item{
display:flex;align-items:center;gap:11px;
padding:10px 14px 10px 11px;
background:rgba(11,28,61,.62); /* 진한 남색 베이스 — 가독성 ↑ */
border:1px solid rgba(255,255,255,.22);
border-radius:12px;
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
box-shadow:0 10px 24px rgba(0,0,0,.28);
color:#fff;text-decoration:none;
transition:transform .25s var(--ease,ease), background .25s var(--ease,ease), border-color .25s var(--ease,ease);
}
.dyr-hero__quick-item:hover{
transform:translateX(-2px);
background:rgba(11,28,61,.82);
border-color:rgba(200,164,100,.55);
box-shadow:0 14px 30px rgba(0,0,0,.36);
}
.dyr-hero__quick-ic{
width:32px;height:32px;border-radius:9px;
display:grid;place-items:center;flex-shrink:0;
background:linear-gradient(135deg, rgba(200,164,100,.4), rgba(200,164,100,.16));
border:1px solid rgba(200,164,100,.45);
color:var(--c-accent, #c8a464);font-size:13px;
}
.dyr-hero__quick-text{
display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0;
}
.dyr-hero__quick-text strong{
font-size:13px;letter-spacing:.02em;color:#fff;font-weight:700;
}
.dyr-hero__quick-text small{
font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.72);
font-weight:600;text-transform:uppercase;margin-top:2px;
}
.dyr-hero__quick-ext{
font-size:10px;color:rgba(255,255,255,.7);flex-shrink:0;
}
.dyr-hero__quick-item:hover .dyr-hero__quick-ext{color:#fff}
@media (max-width: 900px){
.dyr-hero__quick{
position:static;right:auto;top:auto;
flex-direction:row;flex-wrap:wrap;gap:6px;
min-width:0;margin:24px 16px 0;
max-width:560px;
}
.dyr-hero__quick-label{display:none}
.dyr-hero__quick-item{
flex:1 1 calc(33.333% - 4px);
padding:8px 10px;justify-content:center;text-align:center;
flex-direction:column;gap:4px;
}
.dyr-hero__quick-ic{width:28px;height:28px;font-size:12px}
.dyr-hero__quick-text{align-items:center}
.dyr-hero__quick-text strong{font-size:12px}
.dyr-hero__quick-text small{display:none}
.dyr-hero__quick-ext{display:none}
}
.dyr-hero__inner{
position:relative;z-index:1;
max-width:var(--container);
margin:0 auto;
padding:0 32px;
width:100%;
}
.dyr-hero__eyebrow{
font-size:12px;font-weight:600;letter-spacing:.3em;
color:var(--c-accent);text-transform:uppercase;margin-bottom:24px;
display:inline-flex;align-items:center;gap:12px;
}
.dyr-hero__eyebrow-line{
width:36px;height:1px;background:var(--c-accent);
display:inline-block;
}
.dyr-hero__eyebrow i{font-size:13px;}
.dyr-hero__title{
font-size:clamp(34px,5.6vw,68px);
font-weight:800;line-height:1.15;letter-spacing:-.025em;
margin-bottom:24px;
}
.dyr-hero__title .dyr-hero__accent{color:var(--c-accent)}
/* 키네틱 타이포 — 회전 단어 */
.dyr-hero__rotate{
display:inline-block;
color:var(--c-accent);
text-align:left;
vertical-align:baseline;
transition:opacity .32s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1);
position:relative;
will-change:opacity, transform;
}
.dyr-hero__rotate::after{
content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;
background:linear-gradient(90deg, transparent, var(--c-accent), transparent);
opacity:.55;
}
.dyr-hero__rotate.is-out{
opacity:0;
transform:translateY(-14px);
}
.dyr-hero__desc{
font-size:clamp(15px,1.4vw,18px);
color:rgba(255,255,255,.82);
max-width:560px;margin-bottom:42px;line-height:1.75;
}
.dyr-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:80px;align-items:center}
.dyr-hero__cta .dyr-btn{position:relative;overflow:hidden;}
/* 선행 아이콘은 기본 글로벌 translateX 무력화 */
.dyr-hero__cta .dyr-btn:hover i:not(.dyr-btn__arrow){transform:none;}
.dyr-hero__cta .dyr-btn__arrow{
transition:transform .35s var(--ease,ease);
}
.dyr-hero__cta .dyr-btn:hover .dyr-btn__arrow{transform:translateX(4px);}
/* primary 버튼에 골드 그라데이션 톤 추가 (hover) */
.dyr-hero__cta .dyr-btn--primary{
background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2,#2e5aa4) 100%);
box-shadow:0 6px 20px rgba(46,90,164,.32);
}
.dyr-hero__cta .dyr-btn--primary:hover{
box-shadow:0 10px 30px rgba(46,90,164,.45);
}
/* HERO STATS — 글래스모피즘 카드 */
.dyr-hero__stats{
display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:18px;
padding-top:34px;margin-top:8px;
border-top:1px solid rgba(255,255,255,.18);
max-width:980px;
}
.dyr-hero__stats .dyr-stat{
position:relative;
display:flex;flex-direction:column;gap:6px;
padding:20px 22px 22px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
overflow:hidden;
transition:transform .35s var(--ease,ease), border-color .35s var(--ease,ease);
}
.dyr-hero__stats .dyr-stat::before{
content:'';position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg, transparent, var(--c-accent), transparent);
opacity:.65;
}
.dyr-hero__stats .dyr-stat:hover{
transform:translateY(-3px);
border-color:rgba(200,164,100,.32);
}
.dyr-hero__stats .dyr-stat__icon{
position:absolute;top:18px;right:18px;
font-size:22px;color:rgba(200,164,100,.42);
}
.dyr-hero__stats .dyr-stat__num{
font-size:clamp(28px,3vw,40px);font-weight:800;color:#fff;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;
line-height:1;
}
.dyr-hero__stats .dyr-stat__label{
font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.62);
text-transform:uppercase;font-weight:600;
}
/* 히어로: 인증·파트너 마퀴 스트립 */
.dyr-hero__strip{
margin-top:36px;padding-top:24px;
border-top:1px solid rgba(255,255,255,.08);
overflow:hidden;
position:relative;
mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.dyr-hero__strip-track{
display:flex;align-items:center;gap:32px;
white-space:nowrap;width:max-content;
animation:dyrStripScroll 40s linear infinite;
}
.dyr-hero__strip span{
font-size:11.5px;letter-spacing:.24em;font-weight:600;
color:rgba(255,255,255,.6);text-transform:uppercase;
display:inline-flex;align-items:center;gap:8px;
}
.dyr-hero__strip span i{color:var(--c-accent);font-size:11px;opacity:.85;}
.dyr-hero__strip-dot{color:var(--c-accent) !important;font-size:6px !important;opacity:.7}
@keyframes dyrStripScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.dyr-hero__strip:hover .dyr-hero__strip-track{animation-play-state:paused}
.dyr-hero__scroll{
position:absolute;bottom:32px;left:50%;
display:flex;flex-direction:column;align-items:center;gap:10px;
font-size:10px;letter-spacing:.4em;color:rgba(255,255,255,.65);
text-decoration:none;z-index:2;
transform:translateX(-50%);
transition:color .3s var(--ease,ease);
}
.dyr-hero__scroll:hover{color:var(--c-accent);}
.dyr-hero__scroll i{
font-size:14px;
animation:dyrScrollBounce 1.8s var(--ease,ease) infinite;
}
@keyframes dyrScrollBounce{
0%,100%{transform:translateY(0);opacity:.7;}
50%{transform:translateY(6px);opacity:1;}
}
/* =================================================================
SOLUTIONS
================================================================= */
.dyr-solutions{background:var(--c-bg)}
.dyr-grid{display:grid;gap:28px}
.dyr-grid--solutions{grid-template-columns:repeat(2,1fr);gap:24px}
/* ============ SOLUTION CARD (에디토리얼 가로형) ============ */
.dyr-solcard{
position:relative;
display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
min-height:380px;border-radius:18px;overflow:hidden;
background:#fff;border:1px solid var(--c-line);
text-decoration:none;color:inherit;
transition:transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease), border-color .35s var(--ease, ease);
isolation:isolate;
}
.dyr-solcard:hover{
transform:translateY(-4px);
border-color:transparent;
box-shadow:0 28px 60px -28px rgba(11,28,61,.28);
}
/* 짝수 카드: 이미지 ↔ 콘텐츠 reverse (지그재그) */
.dyr-solcard:nth-child(even){grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr)}
.dyr-solcard:nth-child(even) .dyr-solcard__media{order:2}
.dyr-solcard:nth-child(even) .dyr-solcard__body{order:1}
/* MEDIA */
.dyr-solcard__media{
position:relative;
background:#e6e8ee center/cover no-repeat;
min-height:380px;
overflow:hidden;
}
.dyr-solcard__media::before{
content:'';position:absolute;inset:0;
background:
linear-gradient(135deg, rgba(11,28,61,.0) 40%, rgba(11,28,61,.45) 100%),
radial-gradient(circle at 0% 100%, rgba(96,165,250,.25) 0%, transparent 55%);
transition:opacity .35s ease;
}
.dyr-solcard:hover .dyr-solcard__media::before{opacity:.85}
.dyr-solcard__num{
position:absolute;top:22px;left:22px;z-index:2;overflow:hidden;
font-family:'Inter', sans-serif;
font-size:13.5px;font-weight:900;letter-spacing:.18em;color:#fff;
padding:6px 12px;border-radius:999px;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
text-shadow:
0 1px 2px rgba(0,0,0,.55),
0 2px 6px rgba(0,0,0,.35),
0 0 1px rgba(0,0,0,.4);
}
/* 상단 35% 글래스 글로스 — 따뜻한 골드 톤 (브랜드 컬러 #c8a464 기반) */
.dyr-solcard__num::before{
content:'';position:absolute;left:0;right:0;top:0;height:38%;
background:linear-gradient(115deg,
rgba(255,255,255,.42) 0%,
rgba(255,222,180,.30) 35%,
rgba(200,164,100,.18) 65%,
rgba(255,255,255,0) 100%
);
mix-blend-mode:screen;
opacity:.85;
border-radius:999px 999px 0 0;
pointer-events:none;
}
/* BODY */
.dyr-solcard__body{
position:relative;overflow:hidden;
padding:44px 42px 38px;
display:flex;flex-direction:column;justify-content:center;gap:12px;
}
/* 대형 워터마크 번호 — 차가운 색상 다채로운 옅은 그라데이션 */
.dyr-solcard__bignum{
position:absolute;right:-8px;bottom:-22px;z-index:0;pointer-events:none;
font-family:'Inter', sans-serif;
font-size:170px;font-weight:900;line-height:1;
/* 차가운 색상 그라데이션 — 청록 → 라벤더 → 하늘 → 민트 */
background:linear-gradient(
120deg,
rgba(100, 200, 220, .02) 0%,
rgba(140, 170, 230, .02) 30%,
rgba(180, 150, 230, .02) 55%,
rgba(120, 200, 200, .02) 80%,
rgba(100, 180, 220, .02) 100%
);
-webkit-background-clip:text;background-clip:text;
color:transparent;
-webkit-text-stroke:1.2px rgba(27,58,107,.04);
letter-spacing:-.05em;
user-select:none;
}
.dyr-solcard:hover .dyr-solcard__bignum{
-webkit-text-stroke-color:rgba(27,58,107,.08);
}
.dyr-solcard__tag{
position:relative;z-index:1;
display:inline-flex;width:fit-content;
font-size:11px;font-weight:700;letter-spacing:.22em;
color:var(--c-primary-2, var(--c-primary));
padding:5px 11px;border-radius:5px;
background:linear-gradient(135deg, rgba(96,165,250,.12), rgba(27,58,107,.06));
border:1px solid rgba(27,58,107,.12);
}
.dyr-solcard__title{
position:relative;z-index:1;
font-size:26px;font-weight:700;
color:var(--c-text);letter-spacing:-.015em;line-height:1.3;
margin:6px 0 10px;
}
.dyr-solcard__desc{
position:relative;z-index:1;
font-size:15px;color:var(--c-text-soft);line-height:1.7;margin:0 0 18px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;
}
.dyr-solcard__cta{
position:relative;z-index:1;
display:inline-flex;align-items:center;gap:8px;
font-size:13.5px;font-weight:700;
color:var(--c-primary);letter-spacing:.01em;
margin-top:auto;
transition:gap .25s ease;
}
.dyr-solcard__cta i{font-size:11px;transition:transform .25s ease}
.dyr-solcard:hover .dyr-solcard__cta{gap:12px}
.dyr-solcard:hover .dyr-solcard__cta i{transform:translateX(3px)}
/* MORE CARD (상담 신청) — 그라데이션 풀카드 */
.dyr-solcard--more{
grid-template-columns:1fr;
background:
radial-gradient(circle at 100% 0%, rgba(96,165,250,.18) 0%, transparent 55%),
radial-gradient(circle at 0% 100%, rgba(28,90,220,.12) 0%, transparent 50%),
linear-gradient(135deg, #0b1c3d 0%, #1b3a6b 100%);
color:#fff;border-color:transparent;cursor:default;overflow:hidden;
}
.dyr-solcard--more:hover{transform:none;box-shadow:0 28px 60px -28px rgba(11,28,61,.5)}
.dyr-solcard__more-inner{
position:relative;z-index:1;
padding:40px 36px;
display:flex;flex-direction:column;justify-content:center;gap:14px;height:100%;
}
.dyr-solcard__more-ico{
width:54px;height:54px;border-radius:14px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;
font-size:22px;color:#fff;
margin-bottom:6px;
}
.dyr-solcard--more .dyr-solcard__tag{
color:rgba(255,255,255,.85);
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.18);
}
.dyr-solcard--more .dyr-solcard__title{color:#fff;font-size:24px}
.dyr-solcard--more .dyr-solcard__desc{color:rgba(255,255,255,.78)}
.dyr-solcard__more-btn{
display:inline-flex;align-items:center;gap:9px;width:fit-content;
padding:12px 22px;border-radius:999px;
background:#fff;color:var(--c-text);text-decoration:none;
font-size:13.5px;font-weight:700;letter-spacing:.01em;
margin-top:8px;
transition:transform .2s ease, box-shadow .2s ease;
}
.dyr-solcard__more-btn i{font-size:11px;color:var(--c-primary);transition:transform .2s ease}
.dyr-solcard__more-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px -18px rgba(0,0,0,.35);
}
.dyr-solcard__more-btn:hover i{transform:translateX(3px)}
@media (max-width:880px){
.dyr-grid--solutions{grid-template-columns:1fr}
.dyr-solcard,.dyr-solcard:nth-child(even){grid-template-columns:1fr}
.dyr-solcard__media{min-height:200px;aspect-ratio:16/9}
.dyr-solcard:nth-child(even) .dyr-solcard__media{order:0}
.dyr-solcard:nth-child(even) .dyr-solcard__body{order:1}
.dyr-solcard__body{padding:28px 24px}
.dyr-solcard__bignum{font-size:160px;right:-10px;bottom:-22px}
}
/* ============================================================
SOLUTIONS 섹션 모바일 — 카드 포맷 유지 + 사진 비율 4:3 (더 길게)
+ shop/support/about 와 통일된 컴팩트 baseline
※ .dyr-solutions 는 index.php "맞춤 솔루션" 섹션 + solution.php 본문
양쪽에 공유되는 wrapper 클래스 → 이 셀렉터 하나로 양 페이지 동시 적용
============================================================ */
@media (max-width:640px){
/* 섹션 상하/좌우 — .dyr-solutions.dyr-section (0,2,0) 으로 글로벌 .dyr-section (0,1,0) 이김 */
.dyr-solutions.dyr-section{padding:32px 0;}
.dyr-solutions .dyr-section__inner{padding:0 12px;}
.dyr-solutions .dyr-section__head{margin-bottom:24px;}
.dyr-solutions .dyr-section__title{font-size:22px;line-height:1.25;letter-spacing:-.02em;}
.dyr-solutions .dyr-section__eyebrow{font-size:10.5px;letter-spacing:.18em;margin-bottom:8px;}
.dyr-solutions .dyr-section__desc{
font-size:13px;line-height:1.55;word-break:keep-all;
}
/* desc 의
무력화 — 자연스러운 reflow */
.dyr-solutions .dyr-section__head .dyr-section__desc br{display:none;}
/* 솔루션 그리드 — 카드 간 간격 축소 */
.dyr-grid--solutions{gap:14px;}
/* 솔루션 카드 — 1열 stacked (880 룰 상속) + 컴팩트화 */
.dyr-solcard{
min-height:0;border-radius:14px;
}
/* 사진 — 16:9 → 4:3 (가로형 유지하되 ~33% 더 높음) */
.dyr-solcard__media{
min-height:0;aspect-ratio:4/3;
}
/* 사진 위 NUM 뱃지 */
.dyr-solcard__num{
top:14px;left:14px;font-size:11.5px;padding:5px 10px;letter-spacing:.14em;
}
/* BODY padding */
.dyr-solcard__body{
padding:20px 18px 22px;gap:8px;
}
/* BIGNUM 워터마크 — 카드 좁아진 만큼 비례 축소 */
.dyr-solcard__bignum{
font-size:120px;right:-6px;bottom:-14px;
}
.dyr-solcard__tag{
font-size:10px;letter-spacing:.18em;padding:4px 9px;
}
.dyr-solcard__title{
font-size:19px;line-height:1.3;margin:4px 0 6px;
}
.dyr-solcard__desc{
font-size:13px;line-height:1.6;margin:0 0 12px;
}
.dyr-solcard__cta{
font-size:12.5px;gap:6px;
}
.dyr-solcard__cta i{font-size:10px;}
/* MORE 카드 (상담 신청 풀카드) */
.dyr-solcard__more-inner{padding:24px 20px;gap:10px;}
.dyr-solcard__more-ico{
width:42px;height:42px;font-size:18px;border-radius:11px;
}
.dyr-solcard--more .dyr-solcard__title{font-size:19px;}
.dyr-solcard__more-btn{
padding:10px 18px;font-size:12.5px;gap:7px;
}
/* 하단 CTA */
[data-page="solution"] .dyr-cta{padding:32px 0;}
[data-page="solution"] .dyr-cta .dyr-section__title br{display:none;}
/* ============================================================
PRODUCTS 섹션 (index "제품 라인업") — 솔루션과 동일한 컴팩트 baseline
※ .dyr-products 는 index 의 제품 라인업 섹션 wrapper
============================================================ */
.dyr-products.dyr-section{padding:32px 0;}
.dyr-products .dyr-section__inner{padding:0 12px;}
.dyr-products .dyr-section__head{margin-bottom:24px;}
.dyr-products .dyr-section__title{font-size:22px;line-height:1.25;letter-spacing:-.02em;}
.dyr-products .dyr-section__eyebrow{font-size:10.5px;letter-spacing:.18em;margin-bottom:8px;}
.dyr-products .dyr-section__desc{font-size:13px;line-height:1.55;word-break:keep-all;}
.dyr-products .dyr-section__head .dyr-section__desc br{display:none;}
/* 제품 카드 그리드 — 기존 2열 유지 + gap 축소 */
.dyr-grid--products{gap:10px;}
/* 제품 카드 컴팩트 */
.dyr-prod{border-radius:10px;}
.dyr-prod__media{aspect-ratio:4/3;}
.dyr-prod__body{padding:12px 12px 14px;}
.dyr-prod__tag{
font-size:9.5px;letter-spacing:.14em;margin-bottom:5px;
}
.dyr-prod__body h3{
font-size:14px;line-height:1.3;margin-bottom:4px;letter-spacing:-.01em;
}
.dyr-prod__body p{
font-size:11.5px;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
}
.dyr-card{
position:relative;
background:#fff;
border-radius:var(--r-md);
overflow:hidden;
border:1px solid var(--c-line);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.dyr-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.dyr-card__media{
height:200px;
background-size:cover;background-position:center;
background-color:#e6e8ee;
position:relative;
transition:transform .6s var(--ease);
}
.dyr-card:hover .dyr-card__media{transform:scale(1.04)}
.dyr-card__media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(11,18,32,.45) 100%);
}
.dyr-card__body{padding:26px}
.dyr-card__body--center{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;height:100%}
.dyr-card__num{
display:inline-block;
font-size:11px;font-weight:700;
letter-spacing:.2em;color:var(--c-primary-2);
margin-bottom:10px;
}
.dyr-card__title{
font-size:19px;font-weight:700;
margin-bottom:10px;color:var(--c-text);
letter-spacing:-.01em;
}
.dyr-card__desc{
font-size:14px;color:var(--c-text-soft);line-height:1.65;margin-bottom:16px;
}
.dyr-card__link{
font-size:13px;font-weight:600;color:var(--c-primary);
}
.dyr-card__link:hover{color:var(--c-primary-2)}
.dyr-card--more{
background:linear-gradient(135deg,#f5f6f8,#eaeef5);
border:1px dashed #c8d1e0;
display:flex;align-items:center;
min-height:340px;
}
.dyr-card--more:hover{box-shadow:none;transform:none;border-color:var(--c-primary)}
/* =================================================================
PRODUCTS
================================================================= */
.dyr-products{background:var(--c-bg-alt)}
.dyr-grid--products{grid-template-columns:repeat(4,1fr);gap:24px}
.dyr-prod{
background:#fff;border-radius:var(--r-md);overflow:hidden;
border:1px solid var(--c-line);
transition:all .3s var(--ease);
display:flex;flex-direction:column;
}
.dyr-prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.dyr-prod__media{
aspect-ratio:4/3;
background-size:cover;background-position:center;
background-color:#e6e8ee;
transition:transform .6s var(--ease);
}
.dyr-prod:hover .dyr-prod__media{transform:scale(1.05)}
.dyr-prod__body{padding:22px;flex:1;display:flex;flex-direction:column}
.dyr-prod__tag{
font-size:11px;font-weight:700;letter-spacing:.16em;
color:var(--c-primary-2);margin-bottom:10px;
}
.dyr-prod__body h3{
font-size:17px;font-weight:700;margin-bottom:8px;color:var(--c-text);
}
.dyr-prod__body p{
font-size:13.5px;color:var(--c-text-soft);line-height:1.6;
}
/* =================================================================
GLOBAL — enhanced (hero + stats + regions + featured)
================================================================= */
.dyr-global{
position:relative;background:var(--c-bg-dark);color:#fff;
overflow:hidden;padding-top:120px;padding-bottom:120px;
}
/* 배경 — 우주에서 본 지구 사진 + 다크 베일 */
.dyr-global__bg{
position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.dyr-global__photo{
position:absolute;inset:0;
background-image:url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=2400&q=85&auto=format&fit=crop');
background-size:cover;background-position:center;
filter:saturate(1.05) contrast(1.05);
animation:dyrGlobalDrift 60s ease-in-out infinite alternate;
}
@keyframes dyrGlobalDrift{
0% {transform:scale(1.05) translate(0,0)}
100% {transform:scale(1.10) translate(-1%, -1%)}
}
.dyr-global__veil{
position:absolute;inset:0;
background:
radial-gradient(ellipse 90% 75% at 50% 45%, transparent 0%, rgba(8,18,40,.55) 60%, rgba(8,18,40,.92) 100%),
linear-gradient(180deg, rgba(8,18,40,.65) 0%, rgba(8,18,40,.55) 50%, rgba(8,18,40,.85) 100%);
}
.dyr-global__inner{
position:relative;z-index:1;
display:flex;flex-direction:column;gap:80px;
}
/* HERO 영역 */
.dyr-global__head{text-align:center;max-width:820px;margin:0 auto}
.dyr-global__head .dyr-section__title{margin-top:20px}
.dyr-global__head .dyr-section__title em{
font-style:normal;color:var(--c-accent);
background:linear-gradient(120deg, var(--c-accent) 0%, #e8d4a1 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dyr-section__eyebrow--accent{color:var(--c-accent) !important;opacity:1 !important}
/* STATS — 큰 카운터 카드 4개 (한 행 유지) */
.dyr-global__stats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.dyr-stat{
position:relative;
padding:32px 22px;min-width:0;
background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border:1px solid rgba(255,255,255,.1);
border-radius:16px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:all .3s var(--ease);
}
.dyr-stat:hover{
transform:translateY(-4px);
border-color:rgba(200,164,100,.4);
background:linear-gradient(180deg, rgba(200,164,100,.08) 0%, rgba(255,255,255,.02) 100%);
}
.dyr-stat__num{
display:flex;align-items:baseline;gap:4px;line-height:1;
margin-bottom:18px;
}
.dyr-stat__big{
font-size:56px;font-weight:800;letter-spacing:-.04em;
background:linear-gradient(180deg, #fff 0%, #c8a464 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dyr-stat__big-text{
font-size:36px;font-weight:800;letter-spacing:-.02em;
background:linear-gradient(180deg, #fff 0%, #c8a464 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.dyr-stat__plus{
font-size:28px;font-weight:700;color:var(--c-accent);letter-spacing:-.02em;
}
.dyr-stat__label{
font-size:15px;font-weight:700;color:#fff;
margin-bottom:4px;letter-spacing:-.01em;
}
.dyr-stat__sub{
font-size:12.5px;color:rgba(255,255,255,.55);
letter-spacing:.02em;line-height:1.5;
}
/* REGIONAL PARTNERS */
.dyr-global__regions-head{text-align:center;margin-bottom:36px}
.dyr-global__regions-title{
font-size:28px;font-weight:700;color:#fff;
margin-top:14px;letter-spacing:-.02em;
}
.dyr-global__region-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.dyr-region{
padding:28px 24px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
transition:all .25s var(--ease);
}
.dyr-region:hover{
border-color:rgba(200,164,100,.35);
background:rgba(255,255,255,.06);
transform:translateY(-3px);
}
.dyr-region__head{
display:flex;align-items:center;gap:14px;
padding-bottom:18px;margin-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.dyr-region__icon{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;flex-shrink:0;
background:linear-gradient(135deg, rgba(200,164,100,.25), rgba(200,164,100,.05));
border:1px solid rgba(200,164,100,.3);
border-radius:10px;
font-size:13px;font-weight:800;letter-spacing:.05em;
color:var(--c-accent);
}
.dyr-region__continent{
font-size:12px;font-weight:700;color:var(--c-accent);
letter-spacing:.14em;margin:0 0 4px;
}
.dyr-region__count{
font-size:12.5px;color:rgba(255,255,255,.6);margin:0;
}
.dyr-region__list{display:flex;flex-direction:column;gap:10px}
.dyr-region__list li{
font-size:13.5px;color:rgba(255,255,255,.85);
padding-left:14px;position:relative;line-height:1.5;
}
.dyr-region__list li::before{
content:'';position:absolute;left:0;top:10px;
width:6px;height:1px;background:rgba(200,164,100,.7);
}
.dyr-region__list li strong{
color:#fff;font-weight:700;display:block;
}
.dyr-region__list li small{
display:block;font-size:11px;color:rgba(200,164,100,.7);
margin-top:2px;letter-spacing:.02em;
}
/* FEATURED PARTNERSHIP (Jakob AG) */
.dyr-global__featured{
display:grid;grid-template-columns:1.4fr 1fr;gap:48px;
align-items:center;
padding:48px 56px;
background:
linear-gradient(135deg, rgba(200,164,100,.12) 0%, rgba(46,90,164,.08) 100%);
border:1px solid rgba(200,164,100,.25);
border-radius:20px;
position:relative;overflow:hidden;
}
.dyr-global__featured::before{
content:'';position:absolute;
top:-50%;right:-20%;width:600px;height:600px;
background:radial-gradient(circle, rgba(200,164,100,.15) 0%, transparent 60%);
pointer-events:none;
}
.dyr-global__featured-eyebrow{
display:inline-block;
font-size:11px;font-weight:800;letter-spacing:.22em;
color:var(--c-accent);
padding:6px 12px;
background:rgba(200,164,100,.12);
border:1px solid rgba(200,164,100,.3);
border-radius:999px;
margin-bottom:18px;
}
.dyr-global__featured-title{
font-size:32px;font-weight:700;color:#fff;letter-spacing:-.02em;
margin:0 0 14px;line-height:1.2;
}
.dyr-global__featured-title em{
font-style:normal;color:var(--c-accent);
}
.dyr-global__featured-desc{
font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.75);
margin:0;
}
.dyr-global__featured-right{
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
position:relative;z-index:1;
}
.dyr-global__featured-stat{
text-align:center;
padding:20px 8px;
background:rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
}
.dyr-global__featured-stat strong{
display:block;font-size:24px;font-weight:800;color:var(--c-accent);
letter-spacing:-.02em;margin-bottom:4px;
}
.dyr-global__featured-stat span{
display:block;font-size:10.5px;font-weight:700;
color:rgba(255,255,255,.55);letter-spacing:.15em;
}
/* 반응형 */
@media (max-width:1080px){
.dyr-global__stats{gap:12px}
.dyr-stat{padding:24px 16px}
.dyr-stat__big{font-size:42px}
.dyr-stat__big-text{font-size:26px}
.dyr-stat__label{font-size:13.5px}
.dyr-stat__sub{font-size:11.5px}
.dyr-global__region-grid{grid-template-columns:repeat(2,1fr)}
.dyr-global__featured{grid-template-columns:1fr;gap:32px;padding:40px 32px}
.dyr-global__featured-right{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
.dyr-global__stats{grid-template-columns:repeat(2,1fr);gap:14px}
.dyr-stat{padding:28px 20px}
.dyr-stat__big{font-size:48px}
}
@media (max-width:480px){
.dyr-global{padding-top:80px;padding-bottom:80px}
.dyr-global__inner{gap:56px}
.dyr-global__stats,
.dyr-global__region-grid{grid-template-columns:1fr}
.dyr-stat__big{font-size:44px}
.dyr-global__featured-title{font-size:24px}
.dyr-global__featured-right{grid-template-columns:1fr}
}
/* =================================================================
PROJECTS
================================================================= */
/* 가로 워터마크는 body 의 overflow-x 가 처리. 세로는 visible 로 두어 카드 호버 그림자가 보이도록. */
.dyr-projects{
background:var(--c-bg);
position:relative;
overflow:visible;
z-index:2; /* 다음 어두운 섹션 위로 stacking — 호버 그림자가 가려지지 않게 */
}
/* 배경 워터마크 PROJECTS 텍스트 — 다채로운 옅은 그라데이션 */
.dyr-projects__bgmark{
position:absolute;top:48px;left:50%;transform:translateX(-50%);
font-size:clamp(120px, 18vw, 240px);font-weight:900;
letter-spacing:-.04em;
/* 다체로운 그라데이션 — background-clip:text 로 글자 안만 채움 */
background:linear-gradient(
100deg,
rgba(255, 120, 150, .07) 0%,
rgba(255, 200, 100, .07) 22%,
rgba(160, 220, 120, .07) 44%,
rgba(100, 200, 230, .07) 66%,
rgba(170, 130, 230, .07) 88%,
rgba(255, 120, 180, .07) 100%
);
-webkit-background-clip:text;background-clip:text;
color:transparent;
/* 스트로크 더 옅게 */
-webkit-text-stroke:1px rgba(11,18,32,.03);
pointer-events:none;user-select:none;
white-space:nowrap;line-height:1;z-index:0;
}
.dyr-projects > .dyr-section__inner{position:relative;z-index:1;}
/* SECTION HEAD — 가운데 정렬 eyebrow + 라인 */
.dyr-section__eyebrow--center{
display:flex;align-items:center;justify-content:center;
gap:14px;
}
.dyr-section__eyebrow-line{
width:36px;height:1px;background:var(--c-accent);display:inline-block;opacity:.7;
}
.dyr-section__head--pj{margin-bottom:56px;}
.dyr-section__head--pj .dyr-section__title{
position:relative;padding-bottom:18px;
}
.dyr-section__head--pj .dyr-section__title::after{
content:'';position:absolute;left:50%;bottom:0;
width:48px;height:3px;border-radius:2px;
background:linear-gradient(90deg, var(--c-accent), rgba(200,164,100,.3));
transform:translateX(-50%);
}
/* 헤더 + DRAG 힌트 */
.dyr-projects__head{
display:flex;justify-content:space-between;align-items:flex-end;
gap:32px;
}
.dyr-projects__hint{
font-size:11.5px;font-weight:700;letter-spacing:.25em;
color:var(--c-text-muted);
padding:8px 14px;border:1px solid var(--c-line);
border-radius:999px;white-space:nowrap;
animation:dragHint 2.4s ease-in-out infinite;
}
@keyframes dragHint{
0%,100%{transform:translateX(0);opacity:.7}
50%{transform:translateX(8px);opacity:1}
}
/* 뷰포트 — 양쪽 풀블리드 (화면 가장자리까지 트랙 확장) */
.dyr-projects__viewport{
--bleed-side: max(0px, calc(50vw - var(--container) / 2));
position:relative;
margin-top:48px;
margin-left: calc(-1 * var(--bleed-side));
margin-right: calc(-1 * var(--bleed-side));
}
/* Swiper 컨테이너 — padding 으로 첫 슬라이드가 컨테이너 좌측 모서리에서 시작
세로 padding 은 카드 호버 시 lift + shadow 가 잘리지 않도록 충분히 확보
(34px 빈공간 + hover translateY(-6px) + box-shadow(~50px blur) 모두 수용)
※ overflow:visible !important — Swiper.js 기본 CSS 의 `.swiper{overflow:hidden}` 을 무력화.
이 캐러셀은 Swiper.js 안 쓰고 직접 구현했는데 클래스명만 .swiper 라서 라이브러리 CSS 가 먹혀
카드 위·아래가 잘리던 문제 해결. 가로 off-screen 슬라이드는 body 의 overflow-x:hidden 이 처리. */
.dyr-projects-swiper{
padding-top: 34px;
padding-bottom: 34px;
padding-left: var(--bleed-side);
padding-right: var(--bleed-side);
overflow: visible !important;
}
/* ──────────────────────────────────────────────────────────────
대표 프로젝트 카드 — Jakob 스타일 (3카드 동일 사이즈 + 깔끔한 매거진 카드)
슬라이드 = 카드 1장 단위, 양옆 peek 없음, scale/opacity transition 없음
────────────────────────────────────────────────────────────── */
/* swiper-wrapper 가 flex 컨테이너 — 슬라이드를 동일 높이로 stretch (본문 없어도 카드 풀높이 보장) */
.dyr-projects-swiper .swiper-wrapper{
align-items: stretch !important;
}
.dyr-projects-swiper .swiper-slide{
width:440px;
flex-shrink:0;
height:auto; /* stretch 가 적용되도록 fixed height X */
display:flex; /* 내부 카드가 100% 채우도록 */
transform:none;
opacity:1;
transition:none;
}
.dyr-projects-swiper .swiper-slide .dyr-pjcard{
width:100%;
flex:1; /* 슬라이드 stretch 높이를 카드가 다 차지 */
}
@media (max-width: 1100px){
.dyr-projects-swiper .swiper-slide{width:380px}
}
@media (max-width: 760px){
.dyr-projects-swiper .swiper-slide{width:clamp(280px, 86vw, 360px)}
}
/* ───── 카드 본체 — 매거진 스타일 (white / 정교한 보더 / 깊은 호버) ───── */
.dyr-pjcard{
position:relative;display:flex;flex-direction:column;
background:#fff;
border:1px solid #e7eaf0;
border-radius:14px;
overflow:hidden;
text-decoration:none;color:inherit;
transition:
transform .35s var(--ease,ease),
box-shadow .35s var(--ease,ease),
border-color .35s var(--ease,ease);
will-change:transform;
}
.dyr-pjcard:hover{
transform:translateY(-6px);
border-color:#cfd6e3;
box-shadow:
0 28px 60px -22px rgba(11,28,61,.22),
0 10px 22px -12px rgba(11,28,61,.10);
}
/* ───── 이미지 영역 ───── */
.dyr-pjcard__media{
position:relative;display:block;
aspect-ratio:4/3;
overflow:hidden;
background:#e9ecf2;
text-decoration:none;
}
.dyr-pjcard__media-img,
.dyr-pjcard__media-video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:block;
transition:transform .8s var(--ease,ease), filter .35s var(--ease,ease);
}
.dyr-pjcard:hover .dyr-pjcard__media-img,
.dyr-pjcard:hover .dyr-pjcard__media-video{
transform:scale(1.06);
}
/* 비디오 카드(VIEW ALL) — 컨텐츠 영역 안 비디오는 객체 fit */
.dyr-pjcard--video .dyr-pjcard__media{background:#0b1220}
/* ───── 본문 영역 ───── */
.dyr-pjcard__body{
display:flex;flex-direction:column;gap:14px;
padding:24px 26px 26px;
flex:1;
}
/* 메타 — 카테고리 + 위치 (작은 라벨 줄) */
.dyr-pjcard__meta{
display:flex;align-items:center;gap:10px;
font-family:'Inter','Noto Sans KR',sans-serif;
font-size:11px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
color:#6b7689;
}
.dyr-pjcard__cat{
display:inline-flex;align-items:center;
padding:4px 10px;border-radius:999px;
background:rgba(27,58,107,.08);
color:#1b3a6b;
letter-spacing:.12em;
}
.dyr-pjcard__loc{
display:inline-flex;align-items:center;gap:6px;
letter-spacing:.08em;
}
.dyr-pjcard__loc i{font-size:9.5px;color:#94a3b8}
/* 날짜 */
.dyr-pjcard__date{
font-size:12.5px;
color:#8590a3;
letter-spacing:.02em;
margin-top:-4px; /* meta 와의 간격 살짝 */
}
/* 제목 — 매거진 느낌 */
.dyr-pjcard__title{
margin:0;
font-family:'Noto Sans KR','Inter',sans-serif;
font-size:21px;font-weight:800;line-height:1.32;
letter-spacing:-.02em;
color:#0b1c3d;
/* 2 줄 클램프 */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(21px * 1.32 * 2);
}
/* 본문 미리보기 */
.dyr-pjcard__excerpt{
margin:0;
font-size:14px;line-height:1.62;color:#54607a;
letter-spacing:-.005em;
/* 3 줄 클램프 */
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;
}
/* CTA — 라이트한 outlined 버튼 (저보헬바 카드 하단) */
.dyr-pjcard__cta{
margin-top:auto; /* 본문이 짧아도 항상 하단 정렬 */
align-self:flex-start;
display:inline-flex;align-items:center;gap:8px;
padding:11px 22px;
border:1.5px solid #1b3a6b;
border-radius:8px;
background:transparent;
color:#1b3a6b;
font-family:'Inter','Noto Sans KR',sans-serif;
font-size:13px;font-weight:700;letter-spacing:.02em;
text-decoration:none;
transition:background .25s var(--ease,ease), color .25s var(--ease,ease), gap .25s var(--ease,ease);
}
.dyr-pjcard__cta i{
font-size:11px;
transition:transform .25s var(--ease,ease);
}
.dyr-pjcard:hover .dyr-pjcard__cta{
background:#1b3a6b;color:#fff;gap:12px;
}
.dyr-pjcard:hover .dyr-pjcard__cta i{
transform:translateX(3px);
}
/* ───── VIEW ALL (마지막) 카드 — 동일 구조, 약간 다른 톤 ───── */
.dyr-pjcard--more{
background:linear-gradient(165deg, #f6f8fc 0%, #ffffff 60%);
}
.dyr-pjcard--more .dyr-pjcard__cat{
background:#1b3a6b;color:#fff;
}
/* 모바일 — 패딩 축소 */
@media (max-width: 760px){
.dyr-pjcard__body{padding:20px 22px 22px;gap:12px}
.dyr-pjcard__title{font-size:18px;min-height:calc(18px * 1.32 * 2)}
.dyr-pjcard__excerpt{font-size:13px}
}
/* 사진 위에 떠있는 다음 버튼 (>>) */
/* 좌·우 네비 공통 */
.dyr-projects__nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:64px;height:64px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.95);
color:#0b1c3d;
border:0;cursor:pointer;
box-shadow:0 18px 40px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.04);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s ease;
z-index:10;
}
.dyr-projects__nav--prev{left: calc(var(--bleed-side) - 32px)}
.dyr-projects__nav--next{right: calc(var(--bleed-side) - 32px)}
.dyr-projects__nav i{font-size:18px;line-height:1;}
.dyr-projects__nav::before{
content:'';position:absolute;inset:-2px;border-radius:50%;
background:conic-gradient(from 0deg, transparent 70%, var(--c-accent) 95%, transparent 100%);
opacity:0;transition:opacity .35s var(--ease);
z-index:-1;
}
.dyr-projects__nav:hover{
background:#fff;
color:var(--c-primary);
box-shadow:0 22px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06);
}
.dyr-projects__nav:hover::before{opacity:.7;animation:dyrNavRing 2s linear infinite;}
@keyframes dyrNavRing{
to{transform:rotate(360deg);}
}
.dyr-projects__nav--prev:hover{transform:translateY(-50%) translateX(-6px)}
.dyr-projects__nav--next:hover{transform:translateY(-50%) translateX(6px)}
.dyr-projects__nav--prev:active{transform:translateY(-50%) translateX(-2px) scale(.96)}
.dyr-projects__nav--next:active{transform:translateY(-50%) translateX(2px) scale(.96)}
.dyr-projects__nav.is-off{opacity:0;pointer-events:none;transform:translateY(-50%) scale(.85)}
.dyr-projects__nav svg{display:block}
/* 카드 우상단 🔍 확대 버튼 */
.dyr-project{position:relative}
.dyr-project__zoom{
position:absolute;top:14px;right:14px;z-index:5;
width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.92);border:0;color:#0b1c3d;cursor:pointer;
display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(-4px);
transition:opacity .2s ease, transform .2s ease, background .15s ease, box-shadow .15s ease;
box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.dyr-project__zoom svg{width:18px;height:18px}
.dyr-project:hover .dyr-project__zoom{opacity:1;transform:translateY(0)}
.dyr-project__zoom:hover{background:#fff;transform:translateY(0) scale(1.06);box-shadow:0 10px 22px rgba(0,0,0,.22)}
/* 좌우 스크롤 hint (첫 진입 시 표시) */
.dyr-projects__hint{
position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
display:inline-flex;align-items:center;gap:8px;
padding:8px 18px;background:rgba(11,28,61,.92);color:#fff;
border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;
white-space:nowrap;pointer-events:none;z-index:6;
box-shadow:0 8px 22px rgba(11,28,61,.25);
animation:dyr-projects-hint-pulse 1.8s ease-in-out infinite;
transition:opacity .35s ease, transform .35s ease;
}
.dyr-projects__hint svg{width:14px;height:14px}
.dyr-projects__hint.is-gone{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none}
@keyframes dyr-projects-hint-pulse{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-3px)}
}
/* 도트 페이지네이션 + 키보드 안내 */
.dyr-projects__pager{
display:flex;align-items:center;justify-content:center;gap:24px;
margin-top:36px;flex-wrap:wrap;
}
.dyr-projects__dots{display:flex;align-items:center;gap:6px}
.dyr-projects__dot{
width:9px;height:9px;border-radius:50%;padding:0;
background:#cfd6e0;border:0;cursor:pointer;
transition:background .2s ease, transform .2s ease, width .2s ease;
}
.dyr-projects__dot:hover{background:#94a3b8;transform:scale(1.15)}
.dyr-projects__dot.is-active{background:#1b3a6b;width:28px;border-radius:6px}
.dyr-projects__kbd{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:#8590a6;font-weight:500;letter-spacing:-.01em;
}
.dyr-projects__kbd kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 5px;
background:#fff;border:1px solid #d0d7de;border-bottom-width:2px;
border-radius:5px;color:#0b1c3d;font-family:'Inter',sans-serif;
font-size:11.5px;font-weight:700;line-height:1;
}
@media (max-width: 640px){
.dyr-projects__pager{gap:12px;margin-top:24px;flex-direction:column}
.dyr-projects__kbd{display:none} /* 모바일에선 키보드 안내 숨김 */
}
.dyr-projects__scroll::-webkit-scrollbar{display:none}
.dyr-projects__scroll.is-dragging{cursor:grabbing}
.dyr-projects__scroll.is-dragging .dyr-project{pointer-events:none}
.dyr-projects__scroll .dyr-project{
flex:0 0 440px;width:440px;height:360px;
scroll-snap-align:start;
border-radius:18px;
/* 컨테이너 바깥 풀블리드 영역의 카드는 어둡게, 안쪽에 들어온 카드만 밝게 */
opacity:.32;
transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.dyr-projects__scroll .dyr-project.is-in{
opacity:1;
}
.dyr-projects__scroll .dyr-project img,
.dyr-projects__scroll .dyr-project .dyr-project__media{pointer-events:none}
/* VIEW ALL 카드 — 리디자인 (다른 카드와 동일 사이즈) */
.dyr-project--more{
background:linear-gradient(135deg,#1b3a6b 0%,#0b1220 100%);
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;
}
.dyr-project--more::after{display:none !important}
/* 회전 글로우 배경 */
.dyr-project__more-glow{
position:absolute;inset:-20%;z-index:0;pointer-events:none;
background:
radial-gradient(circle at 30% 30%, rgba(200,164,100,.28) 0%, transparent 38%),
radial-gradient(circle at 70% 70%, rgba(46,90,164,.4) 0%, transparent 42%);
animation:dyrMoreGlow 12s linear infinite;
}
@keyframes dyrMoreGlow{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.dyr-project__more{
position:relative;z-index:1;
text-align:center;color:#fff;padding:32px;
display:flex;flex-direction:column;align-items:center;gap:18px;
}
.dyr-project__more-ico{
width:72px;height:72px;display:grid;place-items:center;border-radius:18px;
background:linear-gradient(135deg, rgba(200,164,100,.22), rgba(200,164,100,.06));
border:1px solid rgba(200,164,100,.35);
color:var(--c-accent);font-size:28px;
transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.dyr-project__more > span:not(.dyr-project__more-ico):not(.dyr-project__more-arrow){
font-size:11px;font-weight:700;letter-spacing:.32em;
color:var(--c-accent);
}
.dyr-project__more h3{
font-size:22px;font-weight:700;line-height:1.35;
margin:0;letter-spacing:-.01em;
}
.dyr-project__more-arrow{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);
color:#fff;font-size:14px;
transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.dyr-project--more:hover .dyr-project__more-ico{
transform:scale(1.06) rotate(-4deg);
border-color:var(--c-accent);
}
.dyr-project--more:hover .dyr-project__more-arrow{
background:var(--c-accent);border-color:var(--c-accent);color:#0b1220;
transform:translateX(4px);
}
.dyr-project{
position:relative;overflow:hidden;border-radius:var(--r-md);
background:#000;
border:1px solid var(--c-line);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.dyr-project:hover{
transform:translateY(-4px);
box-shadow:0 22px 50px rgba(11,18,32,.16);
border-color:rgba(200,164,100,.4);
}
.dyr-project__media{
position:absolute;inset:0;
background-size:cover;background-position:center;
background-color:#0b1220;
transition:transform .6s var(--ease);
}
.dyr-project:hover .dyr-project__media{transform:scale(1.04);}
/* VIEW ALL — 비디오 배경 (다른 카드와 동일 구조: media + meta 박스) */
.dyr-project__media--video{overflow:hidden;background:#0b1220;}
.dyr-project__media--video video{
width:100%;height:100%;object-fit:cover;display:block;
pointer-events:none;
}
/* 좌상단/우하단 골드 코너 액센트 */
.dyr-project__corner{
position:absolute;width:22px;height:22px;z-index:2;
border-style:solid;border-color:var(--c-accent);
opacity:0;transition:opacity .35s var(--ease), transform .35s var(--ease);
pointer-events:none;
}
.dyr-project__corner--tl{
top:10px;left:10px;border-width:2px 0 0 2px;transform:translate(8px,8px);
}
.dyr-project__corner--br{
bottom:10px;right:10px;border-width:0 2px 2px 0;transform:translate(-8px,-8px);
}
.dyr-project:hover .dyr-project__corner{opacity:.9;transform:translate(0,0);}
/* 하단 화이트 풋터 바 — 카드 내부 absolute */
.dyr-project__meta{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:16px 20px 18px;
background:#fff;
border-top:1px solid var(--c-line);
display:flex;flex-direction:column;gap:6px;
}
.dyr-project__loc{
display:inline-flex;align-items:center;gap:6px;
font-size:11px;font-weight:600;letter-spacing:.14em;
color:var(--c-primary-2,#2e5aa4);text-transform:uppercase;
}
.dyr-project__loc i{color:var(--c-accent);font-size:10px;}
.dyr-project__meta h3{
font-size:18.5px;font-weight:700;line-height:1.35;
letter-spacing:-.005em;
color:var(--c-text);
margin:0;
}
/* 본문 미리보기 — 100자 ... 처리 + 2줄 안전망 line-clamp */
.dyr-project__preview{
margin:6px 0 2px;
font-size:13px;line-height:1.55;
color:var(--c-text-soft, #54607a);
letter-spacing:-.005em;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:keep-all;
}
/* CTA */
.dyr-project__cta{
display:inline-flex;align-items:center;gap:8px;
margin-top:4px;
font-size:12.5px;font-weight:600;letter-spacing:.04em;
color:var(--c-accent);
}
.dyr-project__cta i{font-size:11px;transition:transform .3s var(--ease);}
.dyr-project:hover .dyr-project__cta i{transform:translateX(4px);}
/* =================================================================
SUPPORT
================================================================= */
.dyr-support{background:var(--c-bg-alt)}
.dyr-grid--support{grid-template-columns:repeat(4,1fr);gap:20px}
.dyr-support__item{
position:relative;
display:flex;flex-direction:column;
padding:36px 28px 32px;
min-height:280px;
border-radius:18px;
overflow:hidden;isolation:isolate;
text-decoration:none;color:#fff;
background:linear-gradient(135deg, #1b3a6b 0%, #0b1c3d 100%);
box-shadow:0 10px 28px rgba(11,28,61,.18);
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* 우측 상단 글로우 (호버 시 확대) */
.dyr-support__item::before{
content:'';position:absolute;
top:-40%;right:-30%;width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle, rgba(200,164,100,.32) 0%, transparent 70%);
filter:blur(8px);
transition:transform .5s var(--ease), opacity .35s var(--ease);
z-index:-1;opacity:.6;
}
.dyr-support__item:hover::before{transform:scale(1.25);opacity:1}
/* 좌하단 보조 글로우 */
.dyr-support__item::after{
content:'';position:absolute;
bottom:-50%;left:-25%;width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
z-index:-1;
}
/* 카드별 그라데이션 색조 */
.dyr-support__item--c1{background:linear-gradient(135deg, #1b3a6b 0%, #0b1c3d 100%)}
.dyr-support__item--c2{background:linear-gradient(135deg, #144d5a 0%, #082b35 100%)}
.dyr-support__item--c3{background:linear-gradient(135deg, #3c2f70 0%, #1c1644 100%)}
.dyr-support__item--c4{background:linear-gradient(135deg, #8a6730 0%, #4a3818 100%)}
.dyr-support__item--c4::before{background:radial-gradient(circle, rgba(255,228,170,.35) 0%, transparent 70%)}
.dyr-support__item:hover{
transform:translateY(-6px);
box-shadow:0 20px 44px rgba(11,28,61,.32);
}
/* 아이콘 */
.dyr-support__icon{
width:54px;height:54px;
display:flex;align-items:center;justify-content:center;
color:#fff;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.18);
border-radius:14px;
margin-bottom:auto;
backdrop-filter:blur(8px);
transition:transform .35s var(--ease), background .35s ease;
}
.dyr-support__item:hover .dyr-support__icon{
transform:translateY(-2px) rotate(-4deg);
background:rgba(255,255,255,.16);
}
.dyr-support__icon svg{width:24px;height:24px}
.dyr-support__item h3{
margin-top:32px;
font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;
}
.dyr-support__item p{
margin-top:8px;
font-size:13px;color:rgba(255,255,255,.7);line-height:1.55;
}
/* 우하단 화살표 */
.dyr-support__arrow{
position:absolute;right:24px;bottom:24px;
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
color:#fff;font-size:15px;font-weight:600;
transition:transform .3s var(--ease), background .3s ease;
}
.dyr-support__item:hover .dyr-support__arrow{
background:rgba(200,164,100,.95);
border-color:transparent;
color:#0b1c3d;
transform:translateX(4px);
}
/* =================================================================
CONTACT
================================================================= */
.dyr-contact{background:var(--c-bg)}
.dyr-contact__inner{
display:grid;grid-template-columns:1fr 1fr;gap:80px;
}
.dyr-contact__info{margin-top:36px}
.dyr-contact__info li{
padding:20px 0;
border-bottom:1px solid var(--c-line);
display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:start;
}
.dyr-contact__info li:last-child{border-bottom:0}
.dyr-contact__label{
font-size:12px;font-weight:700;letter-spacing:.1em;
color:var(--c-primary);text-transform:uppercase;
}
.dyr-contact__info p{font-size:14px;color:var(--c-text-soft);line-height:1.7}
.dyr-contact__form{
background:var(--c-bg-alt);
padding:40px;
border-radius:var(--r-lg);
display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.dyr-field{display:flex;flex-direction:column;gap:6px}
.dyr-field--full{grid-column:1/-1}
.dyr-field label{font-size:12.5px;font-weight:600;color:var(--c-text);letter-spacing:.02em}
.dyr-field input,
.dyr-field select,
.dyr-field textarea{
padding:12px 14px;
background:#fff;
border:1px solid var(--c-line);
border-radius:var(--r-sm);
font-family:inherit;
font-size:14px;color:var(--c-text);
transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dyr-field input:focus,
.dyr-field select:focus,
.dyr-field textarea:focus{
outline:0;
border-color:var(--c-primary);
box-shadow:0 0 0 3px rgba(27,58,107,.12);
}
.dyr-field textarea{resize:vertical;min-height:120px}
.dyr-contact__form .dyr-btn{grid-column:1/-1;margin-top:6px}
/* =================================================================
FOOTER
================================================================= */
.dyr-footer{
background:var(--c-bg-dark);
color:rgba(255,255,255,.7);
padding:80px 0 0;
}
.dyr-footer__inner{
max-width:var(--container);
margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:1fr 2fr;gap:80px;
padding-bottom:60px;
border-bottom:1px solid var(--c-line-dark);
}
.dyr-footer__brand p{margin-top:12px;font-size:13.5px;line-height:1.7}
.dyr-footer__tag{
margin-top:18px;
font-size:12.5px;color:rgba(255,255,255,.5);
letter-spacing:.02em;
}
.dyr-footer__cols{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.dyr-footer__cols h4{
font-size:13px;font-weight:700;letter-spacing:.1em;
color:#fff;margin-bottom:18px;text-transform:uppercase;
}
.dyr-footer__cols li{margin-bottom:10px;font-size:13px}
.dyr-footer__cols a{color:rgba(255,255,255,.6)}
.dyr-footer__cols a:hover{color:var(--c-accent)}
.dyr-footer__bottom{
max-width:var(--container);
margin:0 auto;padding:24px 32px;
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
font-size:12.5px;color:rgba(255,255,255,.4);
}
.dyr-footer__links{display:flex;gap:18px}
.dyr-footer__links a:hover{color:var(--c-accent)}
/* ---------- TO TOP ---------- */
.dyr-totop{
position:fixed;right:24px;bottom:24px;z-index:90;
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
background:var(--c-primary);color:#fff;
border-radius:50%;
font-size:18px;font-weight:700;
box-shadow:var(--shadow-md);
opacity:0;transform:translateY(10px);pointer-events:none;
transition:all .25s var(--ease);
}
.dyr-totop.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.dyr-totop:hover{background:var(--c-primary-2);transform:translateY(-3px)}
/* =================================================================
SUB-HERO (서브 페이지 상단 배너)
================================================================= */
.dyr-subhero{
position:relative;
padding:calc(var(--header-h) + 100px) 0 100px;
color:#fff;
overflow:hidden;
background:#0b1220;
}
.dyr-subhero__bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
opacity:.35;
}
/* 비디오 변형 — subhero 배경 자리에 풀블리드 영상 */
.dyr-subhero__video{
position:absolute; inset:0; z-index:0;
width:100%; height:100%;
object-fit:cover;
opacity:.45;
pointer-events:none;
}
.dyr-subhero::before{
content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(135deg, rgba(11,18,32,.85) 0%, rgba(27,58,107,.7) 100%);
}
.dyr-subhero__inner{
position:relative;z-index:2;
max-width:var(--container);margin:0 auto;padding:0 32px;
}
.dyr-subhero__crumb{
display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;
font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.6);
margin-bottom:18px;
word-break:keep-all;overflow-wrap:anywhere;
}
.dyr-subhero__crumb a:hover{color:var(--c-accent)}
.dyr-subhero__crumb span{color:rgba(255,255,255,.3)}
.dyr-subhero__title{
font-size:clamp(32px,4.2vw,52px);
font-weight:800;letter-spacing:-.02em;line-height:1.15;
margin-bottom:14px;
}
.dyr-subhero__desc{
font-size:17px;color:rgba(255,255,255,.78);
max-width:680px;line-height:1.7;
}
/* projects.php — 설명글 한 줄로 */
[data-page="projects"] .dyr-subhero__desc{
max-width:none;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
/* projects.php 모바일 — 지역 필터 숨김 + 섹션 상단 여백 축소 + 드랍다운 한 줄 */
@media (max-width: 640px){
[data-page="projects"] .dyr-fdrop[data-key="region"]{display:none;}
[data-page="projects"] .dyr-subhero + .dyr-section{padding-top:32px;}
/* desc — projects.php는 데스크탑에서 한 줄(nowrap) 처리되지만, 모바일은 글로벌 baseline에 맡김 */
[data-page="projects"] .dyr-subhero__desc{white-space:normal;}
/* 드랍다운 2개를 한 줄에 균등 배분 */
[data-page="projects"] .dyr-fdrops{
flex-wrap:nowrap;gap:6px;width:100%;
}
[data-page="projects"] .dyr-fdrops > .dyr-fdrop{
flex:1 1 0;min-width:0;
}
[data-page="projects"] .dyr-fdrops > .dyr-fdrop > .dyr-fdrop__btn{
padding:9px 12px;font-size:12.5px;gap:6px;
width:100%;justify-content:space-between;
}
[data-page="projects"] .dyr-fdrop__icon{font-size:11px;}
[data-page="projects"] .dyr-fdrop__label{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-page="projects"] .dyr-fdrop__caret{font-size:10px;}
/* 패널 — 뷰포트 안에 들어오도록 폭/위치 제어 */
[data-page="projects"] .dyr-fdrop__panel{
min-width:0;
width:max-content;
max-width:calc(100vw - 24px);
}
/* 제일 우측(제품군) 드랍다운은 패널을 우측 정렬 */
[data-page="projects"] .dyr-fdrop[data-key="prod"] .dyr-fdrop__panel{
left:auto;right:0;
}
}
/* sub-tabs (subnav) */
.dyr-subnav{
background:#fff;
border-bottom:1px solid var(--c-line);
position:sticky;top:var(--header-h);z-index:20;
}
.dyr-subnav__inner{
max-width:var(--container);
margin:0 auto;padding:0 32px;
display:flex;gap:6px;overflow-x:auto;
scrollbar-width:none;
}
.dyr-subnav__inner::-webkit-scrollbar{display:none}
.dyr-subnav__item{
display:inline-flex;align-items:center;
padding:18px 18px;
font-size:14px;font-weight:600;color:var(--c-text-soft);
white-space:nowrap;position:relative;
transition:color .2s var(--ease);
}
.dyr-subnav__item:hover{color:var(--c-primary)}
.dyr-subnav__item.is-active{color:var(--c-primary)}
.dyr-subnav__item.is-active::after{
content:'';position:absolute;left:18px;right:18px;bottom:0;
height:2px;background:var(--c-primary);
}
/* =================================================================
PAGE: ABOUT — OVERVIEW
================================================================= */
/* ─── STATS STRIP (about-overview 전용 — index .dyr-stat 와 격리) ─── */
.dyr-stats-strip{
background:linear-gradient(180deg,#f7f9fc 0%,#eef2f8 100%);
padding:48px 0;
border-bottom:1px solid #e6e8ee;
}
.dyr-stats-strip .dyr-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.dyr-stats-strip .dyr-stat{
position:relative;isolation:isolate;overflow:hidden;
padding:28px 26px 24px;
background:rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
border:1px solid rgba(255,255,255,.7);
border-radius:16px;
box-shadow:0 4px 14px rgba(11,28,61,.04);
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dyr-stats-strip .dyr-stat:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(11,28,61,.10);
}
.dyr-stats-strip .dyr-stat::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 100% 0%, var(--stat-color,#2e5aa4) 0%, transparent 55%);
opacity:.12;pointer-events:none;z-index:-1;
}
.dyr-stats-strip .dyr-stat__ic{
width:42px;height:42px;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.65);
border:1px solid rgba(255,255,255,.85);
color:var(--stat-color,#2e5aa4);
font-size:18px;margin-bottom:14px;
box-shadow:0 4px 10px rgba(11,28,61,.05);
}
.dyr-stats-strip .dyr-stat__num{
display:block;font-family:'Inter','Noto Sans KR',sans-serif;
font-size:30px;font-weight:800;letter-spacing:-.02em;
color:#0b1c3d;line-height:1.1;margin-bottom:6px;
white-space:nowrap;
}
.dyr-stats-strip .dyr-stat__num span{color:var(--stat-color,#2e5aa4);margin-left:1px}
.dyr-stats-strip .dyr-stat__label{
display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--stat-color,#2e5aa4);margin-bottom:6px;
}
.dyr-stats-strip .dyr-stat__sub{font-size:12.5px;color:#54607a;font-weight:500}
/* ─── CEO MESSAGE ────────────────────────────────────────── */
.dyr-ceo-section{padding-bottom:48px}
.dyr-ceo{
display:grid;grid-template-columns:0.95fr 1.05fr;gap:72px;
align-items:center;
}
.dyr-ceo__photo-wrap{position:relative}
.dyr-ceo__photo{
width:100%;height:auto;display:block;
aspect-ratio:2/3;object-fit:cover;object-position:center;
border-radius:18px;
background-size:cover;background-position:center;
background-color:#e6e8ee;
box-shadow:0 22px 50px rgba(11,28,61,.18), 0 6px 18px rgba(11,28,61,.08);
}
.dyr-ceo__photo-wrap::after{
content:'';position:absolute;right:-20px;bottom:-20px;
width:60%;height:60%;z-index:-1;
border:1px solid rgba(200,164,100,.4);
border-radius:18px;
}
.dyr-ceo__text{position:relative}
.dyr-ceo__qmark{
font-size:48px;color:var(--c-accent,#c8a464);opacity:.35;
margin-bottom:4px;display:block;
}
.dyr-ceo__quote{
font-size:clamp(24px,2.4vw,32px);font-weight:800;line-height:1.35;
color:#0b1c3d;margin:8px 0 30px;letter-spacing:-.02em;
}
.dyr-ceo__text p{font-size:15px;color:var(--c-text-soft);line-height:1.85;margin-bottom:14px}
.dyr-ceo__sign{
display:inline-flex;align-items:baseline;gap:14px;
margin-top:28px;padding:14px 22px;
background:#f6f9fd;border:1px solid #e3e8f1;border-radius:10px;
border-left:3px solid var(--c-primary);
}
.dyr-ceo__sign-co{font-size:13px;color:var(--c-text-muted);font-weight:500}
.dyr-ceo__sign-name{font-size:18px;font-weight:800;letter-spacing:.06em;color:var(--c-text)}
/* ─── VISION & MISSION ────────────────────────────────────── */
.dyr-vm-section{
background:linear-gradient(180deg,#f7f9fc 0%,#eef2f8 100%);
padding-top:88px;padding-bottom:88px;
}
.dyr-vm{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.dyr-vm__card{
position:relative;isolation:isolate;overflow:hidden;
padding:48px 44px 44px;border-radius:20px;color:#fff;
box-shadow:0 22px 50px rgba(11,18,32,.22);
}
.dyr-vm__card--vision{background:linear-gradient(135deg,#1b3a6b 0%, #2e5aa4 60%, #3a72c4 100%)}
.dyr-vm__card--mission{background:linear-gradient(135deg,#0b1220 0%, #1b3a6b 70%, #244678 100%)}
.dyr-vm__card::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.16) 0%, transparent 50%);
}
.dyr-vm__watermark{
position:absolute;right:-24px;bottom:-60px;z-index:0;
font-family:'Inter',sans-serif;
font-size:320px;font-weight:900;line-height:.85;
color:rgba(255,255,255,.06);letter-spacing:-.05em;
pointer-events:none;user-select:none;
}
.dyr-vm__ic{
position:relative;z-index:1;
width:52px;height:52px;border-radius:14px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
font-size:22px;margin-bottom:22px;
}
.dyr-vm__label{
position:relative;z-index:1;
font-size:12px;font-weight:800;letter-spacing:.32em;
color:var(--c-accent);margin-bottom:18px;display:block;
}
.dyr-vm__title{
position:relative;z-index:1;
font-size:clamp(22px,2.4vw,30px);font-weight:800;
line-height:1.4;margin-bottom:16px;letter-spacing:-.015em;
}
.dyr-vm__sub{
position:relative;z-index:1;
font-size:14px;color:rgba(255,255,255,.75);font-style:italic;
}
/* ─── CORE VALUES ────────────────────────────────────────── */
.dyr-values-section{padding-top:88px;padding-bottom:96px}
.dyr-values{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;
}
.dyr-value{
position:relative;isolation:isolate;overflow:hidden;
padding:38px 32px 34px;
background:#fff;border:1px solid #e6e8ee;
border-radius:18px;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.dyr-value::before{
content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
background:radial-gradient(circle at 100% 0%, var(--val-color,#2e5aa4) 0%, transparent 60%);
opacity:.10;
}
.dyr-value:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(11,28,61,.12);
border-color:transparent;
}
.dyr-value:hover::before{opacity:.16}
.dyr-value__ic{
width:54px;height:54px;border-radius:14px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.6);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.85);
box-shadow:0 8px 18px rgba(11,28,61,.06);
color:var(--val-color,#2e5aa4);
font-size:22px;margin-bottom:20px;
}
.dyr-value__num{
font-family:'Inter',sans-serif;
font-size:12.5px;font-weight:800;letter-spacing:.22em;
color:var(--val-color,#2e5aa4);
margin-bottom:8px;display:block;
}
.dyr-value__title{
font-size:24px;font-weight:800;color:#0b1c3d;
margin-bottom:4px;letter-spacing:-.015em;
}
.dyr-value__en{
font-size:11.5px;color:var(--c-text-muted);
letter-spacing:.22em;font-weight:700;margin-bottom:16px;
text-transform:uppercase;
}
.dyr-value__desc{font-size:14px;color:var(--c-text-soft);line-height:1.75}
/* =================================================================
PAGE: CERTIFICATION
================================================================= */
.dyr-certgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.dyr-cert{
background:#fff;border:1px solid var(--c-line);
border-radius:var(--r-md);padding:32px;text-align:center;
transition:all .25s var(--ease);
}
.dyr-cert:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.dyr-cert__paper{
aspect-ratio:3/4;background:linear-gradient(180deg,#fafbfd,#eaeef5);
border:1px solid var(--c-line);border-radius:8px;
margin-bottom:22px;display:flex;align-items:center;justify-content:center;
color:var(--c-primary);position:relative;
}
.dyr-cert__paper::before{
content:'';position:absolute;top:14px;left:14px;right:14px;height:2px;
background:var(--c-primary);opacity:.5;
}
.dyr-cert__paper::after{
content:'';position:absolute;bottom:18px;right:18px;width:42px;height:42px;
border-radius:50%;background:var(--c-accent);opacity:.2;
}
.dyr-cert__paper svg{width:48px;height:48px}
.dyr-cert__tag{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;
color:var(--c-primary-2);margin-bottom:8px;
}
.dyr-cert__title{font-size:16px;font-weight:700;color:var(--c-text);margin-bottom:6px}
.dyr-cert__no{font-size:12.5px;color:var(--c-text-muted)}
/* =================================================================
PAGE: LOCATION
================================================================= */
.dyr-loc{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.dyr-loc__card{
background:#fff;border:1px solid var(--c-line);
border-radius:var(--r-md);overflow:hidden;
transition:all .25s var(--ease);
}
.dyr-loc__card:hover{box-shadow:var(--shadow-md);border-color:transparent}
.dyr-loc__map{
aspect-ratio:16/10;
background:linear-gradient(135deg,#dbe3ef,#eef2f8);
position:relative;overflow:hidden;
}
.dyr-loc__map::before{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(27,58,107,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(27,58,107,.15) 1px, transparent 1px);
background-size:30px 30px;
}
.dyr-loc__pin{
position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);
width:32px;height:42px;color:var(--c-primary);
filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.dyr-loc__pin::before{
content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
width:10px;height:4px;background:rgba(0,0,0,.2);border-radius:50%;filter:blur(2px);
}
.dyr-loc__body{padding:28px}
.dyr-loc__tag{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--c-primary-2);margin-bottom:8px}
.dyr-loc__name{font-size:18px;font-weight:700;color:var(--c-text);margin-bottom:14px}
.dyr-loc__info{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--c-text-soft)}
.dyr-loc__info span{font-weight:600;color:var(--c-text);margin-right:8px}
/* =================================================================
PAGE: HISTORY (TIMELINE)
================================================================= */
/* ─── TIMELINE — 라인 효과 중심 ────────────────────────────── */
.dyr-tl{
position:relative;margin:60px auto 0;max-width:1080px;
padding:0 0 30px;
}
/* 중앙 라인 — 골드→네이비 다단 그라데이션 */
.dyr-tl::before{
content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;
transform:translateX(-50%);
background:linear-gradient(180deg,
rgba(200,164,100,0) 0%,
#c8a464 6%,
#b08f4e 18%,
#5e7eb5 38%,
#2e5aa4 60%,
#1b3a6b 82%,
rgba(11,28,61,0) 100%
);
border-radius:3px;
box-shadow:0 0 16px rgba(46,90,164,.22);
}
/* 흐르는 빛 — 라인 위 위에서 아래로 끊임없이 이동 */
.dyr-tl::after{
content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;
transform:translateX(-50%);
background:linear-gradient(180deg,
transparent 0%,
rgba(255,255,255,0) 38%,
rgba(255,255,255,.7) 50%,
rgba(255,255,255,0) 62%,
transparent 100%
);
background-size:100% 220%;
animation:dyrTlFlow 5s linear infinite;
mix-blend-mode:overlay;
pointer-events:none;border-radius:3px;
}
@keyframes dyrTlFlow{
0% {background-position:0 -110%}
100% {background-position:0 110%}
}
/* 상하 캡 — 시작/현재 마커 */
.dyr-tl__cap{
position:relative;
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:140px;height:140px;border-radius:50%;
margin:0 auto 28px;
background:#fff;color:#0b1c3d;
border:1px solid rgba(200,164,100,.45);
box-shadow:
0 0 0 6px rgba(200,164,100,.10),
0 0 0 14px rgba(200,164,100,.05),
0 10px 26px rgba(11,28,61,.10);
z-index:2;
}
.dyr-tl__cap--bottom{
margin:28px auto 0;
background:linear-gradient(135deg,#1b3a6b,#2e5aa4);
color:#fff;border-color:rgba(255,255,255,.35);
box-shadow:
0 0 0 6px rgba(46,90,164,.18),
0 0 0 14px rgba(46,90,164,.08),
0 12px 30px rgba(46,90,164,.30);
}
.dyr-tl__cap i{font-size:18px;margin-bottom:6px;color:#c8a464}
.dyr-tl__cap--bottom i{color:#fff;opacity:.95}
.dyr-tl__cap-label{
font-size:10.5px;font-weight:800;letter-spacing:.22em;
color:var(--c-text-muted);margin-bottom:4px;
}
.dyr-tl__cap--bottom .dyr-tl__cap-label{color:rgba(255,255,255,.7)}
.dyr-tl__cap-year{
font-family:'Inter',sans-serif;
font-size:20px;font-weight:800;letter-spacing:-.01em;
line-height:1;
}
/* 아이템 — 카드 (라인까지 정확히 40px 간격, calc 로 viewport 무관) */
.dyr-tl__item{
position:relative;width:calc(50% - 40px);padding:26px 30px;
margin-bottom:8px;
background:#fff;border:1px solid #e6e8ee;border-radius:16px;
box-shadow:0 4px 14px rgba(11,28,61,.05);
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
isolation:isolate;
}
.dyr-tl__item:hover{
transform:translateY(-4px);
box-shadow:0 18px 38px rgba(11,28,61,.12);
border-color:transparent;
}
/* 홀수(좌) / 짝수(우) 정렬 + 컬러 액센트 */
.dyr-tl__item:nth-child(odd){margin-right:auto;text-align:right}
.dyr-tl__item:nth-child(even){margin-left:auto}
.dyr-tl__item:nth-child(odd){--tl-accent:#c8a464}
.dyr-tl__item:nth-child(even){--tl-accent:#2e5aa4}
/* 카드 안 코너 그라데이션 힌트 */
.dyr-tl__item::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
}
.dyr-tl__item:nth-child(odd)::after{
background:radial-gradient(circle at 100% 0%, var(--tl-accent) 0%, transparent 55%);
opacity:.07;
}
.dyr-tl__item:nth-child(even)::after{
background:radial-gradient(circle at 0% 0%, var(--tl-accent) 0%, transparent 55%);
opacity:.07;
}
/* 노드 — 발광 도트 */
.dyr-tl__item::before{
content:'';position:absolute;top:58px;
width:18px;height:18px;border-radius:50%;
background:#fff;border:3px solid var(--tl-accent);
box-shadow:
0 0 0 4px rgba(255,255,255,.95),
0 0 0 6px color-mix(in srgb, var(--tl-accent) 25%, transparent),
0 0 0 12px color-mix(in srgb, var(--tl-accent) 10%, transparent),
0 6px 14px color-mix(in srgb, var(--tl-accent) 40%, transparent);
z-index:3;
}
/* 도트 중심을 라인(50%) 에 정확히: 카드 가장자리에서 40px = gap, 도트 반지름 9px
→ offset -(40-9) = -31px? NO, dot 의 가장자리(right)가 카드+offset 위치이므로
→ right:-49px → dot 가장자리가 card_right+49 → dot 중심 = card_right+40 = 라인 정중앙 */
.dyr-tl__item:nth-child(odd)::before{right:-49px}
.dyr-tl__item:nth-child(even)::before{left:-49px}
/* 가로 커넥터 — 카드 가장자리에서 라인(40px)까지 정확히 채움, 도트와 만남 */
.dyr-tl__item .dyr-tl__year::before{
content:'';position:absolute;top:66px;
height:2px;width:40px;
background:linear-gradient(90deg, var(--tl-accent), transparent);
z-index:2;border-radius:2px;
}
.dyr-tl__item:nth-child(odd) .dyr-tl__year::before{right:-40px}
.dyr-tl__item:nth-child(even) .dyr-tl__year::before{
left:-40px;
background:linear-gradient(-90deg, var(--tl-accent), transparent);
}
/* 연도 — 그라데이션 텍스트 */
.dyr-tl__year{
position:relative;
display:inline-block;
font-family:'Inter','Noto Sans KR',sans-serif;
font-size:24px;font-weight:800;letter-spacing:-.015em;
margin-bottom:8px;
background:linear-gradient(120deg, #1b3a6b 0%, #2e5aa4 50%, var(--tl-accent) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.dyr-tl__title{
font-size:16.5px;font-weight:700;color:var(--c-text);
margin-bottom:14px;letter-spacing:-.01em;
}
.dyr-tl__list{
font-size:13.5px;color:var(--c-text-soft);line-height:1.8;
padding:0;margin:0;list-style:none;
}
.dyr-tl__list li{
position:relative;padding:3px 0 3px 16px;
}
.dyr-tl__list li::before{
content:'';position:absolute;top:13px;width:8px;height:1.5px;
background:var(--tl-accent);border-radius:2px;
}
.dyr-tl__item:nth-child(odd) .dyr-tl__list li{padding:3px 16px 3px 0}
.dyr-tl__item:nth-child(odd) .dyr-tl__list li::before{right:0;left:auto}
.dyr-tl__item:nth-child(even) .dyr-tl__list li::before{left:0}
/* =================================================================
PAGE: CI
================================================================= */
.dyr-ci-logo{
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-lg);
padding:80px;text-align:center;margin-bottom:60px;
}
.dyr-ci-logo__mark{
font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-.03em;color:var(--c-primary);
margin-bottom:8px;display:block;
}
.dyr-ci-logo__sub{font-size:14px;letter-spacing:.4em;color:var(--c-text-muted);font-weight:600}
.dyr-ci-color{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px}
.dyr-ci-color__chip{
border-radius:var(--r-md);overflow:hidden;border:1px solid var(--c-line);
box-shadow:var(--shadow-sm);
}
.dyr-ci-color__swatch{
height:160px;display:flex;align-items:flex-end;justify-content:flex-start;
padding:18px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.04em;
}
.dyr-ci-color__body{padding:18px;font-size:13px;color:var(--c-text-soft)}
.dyr-ci-color__body strong{display:block;color:var(--c-text);font-size:15px;margin-bottom:6px}
.dyr-ci-typo{
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
padding:48px;text-align:center;
}
.dyr-ci-typo__sample{font-size:clamp(36px,4.5vw,64px);font-weight:800;letter-spacing:-.02em;color:var(--c-primary);margin-bottom:8px}
.dyr-ci-typo__caption{font-size:13px;color:var(--c-text-muted);letter-spacing:.06em}
/* =================================================================
PAGE: PRODUCT — CATEGORY GRID
================================================================= */
.dyr-pcat{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.dyr-pcat__card{
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
padding:32px;transition:all .25s var(--ease);
display:flex;flex-direction:column;gap:16px;
}
.dyr-pcat__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.dyr-pcat__num{
font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--c-primary-2);
}
.dyr-pcat__title{font-size:19px;font-weight:700;color:var(--c-text);letter-spacing:-.01em}
.dyr-pcat__en{font-size:13px;color:var(--c-text-muted);font-style:italic;margin-top:-12px}
.dyr-pcat__list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dyr-pcat__list li{
font-size:13.5px;color:var(--c-text-soft);
padding-left:14px;position:relative;line-height:1.5;
}
.dyr-pcat__list li::before{
content:'';position:absolute;left:0;top:9px;
width:6px;height:1px;background:var(--c-primary);
}
/* 카테고리 카드 wrapper (관리자 편집 버튼을 형제로 배치하기 위함) */
.dyr-pcat__wrap{position:relative}
.dyr-pcat__wrap.is-hidden .dyr-pcat__card{opacity:.55}
/* 관리자 — 카드 hover 시 우상단에 ✎ 편집 버튼 */
.dyr-pcat__edit{
position:absolute;top:12px;right:12px;z-index:5;
opacity:0;transform:translateY(-4px);
transition:all .2s var(--ease);
width:32px;height:32px;
background:rgba(27,58,107,.85);color:#fff;
border:0;border-radius:6px;padding:0;
font-size:14px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(8px);
}
.dyr-pcat__edit:hover{background:#0b1220}
.dyr-pcat__wrap:hover .dyr-pcat__edit{opacity:1;transform:translateY(0)}
/* 숨김 카드 뱃지 (관리자 뷰에만 노출) */
.dyr-pcat__hidden-badge{
position:absolute;left:16px;bottom:16px;
background:#fef3c7;color:#92400e;
border:1px solid #fde68a;border-radius:999px;
padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;
}
/* 카테고리 수정 모달 — 폼 패널 */
.dyr-modal__panel--form{max-width:560px;width:100%}
.dyr-cat-form{display:flex;flex-direction:column;gap:14px;padding:24px}
.dyr-cat-form label{
display:flex;flex-direction:column;gap:6px;
font-size:13px;font-weight:600;color:#15202b;
}
.dyr-cat-form input[type=text],
.dyr-cat-form input[type=number],
.dyr-cat-form textarea{
font:inherit;font-size:14px;font-weight:400;
padding:10px 12px;
border:1.5px solid #e3e7ee;border-radius:8px;
color:#15202b;background:#fff;
transition:border-color .15s;
}
.dyr-cat-form input:focus,.dyr-cat-form textarea:focus{
outline:0;border-color:var(--c-primary);
}
.dyr-cat-form textarea{resize:vertical;min-height:110px;line-height:1.6;font-family:inherit}
.dyr-cat-form__row{display:grid;grid-template-columns:120px 1fr;gap:12px}
.dyr-cat-form__check{
flex-direction:row !important;align-items:center;gap:8px;
font-weight:500 !important;cursor:pointer;
}
.dyr-cat-form__check input{width:16px;height:16px;accent-color:var(--c-primary)}
.dyr-cat-form__foot{
display:flex;justify-content:flex-end;gap:10px;
margin-top:8px;padding-top:16px;border-top:1px solid #eef0f5;
}
/* =================================================================
PAGE: SOLUTION DETAIL
================================================================= */
.dyr-soldetail{display:flex;flex-direction:column;gap:120px}
.dyr-soldetail__row{
display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.dyr-soldetail__row:nth-child(even) .dyr-soldetail__visual{order:2}
.dyr-soldetail__visual{
aspect-ratio:4/3;border-radius:var(--r-lg);
background-size:cover;background-position:center;
background-color:#e6e8ee;box-shadow:var(--shadow-lg);
}
.dyr-soldetail__num{
font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--c-primary-2);margin-bottom:14px;
}
.dyr-soldetail__title{
font-size:clamp(24px,2.8vw,36px);font-weight:700;
color:var(--c-text);letter-spacing:-.02em;line-height:1.25;
margin-bottom:10px;
}
.dyr-soldetail__sub{
font-size:15px;font-weight:600;color:var(--c-primary);margin-bottom:18px;
}
.dyr-soldetail__desc{font-size:15.5px;color:var(--c-text-soft);line-height:1.85}
/* =================================================================
PAGE: SUPPORT (DOWNLOAD LIST)
================================================================= */
.dyr-tabs{
display:flex;gap:6px;margin-bottom:40px;flex-wrap:wrap;
border-bottom:1px solid var(--c-line);
}
.dyr-tabs__btn{
padding:14px 22px;font-size:14px;font-weight:600;color:var(--c-text-muted);
position:relative;transition:color .2s var(--ease);
background:none;border:0;cursor:pointer;
}
.dyr-tabs__btn:hover{color:var(--c-primary)}
.dyr-tabs__btn.is-active{color:var(--c-primary)}
.dyr-tabs__btn.is-active::after{
content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c-primary);
}
.dyr-dl{display:flex;flex-direction:column;gap:18px}
.dyr-dl__item{
display:grid;grid-template-columns:140px 1fr auto;gap:24px;align-items:center;
padding:24px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
transition:all .25s var(--ease);
}
.dyr-dl__item:hover{border-color:var(--c-primary);box-shadow:var(--shadow-sm)}
.dyr-dl__thumb{
aspect-ratio:1/1.3;background:linear-gradient(135deg,#1b3a6b,#2e5aa4);
border-radius:6px;display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.85);font-size:11px;font-weight:700;letter-spacing:.18em;
flex-shrink:0;
}
.dyr-dl__body h3{font-size:16px;font-weight:700;color:var(--c-text);margin-bottom:8px}
.dyr-dl__body p{font-size:13.5px;color:var(--c-text-soft);line-height:1.65}
.dyr-dl__btn{
display:inline-flex;align-items:center;gap:8px;
padding:12px 22px;background:var(--c-primary);color:#fff;
border-radius:999px;font-size:13px;font-weight:600;
transition:background .2s var(--ease);
}
.dyr-dl__btn:hover{background:var(--c-primary-2)}
/* =================================================================
PAGE: PROJECTS LIST
================================================================= */
/* projects.php — 필터 row (필터 좌측 + 검색 우측 끝) */
.dyr-pfilter-row{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
margin-bottom:40px;
}
.dyr-pfilter{
display:flex;gap:8px;flex-wrap:wrap;
}
.dyr-pfilter__btn{
display:inline-flex;align-items:center;gap:7px;
padding:8px 18px;font-size:13px;font-weight:600;
background:#fff;border:1px solid var(--c-line);border-radius:999px;
color:var(--c-text-soft);cursor:pointer;
transition:all .2s var(--ease);
}
.dyr-pfilter__btn i{font-size:12px}
.dyr-pfilter__btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.dyr-pfilter__btn.is-active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
/* projects.php — 필터 드롭다운 (지역/활용분야/제품군) */
.dyr-fdrops{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dyr-fdrop{position:relative}
/* 3개 드롭다운 동일 너비 */
.dyr-fdrops > .dyr-fdrop{min-width:150px;}
.dyr-fdrops > .dyr-fdrop > .dyr-fdrop__btn{
width:100%;justify-content:space-between;
}
.dyr-fdrop__btn{
display:inline-flex;align-items:center;gap:9px;
padding:9px 14px 9px 16px;
background:#fff;border:1.5px solid var(--c-line);border-radius:999px;
color:var(--c-text-soft);font-size:13px;font-weight:600;
font-family:inherit;cursor:pointer;white-space:nowrap;
transition:all .18s var(--ease);
}
.dyr-fdrop__btn:hover{border-color:#b6c4dc;background:#f7f9fc;color:var(--c-text)}
.dyr-fdrop__icon{font-size:13px;opacity:.7}
.dyr-fdrop__label{letter-spacing:-.005em}
.dyr-fdrop__count{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:#f59e0b;color:#fff;
font-size:11px;font-weight:700;letter-spacing:0;
margin:0 -2px 0 -4px;
}
.dyr-fdrop__count[hidden]{display:none}
.dyr-fdrop__caret{
font-size:10px;opacity:.55;margin-left:2px;
transition:transform .2s var(--ease);
}
.dyr-fdrop.is-open .dyr-fdrop__btn,
.dyr-fdrop.is-active .dyr-fdrop__btn{
border-color:var(--c-primary);
background:var(--c-primary);color:#fff;
}
.dyr-fdrop.is-open .dyr-fdrop__icon,
.dyr-fdrop.is-active .dyr-fdrop__icon,
.dyr-fdrop.is-open .dyr-fdrop__caret,
.dyr-fdrop.is-active .dyr-fdrop__caret{opacity:.9}
.dyr-fdrop.is-open .dyr-fdrop__caret{transform:rotate(180deg)}
.dyr-fdrop__panel{
position:absolute;left:0;top:calc(100% + 8px);z-index:30;
min-width:240px;max-width:320px;
padding:6px;
background:#fff;
border:1px solid #e6e8ee;border-radius:14px;
box-shadow:0 10px 32px rgba(11,18,32,.10), 0 2px 6px rgba(11,18,32,.04);
animation:dyrFdropIn .14s var(--ease);
}
@keyframes dyrFdropIn{
from{opacity:0;transform:translateY(-4px)}
to {opacity:1;transform:translateY(0)}
}
.dyr-fdrop__panel-head{
display:flex;justify-content:space-between;align-items:center;
padding:8px 10px 8px;
border-bottom:1px solid #eef0f5;margin-bottom:4px;
}
.dyr-fdrop__panel-head strong{
font-size:11px;font-weight:700;color:var(--c-text-muted);
letter-spacing:.06em;text-transform:uppercase;
}
.dyr-fdrop__clear{
background:transparent;border:0;cursor:pointer;
color:var(--c-primary);font-size:12px;font-weight:600;font-family:inherit;
padding:2px 6px;border-radius:6px;
transition:background .12s ease;
}
.dyr-fdrop__clear:hover{background:rgba(11,28,61,.06)}
.dyr-fdrop__opt{
display:flex;align-items:center;gap:10px;
padding:9px 12px;border-radius:9px;
font-size:13.5px;color:var(--c-text);font-weight:500;
cursor:pointer;transition:background .12s ease;
letter-spacing:-.005em;
}
.dyr-fdrop__opt:hover{background:#f3f6fb}
.dyr-fdrop__opt input[type=checkbox]{
margin:0;width:15px;height:15px;
accent-color:var(--c-primary);cursor:pointer;flex-shrink:0;
}
.dyr-fdrop__opt i{
width:16px;text-align:center;font-size:12px;
color:#a4afc1;flex-shrink:0;
}
.dyr-fdrop__opt span{flex:1;min-width:0}
.dyr-fdrop__opt:has(input:checked){
background:rgba(11,28,61,.06);color:#0b1c3d;font-weight:700;
}
.dyr-fdrop__opt:has(input:checked) i{color:var(--c-primary)}
.dyr-fdrop__reset{
display:inline-flex;align-items:center;gap:6px;
padding:8px 12px;
background:transparent;border:1px dashed #d9def0;border-radius:999px;
color:#7b8aa3;font-size:12px;font-weight:600;font-family:inherit;
cursor:pointer;transition:all .15s var(--ease);
}
.dyr-fdrop__reset i{font-size:11px}
.dyr-fdrop__reset:hover{color:#ef4444;border-color:#fca5a5;background:#fef2f2}
.dyr-fdrop__reset[hidden]{display:none}
/* projects.php — 검색창 */
.dyr-psearch{
margin-left:auto;
display:inline-flex;align-items:center;gap:10px;
width:320px;height:42px;padding:0 14px 0 16px;
background:#fff;border:1px solid var(--c-line);border-radius:999px;
transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
cursor:text;
}
.dyr-psearch:hover{border-color:#cdd6e3}
.dyr-psearch:focus-within{
border-color:var(--c-primary);
box-shadow:0 0 0 4px rgba(11,28,61,.06);
}
.dyr-psearch__icon{
font-size:13px;color:var(--c-text-muted);flex-shrink:0;
transition:color .15s ease;
}
.dyr-psearch:focus-within .dyr-psearch__icon{color:var(--c-primary)}
.dyr-psearch__input{
flex:1;min-width:0;border:0;outline:0;background:transparent;
font-size:14px;font-weight:500;color:var(--c-text);
font-family:inherit;line-height:1;
letter-spacing:-.005em;
}
.dyr-psearch__input::placeholder{color:#9aa6b7;font-weight:400}
.dyr-psearch__input::-webkit-search-cancel-button{appearance:none;display:none}
.dyr-psearch__clear{
flex-shrink:0;background:transparent;border:0;cursor:pointer;
width:22px;height:22px;border-radius:50%;
color:var(--c-text-muted);
display:flex;align-items:center;justify-content:center;
font-size:11px;
transition:background .15s ease, color .15s ease;
}
.dyr-psearch__clear:hover{background:#f1f5fb;color:var(--c-text)}
.dyr-psearch__clear[hidden]{display:none}
@media (max-width:680px){
.dyr-pfilter-row{gap:12px}
.dyr-psearch{margin-left:0;width:100%}
}
.dyr-plist{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.dyr-pitem{
position:relative;
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--c-line);border-radius:16px;
overflow:hidden;isolation:isolate;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.dyr-pitem:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(11,28,61,.13), 0 4px 12px rgba(11,28,61,.06);
border-color:transparent;
}
/* ── 이미지 영역 + 오버레이 ── */
.dyr-pitem__media{
position:relative;
aspect-ratio:4/3;
background-size:cover;background-position:center;background-color:#e6e8ee;
overflow:hidden;
}
.dyr-pitem__media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, rgba(11,18,32,.20) 0%, transparent 35%, transparent 60%, rgba(11,18,32,.35) 100%);
opacity:.85;pointer-events:none;
transition:opacity .3s var(--ease);
}
.dyr-pitem:hover .dyr-pitem__media::after{opacity:1}
.dyr-pitem__media{
background-size:cover;background-position:center;
transition:transform .6s var(--ease);
}
.dyr-pitem:hover .dyr-pitem__media{transform:scale(1.06)}
.dyr-pitem__hidden-flag{
position:absolute;top:12px;right:12px;z-index:2;
display:inline-flex;align-items:center;gap:5px;
padding:5px 10px;
background:rgba(255,138,0,.95);color:#fff;
font-size:10.5px;font-weight:700;letter-spacing:.04em;
border-radius:999px;
box-shadow:0 4px 12px rgba(255,138,0,.35);
}
.dyr-pitem__hidden-flag i{font-size:9px}
/* ── 본문 ── */
.dyr-pitem__body{
padding:18px 20px 20px;
display:flex;flex-direction:column;gap:10px;
}
.dyr-pitem__chips{
display:flex;flex-wrap:wrap;gap:5px;
margin-bottom:2px;
}
.dyr-pitem__chip{
display:inline-flex;align-items:center;gap:5px;
padding:4px 9px 4px 8px;
border-radius:6px;
font-size:11px;font-weight:600;
letter-spacing:-.005em;line-height:1;
border:1px solid transparent;
transition:transform .15s var(--ease), background .15s ease;
}
.dyr-pitem__chip i{font-size:9px;opacity:.85}
.dyr-pitem__chip--domestic{
background:rgba(34,94,75,.10);
color:#1f6b54;
border-color:rgba(34,94,75,.20);
}
.dyr-pitem__chip--overseas{
background:rgba(46,90,164,.10);
color:#2e5aa4;
border-color:rgba(46,90,164,.22);
}
.dyr-pitem__chip--app{
background:rgba(11,28,61,.06);
color:var(--c-primary);
border-color:rgba(11,28,61,.12);
}
.dyr-pitem__chip--prod{
background:rgba(200,164,100,.13);
color:#9e7d3c;
border-color:rgba(200,164,100,.25);
}
.dyr-pitem:hover .dyr-pitem__chip{transform:translateY(-1px)}
.dyr-pitem__title{
font-size:17px;font-weight:700;color:var(--c-text);
line-height:1.35;letter-spacing:-.015em;
margin:2px 0 0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dyr-pitem__place{
display:inline-flex;align-items:center;gap:6px;
margin-top:auto;padding-top:6px;
font-size:12.5px;color:var(--c-text-muted);font-weight:500;
}
.dyr-pitem__place i{font-size:11px;color:#a4afc1}
.dyr-pitem.is-hidden{opacity:.62}
.dyr-pitem.is-hidden:hover{opacity:1}
/* =================================================================
PAGE: CONTACT — FULL FORM
================================================================= */
.dyr-cform{
display:grid;grid-template-columns:1.2fr 1fr;gap:60px;
}
.dyr-cform__form{
position:relative;
background:linear-gradient(180deg,#fbfcfe 0%,#f4f6fa 100%);
padding:44px 44px 40px;border-radius:20px;
border:1px solid #e6e8ee;
box-shadow:0 4px 18px rgba(11,28,61,.04);
display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.dyr-cform__form .dyr-field--full,
.dyr-cform__form > button{grid-column:1/-1}
.dyr-cform__notice{
grid-column:1/-1;
display:flex;align-items:flex-start;gap:11px;
font-size:12.5px;color:#4a5874;line-height:1.6;
background:#fff;padding:14px 18px;border-radius:10px;
border:1px solid #e3e8f1;
border-left:3px solid var(--c-accent,#c8a464);
}
.dyr-cform__notice i{font-size:14px;color:var(--c-accent,#c8a464);margin-top:1px;flex-shrink:0}
/* 문의 폼 — 성공 / 오류 alert */
.dyr-cform__alert{
grid-column:1/-1;
display:flex;align-items:flex-start;gap:14px;
padding:16px 20px;border-radius:10px;
font-size:14px;line-height:1.55;
}
.dyr-cform__alert i{font-size:22px;margin-top:1px;flex-shrink:0}
.dyr-cform__alert strong{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.dyr-cform__alert small{display:block;font-size:13px;opacity:.85}
.dyr-cform__alert ul{margin:0;padding-left:18px}
.dyr-cform__alert li{margin:2px 0}
.dyr-cform__alert--ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.dyr-cform__alert--ok i{color:#059669}
.dyr-cform__alert--err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.dyr-cform__alert--err i{color:#dc2626}
/* 라벨 옆 필수/선택 표식 */
.dyr-field__req{
color:#dc2626;font-size:12px;font-weight:700;
margin-left:2px;
}
.dyr-field__opt{
display:inline-block;
margin-left:6px;padding:1px 7px;
font-size:10.5px;font-weight:600;letter-spacing:.04em;
color:#7b8aa3;background:#eef2f8;border-radius:4px;
vertical-align:1px;
}
/* ─── 파일 첨부 드롭존 ─── */
.dyr-dropzone{
position:relative;
display:flex;align-items:center;justify-content:center;
min-height:140px;padding:24px;
background:#fff;
border:2px dashed #cbd5e0;border-radius:12px;
cursor:pointer;outline:none;
transition:all .2s var(--ease);
}
.dyr-dropzone:hover,
.dyr-dropzone:focus-visible{
border-color:var(--c-primary);
background:linear-gradient(180deg,#f7f9fc 0%,#eef2f8 100%);
}
.dyr-dropzone.is-drag-over{
border-color:var(--c-accent,#c8a464);
background:rgba(200,164,100,.06);
border-style:solid;
}
.dyr-dropzone__inner{text-align:center;pointer-events:none}
.dyr-dropzone__ico{
width:54px;height:54px;border-radius:50%;
background:linear-gradient(135deg, rgba(46,90,164,.10), rgba(46,90,164,.04));
display:inline-flex;align-items:center;justify-content:center;
font-size:22px;color:var(--c-primary);
margin-bottom:14px;
border:1px solid rgba(46,90,164,.12);
transition:transform .25s var(--ease), background .2s ease;
}
.dyr-dropzone:hover .dyr-dropzone__ico,
.dyr-dropzone.is-drag-over .dyr-dropzone__ico{transform:translateY(-2px) scale(1.06)}
.dyr-dropzone.is-drag-over .dyr-dropzone__ico{
background:linear-gradient(135deg, rgba(200,164,100,.20), rgba(200,164,100,.08));
color:var(--c-accent,#c8a464);border-color:rgba(200,164,100,.30);
}
.dyr-dropzone__title{
font-size:14px;color:var(--c-text);font-weight:600;
margin:0 0 6px;letter-spacing:-.005em;
}
.dyr-dropzone__title strong{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.dyr-dropzone__hint{
font-size:12px;color:var(--c-text-muted);margin:0;
}
.dyr-dropzone__files{
list-style:none;padding:0;margin:10px 0 0;
display:flex;flex-direction:column;gap:6px;
}
.dyr-dropzone__file{
display:flex;align-items:center;gap:10px;
padding:9px 12px;
background:#fff;border:1px solid #e6e8ee;border-radius:8px;
font-size:13px;color:var(--c-text);
animation:dyrFileIn .18s var(--ease);
}
@keyframes dyrFileIn{
from{opacity:0;transform:translateY(-4px)}
to {opacity:1;transform:translateY(0)}
}
.dyr-dropzone__file > i{color:var(--c-primary);font-size:14px;flex-shrink:0}
.dyr-dropzone__file-name{
flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:500;
}
.dyr-dropzone__file-size{
color:var(--c-text-muted);font-size:11.5px;
font-family:'Inter','Noto Sans KR',sans-serif;flex-shrink:0;
}
.dyr-dropzone__file-rm{
width:24px;height:24px;border-radius:50%;
border:0;background:transparent;cursor:pointer;
color:var(--c-text-muted);font-size:11px;
display:inline-flex;align-items:center;justify-content:center;
transition:background .15s ease, color .15s ease;flex-shrink:0;
}
.dyr-dropzone__file-rm:hover{background:#fef2f2;color:#dc2626}
/* ─── 연락처 정보 카드 (고도화) ─────────────────────── */
.dyr-cinfo__card{
--accent: #1b3a6b;
--accent-2: #2e5aa4;
--accent-glow: rgba(46,90,164,.16);
position:relative;
background:#fff;border:1px solid var(--c-line);
border-radius:14px;padding:28px 28px 24px;margin-bottom:16px;
overflow:hidden;isolation:isolate;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.dyr-cinfo__card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
z-index:1;
}
.dyr-cinfo__card::after{
content:'';position:absolute;top:-60px;right:-60px;
width:180px;height:180px;border-radius:50%;
background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
z-index:0;pointer-events:none;
transition:transform .4s var(--ease);
}
.dyr-cinfo__card:hover{
transform:translateY(-3px);
border-color:transparent;
box-shadow:0 12px 34px rgba(11,28,61,.12);
}
.dyr-cinfo__card:hover::after{transform:scale(1.4)}
/* 카드별 컬러 테마 */
.dyr-cinfo__card--hq { --accent: #1b3a6b; --accent-2: #2e5aa4; --accent-glow: rgba(46,90,164,.18) }
.dyr-cinfo__card--showroom { --accent: #0e6b75; --accent-2: #149aa8; --accent-glow: rgba(20,154,168,.16) }
.dyr-cinfo__card--partner { --accent: #8a6730; --accent-2: #c8a464; --accent-glow: rgba(200,164,100,.22) }
/* 헤드 */
.dyr-cinfo__head{
position:relative;z-index:1;
display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;
padding-bottom:16px;border-bottom:1px solid var(--c-line);
}
.dyr-cinfo__badge{
width:46px;height:46px;border-radius:12px;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
color:#fff;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
box-shadow:0 6px 18px var(--accent-glow);
}
.dyr-cinfo__badge svg{width:22px;height:22px;display:block}
.dyr-cinfo__title{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.dyr-cinfo__eyebrow{
font-size:10px;font-weight:700;letter-spacing:.22em;
color:var(--accent);margin:0;text-transform:uppercase;
}
.dyr-cinfo__name{
font-size:17px;font-weight:800;color:var(--c-text);margin:0;letter-spacing:-.01em;
}
/* 행 */
.dyr-cinfo__row{
display:grid;grid-template-columns:90px 1fr;gap:12px;
font-size:13.5px;padding:8px 0;
position:relative;z-index:1;
border-bottom:1px solid transparent;
transition:border-color .15s ease;
}
.dyr-cinfo__row:not(:last-child){border-bottom-color:rgba(11,28,61,.04)}
.dyr-cinfo__row dt{
font-weight:600;color:var(--c-text-muted);
display:flex;align-items:center;gap:7px;
}
.dyr-cinfo__row dt svg{
width:14px;height:14px;flex-shrink:0;
color:var(--accent);opacity:.85;
}
.dyr-cinfo__row dd{color:var(--c-text);margin:0;line-height:1.55;word-break:break-all}
.dyr-cinfo__row dd a{
color:var(--c-text);text-decoration:none;
border-bottom:1px solid transparent;
transition:color .15s ease, border-color .15s ease;
}
.dyr-cinfo__row dd a:hover{
color:var(--accent);border-bottom-color:var(--accent);
}
/* =================================================================
DETAIL PAGE (Solution / Product) — sidebar + content
================================================================= */
.dyr-detail{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
.dyr-detail__main{min-width:0}
.dyr-sidebar{
position:sticky;top:calc(var(--header-h) + 24px);
padding:24px;background:#fff;border:1px solid var(--c-line);
border-radius:var(--r-md);
}
.dyr-sidebar__head{
font-size:11px;font-weight:700;letter-spacing:.18em;
color:var(--c-primary-2);text-transform:uppercase;
margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--c-line);
}
.dyr-sidebar__list{display:flex;flex-direction:column;gap:2px}
.dyr-sidebar__list a{
display:flex;align-items:center;justify-content:space-between;
padding:11px 14px;border-radius:8px;
font-size:13.5px;color:var(--c-text-soft);font-weight:500;
transition:all .15s var(--ease);
}
.dyr-sidebar__list a span{opacity:0;transform:translateX(-4px);transition:all .15s var(--ease);color:var(--c-primary)}
.dyr-sidebar__list a:hover{background:var(--c-bg-alt);color:var(--c-text);padding-left:18px}
.dyr-sidebar__list a:hover span{opacity:.6;transform:translateX(0)}
.dyr-sidebar__list a.is-active{background:var(--c-primary);color:#fff;font-weight:700}
.dyr-sidebar__list a.is-active span{opacity:1;color:var(--c-accent);transform:translateX(0)}
.dyr-sidebar__cta{
margin-top:20px;padding:18px;
background:linear-gradient(135deg,#0b1220,#1b3a6b);
border-radius:8px;color:#fff;
}
.dyr-sidebar__cta h4{font-size:14px;font-weight:700;margin-bottom:4px}
.dyr-sidebar__cta p{font-size:12px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:12px}
.dyr-btn--sm{padding:8px 14px;font-size:12px}
/* Detail INTRO */
.dyr-intro{
padding:48px 56px;background:var(--c-bg-alt);
border-radius:var(--r-lg);margin-bottom:64px;
}
.dyr-intro__eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--c-primary-2);margin-bottom:14px;text-transform:uppercase}
.dyr-intro__title{
font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;
line-height:1.3;margin-bottom:18px;color:var(--c-text);
}
.dyr-intro__body{font-size:16px;color:var(--c-text-soft);line-height:1.85}
/* 4-CARD FEATURES */
.dyr-features{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:64px;
}
.dyr-feat{
background:#fff;border:1px solid var(--c-line);
border-radius:var(--r-md);padding:28px 24px;
transition:all .25s var(--ease);text-align:center;
}
.dyr-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.dyr-feat__icon{
width:52px;height:52px;border-radius:50%;
background:linear-gradient(135deg,#1b3a6b,#2e5aa4);color:#fff;
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;
}
.dyr-feat__icon svg{width:24px;height:24px}
.dyr-feat__title{font-size:15px;font-weight:700;color:var(--c-text);line-height:1.4}
/* APPLICATIONS / GALLERY */
.dyr-block__title{
font-size:clamp(20px,2vw,26px);font-weight:700;color:var(--c-text);
letter-spacing:-.01em;margin-bottom:8px;
}
.dyr-block__sub{font-size:14.5px;color:var(--c-text-soft);margin-bottom:28px}
.dyr-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:64px}
.dyr-gallery__item{
aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;
background-size:cover;background-position:center;background-color:#e6e8ee;
position:relative;
}
.dyr-gallery__item::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(11,18,32,.65) 100%);
opacity:0;transition:opacity .25s var(--ease);
}
.dyr-gallery__item:hover::after{opacity:1}
.dyr-gallery__cap{
position:absolute;left:18px;right:18px;bottom:14px;
color:#fff;font-size:13px;font-weight:600;z-index:1;
opacity:0;transform:translateY(6px);
transition:all .25s var(--ease);
}
.dyr-gallery__item:hover .dyr-gallery__cap{opacity:1;transform:translateY(0)}
/* RELATED PROJECTS (compact) */
.dyr-related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px}
.dyr-related__item{
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
overflow:hidden;transition:all .25s var(--ease);
}
.dyr-related__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.dyr-related__media{aspect-ratio:16/10;background-size:cover;background-position:center}
.dyr-related__body{padding:16px 20px}
.dyr-related__cat{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--c-primary-2);margin-bottom:4px}
.dyr-related__name{font-size:15px;font-weight:600;color:var(--c-text)}
/* DOWNLOAD bar */
.dyr-dlbar{
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:28px 32px;background:linear-gradient(135deg,#0b1220,#1b3a6b);
border-radius:var(--r-lg);color:#fff;
margin:48px 0 64px;
flex-wrap:wrap;
}
.dyr-dlbar h3{font-size:18px;font-weight:700;margin-bottom:4px}
.dyr-dlbar p{font-size:13px;color:rgba(255,255,255,.7)}
/* OTHER SOLUTIONS (bottom of detail) */
.dyr-others{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dyr-others__item{
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
padding:24px;transition:all .25s var(--ease);
display:flex;flex-direction:column;gap:8px;
}
.dyr-others__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.dyr-others__num{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--c-primary-2)}
.dyr-others__name{font-size:16px;font-weight:700;color:var(--c-text)}
.dyr-others__arrow{margin-top:6px;font-size:13px;color:var(--c-primary);font-weight:600}
/* PRODUCT collection items */
.dyr-pcol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dyr-pcol__wrap{position:relative}
.dyr-pcol__item{
display:block;
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
overflow:hidden;transition:all .25s var(--ease);
text-decoration:none;color:inherit;
}
.dyr-pcol__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.dyr-pcol__media{
aspect-ratio:1/1;background-size:cover;background-position:center;
background-color:#eef2f8;
}
.dyr-pcol__body{padding:18px 20px}
.dyr-pcol__name{font-size:15px;font-weight:700;color:var(--c-text);margin-bottom:4px}
.dyr-pcol__sku{font-size:11.5px;color:var(--c-text-muted);letter-spacing:.06em}
/* 관리자 — 카드 hover 시 우상단에 수정/삭제 */
.dyr-pcol__remove,
.dyr-pcol__edit{
position:absolute;top:12px;z-index:5;
opacity:0;transform:translateY(-4px);
transition:all .2s var(--ease);
background:rgba(0,0,0,.75);color:#fff;
border:0;border-radius:6px;
font-size:14px;font-weight:600;line-height:1;cursor:pointer;
text-decoration:none;
display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;
backdrop-filter:blur(8px);
}
.dyr-pcol__remove{right:12px;padding:0}
.dyr-pcol__edit{right:52px;background:rgba(27,58,107,.85)}
.dyr-pcol__remove:hover{background:#b91c1c}
.dyr-pcol__edit:hover{background:#0b1220}
.dyr-pcol__wrap:hover .dyr-pcol__remove,
.dyr-pcol__wrap:hover .dyr-pcol__edit{opacity:1;transform:translateY(0)}
/* form 으로 감싼 remove 버튼 — 내부 button 의 브라우저 기본 스타일 제거 */
.dyr-pcol__remove button{
width:100%;height:100%;
background:transparent;color:inherit;
border:0;padding:0;margin:0;
font:inherit;line-height:1;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
/* 관리자 — 점선 + 카드 */
.dyr-pcol__add{
background:linear-gradient(135deg,#fafbfd,#eaeef5);
border:2px dashed #c8d1e0;
cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
min-height:240px;
color:var(--c-primary-2);
font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.02em;
padding:24px;
transition:all .2s var(--ease);
}
.dyr-pcol__add:hover{
border-color:var(--c-primary);background:linear-gradient(135deg,#fff,#e8f0ff);
color:var(--c-primary);transform:translateY(-4px);
}
.dyr-pcol__add svg{width:42px;height:42px;transition:transform .2s var(--ease)}
.dyr-pcol__add:hover svg{transform:scale(1.15) rotate(90deg)}
/* =================================================================
MODAL — 제품 추가 모달
================================================================= */
.dyr-modal{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
padding:24px;
}
.dyr-modal[hidden]{display:none}
.dyr-modal__backdrop{
position:absolute;inset:0;
background:rgba(11,18,32,.6);backdrop-filter:blur(4px);
cursor:pointer;
}
.dyr-modal__panel{
position:relative;
background:#fff;border-radius:14px;
width:100%;max-width:880px;max-height:88vh;
display:flex;flex-direction:column;
box-shadow:0 25px 80px rgba(0,0,0,.3);
animation:dyrModalIn .25s var(--ease);
}
@keyframes dyrModalIn{
from{opacity:0;transform:translateY(20px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.dyr-modal__head{
display:flex;justify-content:space-between;align-items:flex-start;
padding:28px 32px 20px;border-bottom:1px solid var(--c-line);
}
.dyr-modal__eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--c-primary-2);margin-bottom:8px;text-transform:uppercase}
.dyr-modal__title{font-size:22px;font-weight:800;color:var(--c-text);letter-spacing:-.01em;margin:0 0 6px}
.dyr-modal__sub{font-size:13px;color:var(--c-text-soft);margin:0}
.dyr-modal__close{
width:36px;height:36px;border-radius:50%;background:#f5f6f8;border:0;cursor:pointer;
font-size:22px;color:var(--c-text);line-height:1;flex-shrink:0;
transition:background .15s var(--ease);
}
.dyr-modal__close:hover{background:#e6e8ee}
.dyr-modal__body{
flex:1;overflow-y:auto;padding:24px 32px;
}
.dyr-modal__empty{
text-align:center;padding:40px 0;color:var(--c-text-muted);font-size:14px;line-height:1.7;
}
.dyr-modal__grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.dyr-modal__item{margin:0;padding:0}
.dyr-modal__item-btn{
display:flex;align-items:center;gap:14px;width:100%;
background:#fff;border:1px solid var(--c-line);border-radius:10px;
padding:12px;cursor:pointer;
text-align:left;font-family:inherit;
transition:all .15s var(--ease);
}
.dyr-modal__item-btn:hover{border-color:var(--c-primary);background:#fafbfd;transform:translateY(-1px)}
.dyr-modal__item-thumb{
width:64px;height:64px;flex-shrink:0;
background-size:cover;background-position:center;background-color:#eef2f8;
border-radius:8px;
}
.dyr-modal__item-body{flex:1;min-width:0}
.dyr-modal__item-body strong{
display:block;font-size:14px;color:var(--c-text);margin-bottom:3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dyr-modal__item-body small{font-size:11.5px;color:var(--c-text-muted);letter-spacing:.04em}
.dyr-modal__item-add{
font-size:12px;font-weight:700;color:var(--c-primary);
padding:6px 12px;border-radius:6px;background:rgba(27,58,107,.08);
}
.dyr-modal__item-btn:hover .dyr-modal__item-add{background:var(--c-primary);color:#fff}
.dyr-modal__foot{
display:flex;gap:10px;justify-content:flex-end;
padding:18px 32px;border-top:1px solid var(--c-line);background:#fafbfd;
border-radius:0 0 14px 14px;
}
@media (max-width:760px){
.dyr-modal{padding:12px}
.dyr-modal__head,.dyr-modal__body,.dyr-modal__foot{padding-left:20px;padding-right:20px}
.dyr-modal__grid{grid-template-columns:1fr}
}
/* =================================================================
LEGAL PAGES (privacy/terms)
================================================================= */
.dyr-legal{max-width:900px;margin:0 auto}
.dyr-legal h2{font-size:22px;font-weight:700;color:var(--c-text);margin:40px 0 12px}
.dyr-legal h2:first-child{margin-top:0}
.dyr-legal p,.dyr-legal li{font-size:15px;color:var(--c-text-soft);line-height:1.8}
.dyr-legal ul,.dyr-legal ol{padding-left:20px;margin:8px 0}
.dyr-legal__notice{
background:var(--c-bg-alt);padding:24px;border-radius:var(--r-md);
border-left:3px solid var(--c-primary);margin-bottom:32px;
font-size:14px;color:var(--c-text-soft);
}
/* =================================================================
READ PAGE (product-read.php — 단일 게시글 상세)
================================================================= */
.dyr-read{
width:100%;
}
.dyr-read__hero{
margin:0 0 32px;border-radius:var(--r-lg);overflow:hidden;
aspect-ratio:21/9;background:#eef2f8;
}
.dyr-read__hero img{width:100%;height:100%;object-fit:cover;display:block}
.dyr-read__meta{
display:flex;gap:14px;font-size:13px;color:var(--c-text-muted);
padding:18px 0;border-bottom:1px solid var(--c-line);margin-bottom:40px;
}
.dyr-read__body{
font-size:17px;line-height:1.9;color:var(--c-text);
min-height:120px;
/* 텍스트는 가독성을 위해 다소 좁게, 다른 요소(이미지/제목 등)는 풀 폭 */
}
/* 쇼핑몰 카테고리 CTA — product-read.php 본문 아래 */
.dyr-shop-cta{
display:flex;align-items:center;gap:18px;
margin:32px 0 8px;padding:20px 24px;
background:linear-gradient(135deg, #0b1c3d 0%, #1b3a6b 100%);
border-radius:14px;text-decoration:none;color:#fff;
box-shadow:0 18px 40px -22px rgba(11,28,61,.4);
transition:transform .2s ease, box-shadow .2s ease;
max-width:920px;
}
.dyr-shop-cta:hover{
transform:translateY(-2px);
box-shadow:0 28px 56px -26px rgba(11,28,61,.55);
}
.dyr-shop-cta__icon{
flex-shrink:0;width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.12);color:#fff;
display:flex;align-items:center;justify-content:center;
}
.dyr-shop-cta__icon svg{width:24px;height:24px}
.dyr-shop-cta__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dyr-shop-cta__text strong{
font-size:16px;font-weight:700;color:#fff;line-height:1.4;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dyr-shop-cta__text small{
font-size:12.5px;color:rgba(255,255,255,.75);
}
.dyr-shop-cta__arrow{
flex-shrink:0;font-size:24px;font-weight:300;
color:rgba(255,255,255,.85);
transition:transform .2s ease;
}
.dyr-shop-cta:hover .dyr-shop-cta__arrow{transform:translateX(4px)}
@media (max-width:560px){
.dyr-shop-cta{padding:16px 18px;gap:14px}
.dyr-shop-cta__icon{width:40px;height:40px}
.dyr-shop-cta__text strong{font-size:14.5px;white-space:normal}
}
.dyr-read__body > p,
.dyr-read__body > ul,
.dyr-read__body > ol,
.dyr-read__body > blockquote{
max-width:920px;
}
.dyr-read__body > h2,
.dyr-read__body > h3{
max-width:1100px;
}
.dyr-read__body h2,
.dyr-read__body h3{
font-weight:700;letter-spacing:-.01em;color:var(--c-text);
margin:42px 0 16px;
}
.dyr-read__body h2{font-size:24px}
.dyr-read__body h3{font-size:19px}
.dyr-read__body p{margin:0 0 18px}
.dyr-read__body ul,.dyr-read__body ol{padding-left:24px;margin:0 0 18px}
.dyr-read__body li{margin:6px 0}
.dyr-read__body a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.dyr-read__body img{
max-width:100%;height:auto;display:block;
margin:24px auto;border-radius:var(--r-md);
}
.dyr-read__body blockquote{
margin:24px 0;padding:16px 22px;
border-left:3px solid var(--c-primary);
background:var(--c-bg-alt);color:var(--c-text-soft);
font-style:italic;border-radius:0 6px 6px 0;
}
.dyr-read__body code{
background:#f5f6f8;padding:2px 6px;border-radius:4px;
font-size:.92em;color:#b91c1c;
}
.dyr-read__cta{margin:40px 0;text-align:center}
/* 리드 페이지 하단 무한 슬라이드 갤러리 */
.dyr-pgallery{
margin:64px -32px 0;
overflow:hidden;
}
.dyr-pgallery__swiper{
width:100%;padding:8px 0;
}
.dyr-pgallery__swiper .swiper-wrapper{
transition-timing-function:linear !important;
}
.dyr-pgallery__swiper .swiper-slide{
width:auto;height:340px;
border-radius:14px;overflow:hidden;
background:#0b1220;
}
.dyr-pgallery__swiper .swiper-slide img{
display:block;height:100%;width:auto;object-fit:cover;
user-select:none;-webkit-user-drag:none;
}
.dyr-read__nav{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:stretch;
margin-top:48px;padding-top:32px;border-top:1px solid var(--c-line);
}
.dyr-read__nav-link{
display:flex;flex-direction:column;justify-content:center;gap:4px;
padding:14px 18px;
background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);
text-decoration:none;color:inherit;
transition:all .15s var(--ease);
}
.dyr-read__nav-link:hover{border-color:var(--c-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.dyr-read__nav-link span{font-size:11px;letter-spacing:.14em;color:var(--c-primary-2);font-weight:600}
.dyr-read__nav-link strong{font-size:14px;color:var(--c-text);font-weight:600;line-height:1.5}
.dyr-read__nav-link--next{text-align:right}
.dyr-read__nav-link.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.dyr-read__nav-list{
display:flex;align-items:center;justify-content:center;
padding:14px 22px;
background:transparent;color:var(--c-text);
border:1px solid var(--c-line);
border-radius:var(--r-md);
font-size:14px;font-weight:600;letter-spacing:.02em;
text-decoration:none;
transition:all .15s var(--ease);
}
.dyr-read__nav-list:hover{border-color:var(--c-primary);color:var(--c-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
@media (max-width:760px){
.dyr-read__nav{grid-template-columns:1fr}
.dyr-read__nav-link--next{text-align:left}
}
/* =================================================================
PROJECT READ — 고도화 리드페이지 (HERO/META/BODY/GALLERY/NAV)
================================================================= */
.dyr-pr-hero{
position:relative;min-height:560px;display:flex;align-items:flex-end;
padding:120px 0 60px;overflow:hidden;
background:#0b1220;
}
.dyr-pr-hero__bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
filter:blur(0) brightness(.55) saturate(1.1);
transform:scale(1.04);
transition:transform .8s var(--ease, ease);
}
.dyr-pr-hero:hover .dyr-pr-hero__bg{transform:scale(1.06)}
.dyr-pr-hero__shade{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.85) 100%);
}
.dyr-pr-hero__inner{
position:relative;
max-width:1200px;margin:0 auto;width:100%;padding:0 32px;color:#fff;
}
.dyr-pr-hero__crumb{
display:flex;align-items:center;gap:10px;
font-size:12px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.7);
margin-bottom:28px;
}
.dyr-pr-hero__crumb a{color:rgba(255,255,255,.85);text-decoration:none;transition:color .15s ease}
.dyr-pr-hero__crumb a:hover{color:#fff}
.dyr-pr-hero__crumb i{font-size:10px;color:rgba(255,255,255,.4)}
.dyr-pr-hero__crumb > span{
color:#fff;font-weight:700;max-width:520px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dyr-pr-hero__idx{
display:inline-flex;align-items:baseline;gap:8px;
margin:0 0 14px;
font-family:'Inter', sans-serif;
}
.dyr-pr-hero__idx span{
font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1;
}
.dyr-pr-hero__idx em{
font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;
color:rgba(255,255,255,.55);
}
.dyr-pr-hero__title{
font-size:48px;line-height:1.2;font-weight:800;letter-spacing:-.02em;
margin:0 0 12px;max-width:900px;
}
.dyr-pr-hero__subtitle{
font-size:18px;color:rgba(255,255,255,.78);font-weight:400;letter-spacing:.01em;
margin:0;max-width:760px;line-height:1.5;
}
.dyr-pr-hero__badge{
display:inline-flex;align-items:center;gap:8px;
margin-top:18px;background:rgba(255,179,71,.18);color:#ffd084;
padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
border:1px solid rgba(255,179,71,.3);
}
@media (max-width:760px){
.dyr-pr-hero{min-height:420px;padding:90px 0 40px}
.dyr-pr-hero__title{font-size:30px}
.dyr-pr-hero__subtitle{font-size:15.5px}
.dyr-pr-hero__idx span{font-size:26px}
}
/* META STRIP */
.dyr-pr-meta{
background:#fff;border-bottom:1px solid var(--c-line);
}
.dyr-pr-meta__inner{
max-width:1200px;margin:0 auto;padding:18px 32px;
display:flex;align-items:center;gap:30px;flex-wrap:wrap;
}
.dyr-pr-meta__cell{
display:flex;align-items:center;gap:12px;
padding:8px 0;
}
.dyr-pr-meta__cell i{
width:38px;height:38px;border-radius:10px;
background:#f1f5fb;color:var(--c-primary);
display:flex;align-items:center;justify-content:center;
font-size:15px;
}
.dyr-pr-meta__cell small{
display:block;font-size:10.5px;letter-spacing:.18em;
color:var(--c-text-muted);font-weight:700;text-transform:uppercase;
margin-bottom:3px;
}
.dyr-pr-meta__cell strong{
display:block;font-size:14.5px;color:var(--c-text);font-weight:700;letter-spacing:-.005em;
}
.dyr-pr-meta__cta{
margin-left:auto;display:inline-flex;align-items:center;gap:9px;
padding:11px 20px;border-radius:999px;
background:linear-gradient(135deg, var(--c-primary), var(--c-primary-2, var(--c-primary)));
color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.01em;
text-decoration:none;
box-shadow:0 14px 28px -16px rgba(11,28,61,.45);
transition:transform .15s ease, box-shadow .15s ease;
}
.dyr-pr-meta__cta:hover{
transform:translateY(-2px);
box-shadow:0 22px 38px -18px rgba(11,28,61,.55);
}
.dyr-pr-meta__cta i{font-size:13px}
@media (max-width:760px){
.dyr-pr-meta__inner{gap:18px;padding:14px 18px}
.dyr-pr-meta__cta{margin-left:0;width:100%;justify-content:center}
}
/* ============================================================
PROJECT READ — MAGAZINE SPLIT HERO (좌사진 + 우 3-row 수직 정렬)
============================================================ */
.dyr-pr-hero2{
background:var(--c-bg, #fff);
padding:72px 0 88px; /* 위 subhero 가 있을 때 자연스럽게 — top 줄임 */
border-bottom:1px solid var(--c-line, #e6e8ec);
}
.dyr-pr-hero2__inner{
max-width:1280px;margin:0 auto;padding:0 32px;
display:grid;
grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
gap:72px;
align-items:stretch; /* 우측 패널이 사진 높이까지 stretch */
}
/* ── 좌측 사진 ── */
.dyr-pr-hero2__media{
position:relative;overflow:hidden;
border-radius:6px;
aspect-ratio:4/3;
background:var(--c-bg-alt, #f4f5f8);
box-shadow:0 32px 64px -36px rgba(11,28,61,.42);
}
.dyr-pr-hero2__media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s var(--ease, ease);
}
.dyr-pr-hero2__media:hover img{transform:scale(1.04);}
/* ── 우측 패널 — 3-row 수직 균등 (justify-content:space-between) ── */
.dyr-pr-hero2__panel{
display:flex;flex-direction:column;justify-content:space-between;
min-width:0;padding:6px 0;gap:24px;
}
.dyr-pr-hero2__row{display:flex;flex-direction:column;min-width:0;}
/* ── ROW 1: 브레드크럼 + chip (수평 정렬, 양끝) ── */
.dyr-pr-hero2__row--top{
flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
padding-bottom:20px;
border-bottom:1px solid var(--c-line, #e6e8ec);
}
.dyr-pr-hero2__crumb{
display:flex;gap:10px;align-items:center;
font-size:11px;color:var(--c-text-muted, #6b7a8c);
letter-spacing:.18em;text-transform:uppercase;font-weight:700;
}
.dyr-pr-hero2__crumb a{color:inherit;text-decoration:none;transition:color .15s;}
.dyr-pr-hero2__crumb a:hover{color:var(--c-text, #0b1c3d);}
.dyr-pr-hero2__crumb span{opacity:.4;font-weight:400;}
.dyr-pr-hero2__chip{
display:inline-flex;align-items:center;
padding:5px 12px;border-radius:999px;
background:var(--c-primary, #0b1c3d);color:#fff;
font-size:11px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;flex-shrink:0;
}
/* ── ROW 2: 제목 메인 ── */
.dyr-pr-hero2__row--main{
gap:14px;flex:1;justify-content:center;
}
.dyr-pr-hero2__eyebrow{
margin:0;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
color:var(--c-text-muted, #6b7a8c);
}
.dyr-pr-hero2__title{
font-size:clamp(32px, 4vw, 54px);font-weight:800;letter-spacing:-.025em;
margin:0;line-height:1.08;color:var(--c-text, #0b1c3d);
word-break:keep-all;
}
.dyr-pr-hero2__sub{
font-size:17px;color:var(--c-text-soft, #4a5568);
margin:4px 0 0;line-height:1.55;font-weight:500;
letter-spacing:-.005em;
}
/* ── ROW 3: 메타 그리드 (LOCATION / YEAR / PHOTOS) ── */
.dyr-pr-hero2__row--meta{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:20px 32px;
padding-top:22px;
border-top:1px solid var(--c-line, #e6e8ec);
}
.dyr-pr-hero2__metaitem{
display:flex;flex-direction:column;gap:7px;min-width:0;
}
.dyr-pr-hero2__metakey{
font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:var(--c-text-muted, #6b7a8c);
}
.dyr-pr-hero2__metaval{
font-size:15px;font-weight:600;color:var(--c-text, #0b1c3d);
line-height:1.35;word-break:break-word;font-variant-numeric:tabular-nums;
}
/* ── 비공개 배지 (관리자) ── */
.dyr-pr-hero2__badge{
display:inline-flex;align-items:center;gap:8px;
margin:14px 0 0;padding:7px 12px;
background:#fef3c7;color:#92400e;
border-radius:6px;font-size:12px;font-weight:600;
width:fit-content;
}
@media (max-width: 1100px){
.dyr-pr-hero2__inner{gap:48px;}
.dyr-pr-hero2__title{font-size:clamp(28px, 3.6vw, 44px);}
}
@media (max-width: 900px){
.dyr-pr-hero2{padding:40px 0 48px;}
.dyr-pr-hero2__inner{
grid-template-columns:1fr;
gap:32px;
padding:0 20px;
}
.dyr-pr-hero2__media{aspect-ratio:16/10;border-radius:4px;}
.dyr-pr-hero2__panel{padding:0;gap:20px;}
.dyr-pr-hero2__title{font-size:28px;}
.dyr-pr-hero2__sub{font-size:14.5px;}
.dyr-pr-hero2__row--meta{grid-template-columns:repeat(2, 1fr);gap:16px 24px;}
.dyr-pr-hero2__row--top{padding-bottom:14px;}
.dyr-pr-hero2__row--meta{padding-top:18px;}
}
/* BODY ARTICLE */
.dyr-pr-article{max-width:1280px;margin:0 auto}
.dyr-pr-body__text{}
.dyr-pr-body__text > p > img,
.dyr-pr-body__text > img{
width:100%;max-width:none;
border-radius:16px;
box-shadow:0 28px 60px -32px rgba(11,28,61,.35);
margin:28px 0;
cursor:zoom-in;
transition:transform .25s var(--ease, ease);
}
.dyr-pr-body__text > p > img:hover,
.dyr-pr-body__text > img:hover{transform:translateY(-2px)}
.dyr-pr-body__text h4{
font-size:22px;font-weight:700;letter-spacing:-.01em;
margin:40px 0 18px;color:var(--c-text);
padding-bottom:10px;border-bottom:2px solid var(--c-primary);
display:inline-block;
}
.dyr-pr-body__text p{
font-size:17px;line-height:1.85;color:var(--c-text);
margin:0 0 18px;max-width:920px;
}
/* GALLERY — 벤토 그리드 */
.dyr-pr-gallery{margin:72px 0 0}
.dyr-pr-gallery__head{margin-bottom:28px}
.dyr-pr-gallery__eyebrow{
font-size:11px;letter-spacing:.22em;color:var(--c-primary);
font-weight:700;margin:0 0 8px;
}
.dyr-pr-gallery__title{
font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--c-text);
margin:0;
}
.dyr-pr-gallery__bento{
display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));
gap:14px;
}
.dyr-pr-gallery__cell{
position:relative;display:block;overflow:hidden;min-width:0;
border-radius:14px;background:#0b1220;
grid-column:span 2;aspect-ratio:4/3;
cursor:pointer;
isolation:isolate;
}
.dyr-pr-gallery__cell--hero{
grid-column:span 6;aspect-ratio:16/7;border-radius:18px;
}
.dyr-pr-gallery__cell--wide{
grid-column:span 3;aspect-ratio:16/9;
}
.dyr-pr-gallery__cell.is-hidden{display:none}
.dyr-pr-gallery__cell img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s var(--ease, ease);
}
.dyr-pr-gallery__cell:hover img{transform:scale(1.035)}
.dyr-pr-gallery__hover{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(11,18,32,0) 50%, rgba(11,18,32,.5) 100%);
display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity .2s ease;
pointer-events:none;
}
.dyr-pr-gallery__hover i{
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.95);color:#0b1c3d;
display:flex;align-items:center;justify-content:center;
font-size:16px;
box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
transform:translateY(6px);
transition:transform .2s ease;
}
.dyr-pr-gallery__cell:hover .dyr-pr-gallery__hover{opacity:1}
.dyr-pr-gallery__cell:hover .dyr-pr-gallery__hover i{transform:translateY(0)}
.dyr-pr-gallery__more{
margin:24px auto 0;display:flex;align-items:center;gap:10px;
padding:14px 28px;border-radius:999px;
background:#fff;color:var(--c-text);
border:1px solid var(--c-line);
font-size:14px;font-weight:600;letter-spacing:.01em;
cursor:pointer;
transition:border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dyr-pr-gallery__more:hover{
border-color:var(--c-primary);color:var(--c-primary);
transform:translateY(-2px);
box-shadow:0 18px 40px -22px rgba(11,28,61,.25);
}
.dyr-pr-gallery__more i{font-size:12px;color:var(--c-primary)}
.dyr-pr-gallery__more.is-hidden{display:none}
@media (max-width:760px){
.dyr-pr-gallery__bento{grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px}
.dyr-pr-gallery__cell{grid-column:span 2;aspect-ratio:1/1}
.dyr-pr-gallery__cell--hero{grid-column:span 4;aspect-ratio:4/3;border-radius:14px}
.dyr-pr-gallery__cell--wide{grid-column:span 2;aspect-ratio:1/1}
}
/* INLINE INQUIRY CARD */
.dyr-pr-inquiry{
margin:56px 0 0;padding:28px 32px;
background:linear-gradient(135deg, #0b1c3d 0%, #1b3a6b 100%);
border-radius:18px;color:#fff;
display:flex;align-items:center;gap:24px;
box-shadow:0 28px 60px -28px rgba(11,28,61,.4);
}
.dyr-pr-inquiry__icon{
flex-shrink:0;width:54px;height:54px;border-radius:14px;
background:rgba(255,255,255,.12);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:22px;
}
.dyr-pr-inquiry__text{flex:1;min-width:0}
.dyr-pr-inquiry__text strong{
display:block;font-size:17px;font-weight:700;letter-spacing:-.005em;
color:#fff;margin-bottom:5px;
}
.dyr-pr-inquiry__text small{
font-size:13px;color:rgba(255,255,255,.72);line-height:1.55;
}
.dyr-pr-inquiry__btn{
flex-shrink:0;display:inline-flex;align-items:center;gap:10px;
padding:13px 22px;border-radius:999px;
background:#fff;color:var(--c-text);
font-size:14px;font-weight:700;text-decoration:none;
transition:transform .15s ease;
}
.dyr-pr-inquiry__btn:hover{transform:translateX(3px)}
.dyr-pr-inquiry__btn i{font-size:12px;color:var(--c-primary)}
@media (max-width:760px){
.dyr-pr-inquiry{flex-direction:column;align-items:flex-start;padding:22px}
.dyr-pr-inquiry__btn{width:100%;justify-content:center}
}
/* PREV/NEXT NAV WITH THUMBS */
.dyr-pr-nav{
display:grid;grid-template-columns:1fr auto 1fr;gap:14px;
margin-top:48px;padding-top:32px;border-top:1px solid var(--c-line);
}
.dyr-pr-nav__link{
display:flex;align-items:center;gap:14px;
padding:14px;background:#fff;
border:1px solid var(--c-line);border-radius:14px;
text-decoration:none;color:inherit;
transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
min-height:88px;
}
.dyr-pr-nav__link:hover{
border-color:var(--c-primary);transform:translateY(-2px);
box-shadow:0 18px 40px -22px rgba(11,28,61,.25);
}
.dyr-pr-nav__link.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.dyr-pr-nav__thumb{
flex-shrink:0;width:80px;height:60px;border-radius:8px;
background:#eef2f8 center/cover;
}
.dyr-pr-nav__txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.dyr-pr-nav__txt small{
font-size:10.5px;letter-spacing:.14em;color:var(--c-primary);
font-weight:700;text-transform:uppercase;
display:inline-flex;align-items:center;gap:6px;
}
.dyr-pr-nav__txt strong{
font-size:14px;color:var(--c-text);font-weight:600;line-height:1.45;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.dyr-pr-nav__txt--right{text-align:right}
.dyr-pr-nav__txt--right small{justify-content:flex-end}
.dyr-pr-nav__list{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:0 22px;background:#fff;
border:1px solid var(--c-line);border-radius:14px;
font-size:13.5px;font-weight:600;color:var(--c-text);
text-decoration:none;letter-spacing:.02em;
transition:all .15s ease;
}
.dyr-pr-nav__list:hover{border-color:var(--c-primary);color:var(--c-primary)}
.dyr-pr-nav__list i{font-size:13px;color:var(--c-primary)}
@media (max-width:860px){
.dyr-pr-nav{grid-template-columns:1fr}
.dyr-pr-nav__txt--right{text-align:left}
.dyr-pr-nav__txt--right small{justify-content:flex-start}
.dyr-pr-nav__list{padding:14px 22px}
}
/* 관련 프로젝트 — 데스크탑은 grid 그대로, 캐러셀 네비 버튼 숨김 */
.dyr-pr-related{position:relative;}
.dyr-pr-related__track{
display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
}
.dyr-pr-related__nav{display:none;}
/* ============================================================
PROJECT-READ 모바일 컴팩트 baseline (≤640px)
shop/support/about/solution 와 통일된 룩
============================================================ */
@media (max-width:640px){
/* === HERO === */
.dyr-pr-hero{
min-height:0;padding:calc(var(--header-h) + 26px) 0 22px;
}
.dyr-pr-hero__inner{padding:0 12px;}
.dyr-pr-hero__crumb{
font-size:11px;gap:6px;margin-bottom:14px;letter-spacing:.08em;
flex-wrap:wrap;
}
.dyr-pr-hero__crumb i{font-size:8px;}
.dyr-pr-hero__crumb > span{max-width:none;white-space:normal;}
.dyr-pr-hero__title{
font-size:22px;line-height:1.25;margin:0 0 6px;
}
.dyr-pr-hero__subtitle{
font-size:13px;line-height:1.55;word-break:keep-all;
}
.dyr-pr-hero__badge{
font-size:11px;padding:5px 10px;margin-top:12px;gap:6px;
}
/* === BODY 섹션 — 인라인 padding-top:64px 오버라이드 === */
[data-page="projects"] section.dyr-pr-body{padding:24px 0 28px !important;}
[data-page="projects"] .dyr-pr-body .dyr-section__inner{padding:0 12px;}
.dyr-pr-article{max-width:none;}
.dyr-pr-body__text h4{
font-size:16px;margin:24px 0 12px;padding-bottom:6px;border-bottom-width:1.5px;
}
.dyr-pr-body__text p{
font-size:14px;line-height:1.75;margin-bottom:14px;
}
.dyr-pr-body__text > p > img,
.dyr-pr-body__text > img{
margin:18px 0;border-radius:10px;
}
/* === GALLERY — 모바일 2열 컴팩트 === */
.dyr-pr-gallery{margin-top:36px;}
.dyr-pr-gallery__head{margin-bottom:14px;}
.dyr-pr-gallery__eyebrow{
font-size:10px;letter-spacing:.18em;margin-bottom:5px;
}
.dyr-pr-gallery__title{font-size:18px;line-height:1.3;}
.dyr-pr-gallery__bento{
grid-template-columns:repeat(2, 1fr) !important;gap:8px;
}
.dyr-pr-gallery__cell{
grid-column:span 1 !important;aspect-ratio:1/1 !important;
border-radius:8px;
}
.dyr-pr-gallery__cell--hero{
grid-column:span 2 !important;aspect-ratio:4/3 !important;border-radius:10px;
}
.dyr-pr-gallery__cell--wide{
grid-column:span 1 !important;aspect-ratio:1/1 !important;
}
.dyr-pr-gallery__hover i{width:36px;height:36px;font-size:14px;}
.dyr-pr-gallery__more{
margin-top:14px;padding:10px 20px;font-size:12.5px;gap:6px;border-radius:999px;
}
.dyr-pr-gallery__more i{font-size:11px;}
/* === INQUIRY CTA 카드 === */
.dyr-pr-inquiry{
margin-top:32px;padding:18px 16px;gap:14px;border-radius:14px;
}
.dyr-pr-inquiry__icon{
width:42px;height:42px;font-size:18px;border-radius:11px;
}
.dyr-pr-inquiry__text strong{font-size:14px;margin-bottom:3px;}
.dyr-pr-inquiry__text small{font-size:12px;line-height:1.5;}
.dyr-pr-inquiry__btn{
padding:10px 16px;font-size:12.5px;gap:6px;
}
/* === PREV/NEXT NAV === */
.dyr-pr-nav{
margin-top:32px;padding-top:24px;gap:8px;
}
.dyr-pr-nav__link{
padding:10px;gap:10px;min-height:0;border-radius:10px;
}
.dyr-pr-nav__thumb{width:64px;height:48px;border-radius:6px;}
.dyr-pr-nav__txt small{font-size:9.5px;letter-spacing:.12em;gap:4px;}
.dyr-pr-nav__txt strong{
font-size:12.5px;line-height:1.4;-webkit-line-clamp:2;line-clamp:2;
}
.dyr-pr-nav__list{
padding:10px 20px;font-size:12.5px;gap:6px;border-radius:10px;
}
.dyr-pr-nav__list i{font-size:12px;}
/* === 관련 프로젝트 — 1카드 캐러셀 (< > 버튼) === */
/* 섹션 패딩 컴팩트 */
[data-page="projects"] .dyr-pr-related-section.dyr-section{padding:32px 0;}
[data-page="projects"] .dyr-pr-related-section .dyr-section__inner{padding:0 12px;}
[data-page="projects"] .dyr-pr-related-section .dyr-section__head{margin-bottom:18px;}
[data-page="projects"] .dyr-pr-related-section .dyr-section__title{
font-size:20px;line-height:1.25;
}
[data-page="projects"] .dyr-pr-related-section .dyr-section__eyebrow{
font-size:10px;letter-spacing:.18em;margin-bottom:6px;
}
/* 트랙 — 모바일에선 grid 무력화하고 가로 flex로 전환 */
.dyr-pr-related{position:relative;}
.dyr-pr-related__track{
display:flex !important;
grid-template-columns:none !important;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
gap:12px !important;
/* 좌우 풀블리드 — 12px section padding 보정 + 카드 양옆 약간 여유 */
margin:0 -12px;padding:4px 12px 4px;
}
.dyr-pr-related__track::-webkit-scrollbar{display:none;}
/* 카드 1개씩 = 100% 가용폭, snap center */
.dyr-pr-related__track > .dyr-prod{
flex:0 0 calc(100vw - 48px);
max-width:calc(100vw - 48px);
scroll-snap-align:center;
/* dyr-prod 글로벌 컴팩트 룰 그대로 상속 (4:3 사진, 14/11.5 텍스트) */
}
/* 좌우 네비 버튼 — 트랙 위로 오버레이 */
.dyr-pr-related__nav{
position:absolute;top:50%;transform:translateY(-50%);
width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.92);
border:1px solid var(--c-line);color:var(--c-text);
display:flex;align-items:center;justify-content:center;
cursor:pointer;z-index:5;
box-shadow:0 6px 16px rgba(11,28,61,.16);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:opacity .2s ease, transform .15s ease;
padding:0;
}
.dyr-pr-related__nav i{font-size:13px;line-height:1;}
.dyr-pr-related__nav--prev{left:-2px;}
.dyr-pr-related__nav--next{right:-2px;}
.dyr-pr-related__nav.is-off{opacity:.35;pointer-events:none;}
.dyr-pr-related__nav:active{transform:translateY(-50%) scale(.94);}
/* === 하단 CTA === */
[data-page="projects"] section.dyr-cta{padding:32px 0;}
}
/* =================================================================
PAGINATION
================================================================= */
.dyr-pager{
margin:48px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.dyr-pager__info{
font-size:13px;color:var(--c-text-muted);letter-spacing:.01em;
}
.dyr-pager__info strong{
font-weight:700;color:var(--c-primary);font-size:14px;margin:0 2px;
}
.dyr-pager ul{display:flex;gap:6px;align-items:center;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.dyr-pager a,.dyr-pager > ul > li > span{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 14px;
border-radius:6px;border:1px solid var(--c-line);
background:#fff;color:var(--c-text);
font-size:13.5px;font-weight:600;
text-decoration:none;transition:all .15s var(--ease);
}
.dyr-pager a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.dyr-pager .is-current{
background:var(--c-primary);color:#fff;border-color:var(--c-primary);cursor:default;
}
.dyr-pager .is-disabled{opacity:.4;cursor:not-allowed;background:#f5f6f8}
.dyr-pager .is-gap, .dyr-pager__gap{
border-color:transparent !important;background:transparent !important;
padding:0 4px !important;min-width:24px !important;color:var(--c-text-muted) !important;
}
.dyr-pager a i, .dyr-pager span i{font-size:12px}
/* 모바일 — 페이지네이션 한 줄 컴팩트 */
@media (max-width: 640px){
.dyr-pager{margin-top:32px;gap:10px;}
.dyr-pager ul{gap:4px;flex-wrap:nowrap;}
.dyr-pager a, .dyr-pager > ul > li > span{
min-width:32px;height:32px;padding:0 6px;font-size:12.5px;
}
.dyr-pager .is-gap, .dyr-pager__gap{
min-width:18px !important;padding:0 2px !important;font-size:12px;
}
.dyr-pager a i, .dyr-pager span i{font-size:11px;}
.dyr-pager__info{font-size:12px;}
.dyr-pager__info strong{font-size:13px;}
}
/* projects.php — 검색/필터 결과 없을 때 */
.dyr-plist__empty{
text-align:center;padding:64px 20px;color:var(--c-text-muted);
background:#fff;border:1px dashed var(--c-line);border-radius:14px;
}
.dyr-plist__empty[hidden]{display:none}
.dyr-plist__empty i{
font-size:32px;color:#cbd5e1;margin-bottom:16px;display:inline-block;
}
.dyr-plist__empty p{
font-size:16px;font-weight:600;color:var(--c-text);margin:0 0 6px;
}
.dyr-plist__empty small{
font-size:13px;color:var(--c-text-muted);
}
/* =================================================================
ADMIN INLINE BUTTONS (사이트 페이지에 노출)
================================================================= */
.dyr-admin-bar{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:14px 20px;margin-bottom:32px;
background:linear-gradient(135deg,#fff8e6,#fff3c4);
border:1px solid #f3d36a;border-radius:8px;
font-size:13.5px;color:#7a5f00;
}
.dyr-admin-bar__label{display:flex;align-items:center;gap:8px;font-weight:600}
.dyr-admin-bar__label::before{content:'⚙';font-size:16px}
.dyr-admin-bar__actions{display:flex;gap:8px;flex-wrap:wrap}
/* product 카드 wrapper — grid 아이템이 됨 (form/button 을 anchor 외부에 두기 위함) */
.dyr-prod-wrap{position:relative;display:flex;flex-direction:column}
.dyr-prod-wrap .dyr-prod{flex:1}
.dyr-admin-actions{
position:absolute;top:12px;right:12px;
display:flex;gap:6px;
opacity:0;transform:translateY(-4px);
transition:all .2s var(--ease);
z-index:5;
}
.dyr-admin-actions__form{display:inline;margin:0;padding:0}
.dyr-prod-wrap:hover .dyr-admin-actions,
.dyr-prod:hover .dyr-admin-actions,
.dyr-card:hover .dyr-admin-actions{opacity:1;transform:translateY(0)}
.dyr-admin-action{
display:inline-flex;align-items:center;
padding:6px 12px;border-radius:6px;
font-size:12px;font-weight:600;
background:rgba(0,0,0,.75);color:#fff;
text-decoration:none;backdrop-filter:blur(8px);
border:0;cursor:pointer;
}
.dyr-admin-action:hover{background:#1b3a6b}
.dyr-admin-action--danger{background:rgba(185,28,28,.85)}
.dyr-admin-action--danger:hover{background:#7f1d1d}
/* admin nav item in main header */
.dyr-nav__item--admin > a{
background:#fef3c7;color:#92400e;border-radius:6px;padding:6px 12px!important;
font-size:12.5px;
}
.dyr-nav__item--admin > a:hover{background:#fde68a}
/* 관리자 모드 보기 토글 (헤더) */
.dyr-nav__item--admin-toggle{display:flex;align-items:center}
.dyr-admin-toggle{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
padding:6px 10px 6px 8px;border-radius:6px;
background:transparent;
transition:background .15s ease;
}
.dyr-admin-toggle:hover{background:rgba(146,64,14,.08)}
.dyr-admin-toggle input{
position:absolute;width:0;height:0;opacity:0;pointer-events:none;
}
.dyr-admin-toggle__track{
position:relative;width:32px;height:18px;border-radius:999px;
background:#cbd5e1;transition:background .2s ease;
flex-shrink:0;
}
.dyr-admin-toggle__thumb{
position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
transition:transform .2s ease;
}
.dyr-admin-toggle input:checked + .dyr-admin-toggle__track{
background:#92400e;
}
.dyr-admin-toggle input:checked + .dyr-admin-toggle__track .dyr-admin-toggle__thumb{
transform:translateX(14px);
}
.dyr-admin-toggle__label{
font-size:11.5px;font-weight:600;color:#92400e;letter-spacing:.02em;
white-space:nowrap;
}
/* 관리자 모드 OFF — admin UI 모두 숨김 (단, 헤더의 관리자 버튼+토글은 유지) */
html.is-admin-hidden .dyr-admin-bar,
html.is-admin-hidden .dyr-admin-action,
html.is-admin-hidden [data-admin-only]{display:none !important}
/* product card needs relative for admin actions */
.dyr-prod,.dyr-card{position:relative}
/* =================================================================
CTA BAR
================================================================= */
.dyr-cta{background:linear-gradient(135deg,#0b1220,#1b3a6b)}
.dyr-cta__inner{
display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.dyr-cta__inner > div{max-width:680px}
/* 모바일 — CTA 타이틀 자연스러운 줄바꿈 (Korean keep-all + 사이즈 축소) */
@media (max-width: 640px){
.dyr-cta{padding-left:0;padding-right:0;}
.dyr-cta .dyr-section__inner{padding-left:20px;padding-right:20px;}
.dyr-cta .dyr-section__eyebrow{
font-size:11px;letter-spacing:.22em;margin-bottom:10px;
}
.dyr-cta .dyr-section__title{
font-size:clamp(20px, 5.6vw, 26px);
line-height:1.35;letter-spacing:-.015em;
word-break:keep-all;overflow-wrap:break-word;
margin-bottom:14px;
}
/* 줄바꿈 br 무력화 — 폭에 맞춰 자연스럽게 흐르도록 */
.dyr-cta .dyr-section__title br{display:none;}
.dyr-cta .dyr-btn{padding:11px 22px;font-size:13.5px;}
}
/* =================================================================
REVEAL
================================================================= */
.dyr-reveal{opacity:0;transform:translateY(28px);transition:all .8s var(--ease)}
.dyr-reveal.is-in{opacity:1;transform:translateY(0)}
/* =================================================================
RESPONSIVE
================================================================= */
@media (max-width: 1080px){
.dyr-grid--products{grid-template-columns:repeat(3,1fr)}
.dyr-grid--support{grid-template-columns:repeat(2,1fr)}
.dyr-values,.dyr-certgrid,.dyr-loc,.dyr-pcat,.dyr-plist,.dyr-ci-color{grid-template-columns:repeat(2,1fr)}
.dyr-stats-strip .dyr-stats{grid-template-columns:repeat(2,1fr)}
.dyr-detail{grid-template-columns:200px 1fr;gap:32px}
.dyr-features{grid-template-columns:repeat(2,1fr)}
.dyr-gallery,.dyr-related,.dyr-others,.dyr-pcol{grid-template-columns:repeat(2,1fr)}
.dyr-mega{min-width:480px}
.dyr-ceo,.dyr-cform{grid-template-columns:1fr;gap:48px}
.dyr-soldetail__row{grid-template-columns:1fr;gap:32px}
.dyr-soldetail__row:nth-child(even) .dyr-soldetail__visual{order:0}
.dyr-projects__scroll .dyr-project{flex:0 0 380px;width:380px;height:320px}
.dyr-projects__head{gap:16px}
.dyr-global__inner,.dyr-contact__inner{grid-template-columns:1fr;gap:48px}
.dyr-global__map{max-width:480px;margin:0 auto;width:100%}
.dyr-footer__inner{grid-template-columns:1fr;gap:40px}
}
@media (max-width: 760px){
.dyr-section{padding:80px 0}
.dyr-section__inner{padding:0 20px}
.dyr-section__head{margin-bottom:40px}
.dyr-header__inner{padding:0 20px}
.dyr-nav{
position:fixed;top:var(--header-h);left:0;right:0;
background:#fff;border-bottom:1px solid var(--c-line);
padding:18px 20px;
transform:translateY(calc(-100% - var(--header-h) - 20px));
transition:transform .3s var(--ease), visibility 0s .3s;
visibility:hidden;
max-height:calc(100vh - var(--header-h));
overflow-y:auto;
}
.dyr-nav.is-open{transform:translateY(0);visibility:visible;transition:transform .3s var(--ease)}
.dyr-nav__list{flex-direction:column;align-items:stretch;gap:2px}
.dyr-nav__item > a{padding:14px 12px;font-size:15px}
.dyr-nav__item > a::after{display:none}
.dyr-nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:18px}
.dyr-burger{display:flex}
/* 모바일에서 JAKOB 파트너 뱃지 숨김 */
.dyr-hero__badge{display:none !important;}
/* 히어로 타이포 — 모바일 최적화 */
.dyr-hero__inner{padding:0 20px;}
.dyr-hero__eyebrow{font-size:10px;letter-spacing:.22em;margin-bottom:16px;gap:8px;}
.dyr-hero__eyebrow-line{width:22px;}
.dyr-hero__eyebrow i{font-size:11px;}
.dyr-hero__title{
font-size:clamp(28px, 7.2vw, 38px);
line-height:1.18;letter-spacing:-.02em;margin-bottom:18px;
}
.dyr-hero__rotate::after{height:2px;bottom:-4px;}
.dyr-hero__desc{
font-size:14px;line-height:1.65;margin-bottom:28px;max-width:none;
}
/* CTA — 한 줄 유지 + 컴팩트 */
.dyr-hero__cta{
flex-wrap:nowrap;gap:10px;margin-bottom:48px;
}
.dyr-hero__cta .dyr-btn{
padding:11px 16px;font-size:13px;gap:6px;flex:1 1 0;min-width:0;
}
.dyr-hero__cta .dyr-btn i{font-size:11px;}
.dyr-hero__stats{gap:12px}
.dyr-hero__stats .dyr-stat{padding:16px 18px 18px;}
.dyr-hero__stats .dyr-stat__icon{top:14px;right:14px;font-size:18px;}
.dyr-grid--products,.dyr-grid--support{grid-template-columns:1fr 1fr}
.dyr-values,.dyr-certgrid,.dyr-loc,.dyr-pcat,.dyr-plist,.dyr-ci-color,.dyr-vm{grid-template-columns:1fr}
.dyr-stats-strip .dyr-stats{grid-template-columns:1fr}
.dyr-vm__watermark{font-size:220px}
.dyr-detail{grid-template-columns:1fr;gap:32px}
.dyr-sidebar{position:static}
.dyr-features{grid-template-columns:repeat(2,1fr)}
.dyr-gallery,.dyr-related,.dyr-others,.dyr-pcol{grid-template-columns:1fr 1fr}
.dyr-intro{padding:32px 24px}
.dyr-mega{display:none}
.dyr-soldetail{gap:80px}
.dyr-tl::before, .dyr-tl::after{left:24px;transform:none}
.dyr-tl__cap{width:120px;height:120px;margin:0 0 24px 0}
.dyr-tl__cap--bottom{margin:24px 0 0 0}
.dyr-tl__item{
width:auto;text-align:left!important;
margin:0 0 28px 60px!important;padding:22px 24px;
}
/* 도트 중앙 = 라인 중앙(x=25.5) — 도트 width:18 → left = 25.5-9-60 = -43.5 */
.dyr-tl__item::before{left:-43.5px!important;right:auto!important;top:54px}
/* 가로 커넥터: 카드 왼쪽 → 라인 우측 가장자리(x=27) — width:33 left:-33 */
.dyr-tl__item .dyr-tl__year::before{left:-33px!important;right:auto!important;width:33px;background:linear-gradient(90deg, var(--tl-accent), transparent)!important}
.dyr-tl__item:nth-child(odd) .dyr-tl__list li{padding:3px 0 3px 16px}
.dyr-tl__item:nth-child(odd) .dyr-tl__list li::before{left:0;right:auto}
.dyr-dl__item{grid-template-columns:80px 1fr;gap:16px;padding:18px}
.dyr-dl__btn{grid-column:1/-1;justify-content:center}
/* 모바일 subhero — shop.php 기준 컴팩트 통일 */
.dyr-subhero{padding:calc(var(--header-h) + 28px) 0 18px;}
.dyr-subhero__inner{padding:0 16px;}
.dyr-subhero__crumb{font-size:11px;margin-bottom:14px;letter-spacing:.08em;}
.dyr-subhero__title{
font-size:24px;line-height:1.2;letter-spacing:-.015em;margin-bottom:8px;
}
.dyr-subhero__desc{
font-size:13px;line-height:1.55;word-break:keep-all;max-width:none;
}
.dyr-subnav{top:var(--header-h)}
.dyr-cta__inner{flex-direction:column;align-items:flex-start}
.dyr-projects__scroll{gap:14px;padding-left:24px;padding-right:24px}
.dyr-projects__scroll .dyr-project{flex:0 0 78vw;width:78vw;height:300px}
/* 옛 가로스크롤 전용 — .dyr-projects__scroll 안에서만 적용되도록 스코프 좁힘 */
.dyr-projects__scroll .dyr-project--more{flex:0 0 60vw !important;width:60vw !important}
/* swiper 안에서는 view-all 카드도 슬라이드 폭을 가득 채움 */
.dyr-projects-swiper .swiper-slide .dyr-project--more{
width:100%;height:100%;flex:1 1 auto;
}
/* 모바일 — PROJECTS 워터마크는 어색하므로 숨김 */
.dyr-projects__bgmark{display:none !important;}
/* 모바일 — PROJECTS 섹션 자체 padding 컴팩트 (기본 80px → 48px) */
.dyr-projects.dyr-section{padding:48px 0;}
/* viewport 풀블리드 — 헤더 padding 은 유지, 캐러셀만 화면 끝까지 확장 */
.dyr-projects > .dyr-section__inner > .dyr-projects__viewport{
margin-left:-20px;margin-right:-20px;
}
/* 모바일 swiper padding 컴팩트 (1245 라인의 기본 60px 보다 작게) */
.dyr-projects-swiper{padding-top:16px;padding-bottom:16px;}
/* 좌·우 네비 — 반투명 + 뷰포트 안쪽으로 (좌:10px 우:10px), 크기도 축소 */
.dyr-projects__nav{
width:40px;height:40px;
background:rgba(255,255,255,.55);
box-shadow:0 6px 18px rgba(0,0,0,.18);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.dyr-projects__nav i{font-size:13px;}
.dyr-projects__nav--prev{left:10px;}
.dyr-projects__nav--next{right:10px;}
.dyr-project__meta{padding:14px 18px 16px;}
.dyr-project__meta h3{font-size:15.5px;}
.dyr-project__loc{font-size:10px;}
.dyr-project__corner{width:18px;height:18px;}
.dyr-project__more-ico{width:60px;height:60px;font-size:24px;}
.dyr-global__list{grid-template-columns:1fr 1fr}
.dyr-contact__form{grid-template-columns:1fr;padding:28px}
.dyr-contact__info li{grid-template-columns:1fr;gap:6px}
.dyr-footer__cols{grid-template-columns:1fr 1fr}
.dyr-footer__bottom{flex-direction:column;text-align:center}
/* ============================================================
ABOUT 페이지 모바일 컴팩트 baseline (overview / history / location / certification / ci)
============================================================ */
/* 좌우 패딩 — shop/support 와 통일된 12px */
[data-page^="about-"] .dyr-section__inner{padding:0 12px;}
[data-page^="about-"] .dyr-section{padding:32px 0;}
[data-page^="about-"] .dyr-section__head{margin-bottom:24px;}
[data-page^="about-"] .dyr-section__title{font-size:22px;line-height:1.25;letter-spacing:-.02em;}
[data-page^="about-"] .dyr-section__eyebrow{font-size:10.5px;letter-spacing:.18em;margin-bottom:8px;}
[data-page^="about-"] .dyr-section__desc{font-size:13px;line-height:1.55;word-break:keep-all;}
/* === Subnav (서브 카테고리 가로 스크롤) === */
.dyr-subnav__inner{padding:0 12px;gap:0;}
.dyr-subnav__item{padding:12px 14px;font-size:12.5px;}
.dyr-subnav__item.is-active::after{left:14px;right:14px;}
/* === about-overview: STATS STRIP === */
.dyr-stats-strip{padding:24px 0;}
.dyr-stats-strip .dyr-stats{gap:10px;}
.dyr-stats-strip .dyr-stat{padding:16px 16px 14px;border-radius:12px;}
.dyr-stats-strip .dyr-stat__ic{
width:32px;height:32px;font-size:14px;margin-bottom:8px;border-radius:9px;
}
.dyr-stats-strip .dyr-stat__num{font-size:22px;margin-bottom:3px;}
.dyr-stats-strip .dyr-stat__label{font-size:10px;letter-spacing:.12em;margin-bottom:3px;}
.dyr-stats-strip .dyr-stat__sub{font-size:11px;}
/* === about-overview: CEO MESSAGE === */
.dyr-ceo-section{padding-bottom:32px;}
.dyr-ceo{gap:24px;}
.dyr-ceo__photo-wrap::after{display:none;}
.dyr-ceo__photo{border-radius:14px;}
.dyr-ceo__qmark{font-size:32px;margin-bottom:0;}
.dyr-ceo__quote{font-size:20px;line-height:1.35;margin:4px 0 18px;}
.dyr-ceo__text p{font-size:13.5px;line-height:1.7;margin-bottom:10px;}
.dyr-ceo__sign{padding:10px 14px;margin-top:20px;gap:10px;border-radius:8px;}
.dyr-ceo__sign-co{font-size:11.5px;}
.dyr-ceo__sign-name{font-size:15px;letter-spacing:.04em;}
/* === about-overview: VISION & MISSION === */
.dyr-vm-section{padding:36px 0;}
.dyr-vm{gap:14px;margin-top:20px;}
.dyr-vm__card{padding:28px 22px 26px;border-radius:14px;}
.dyr-vm__watermark{font-size:160px;right:-8px;bottom:-26px;}
.dyr-vm__ic{
width:40px;height:40px;font-size:16px;margin-bottom:14px;border-radius:10px;
}
.dyr-vm__label{font-size:10.5px;letter-spacing:.24em;margin-bottom:10px;}
.dyr-vm__title{font-size:18px;line-height:1.35;margin-bottom:10px;}
.dyr-vm__sub{font-size:12.5px;}
/* === about-overview: CORE VALUES === */
.dyr-values-section{padding:36px 0;}
.dyr-values{gap:12px;margin-top:20px;}
.dyr-value{padding:24px 20px 22px;border-radius:14px;}
.dyr-value__ic{
width:42px;height:42px;font-size:18px;margin-bottom:14px;border-radius:11px;
}
.dyr-value__num{font-size:11px;letter-spacing:.18em;margin-bottom:6px;}
.dyr-value__title{font-size:19px;margin-bottom:2px;}
.dyr-value__en{font-size:10px;margin-bottom:10px;letter-spacing:.18em;}
.dyr-value__desc{font-size:13px;line-height:1.65;}
/* === about-history: TIMELINE 컴팩트 (이미 좌측 정렬됨, 사이즈만 축소) === */
.dyr-tl{margin-top:24px;padding-bottom:16px;}
.dyr-tl__cap{width:92px;height:92px;}
.dyr-tl__cap i{font-size:14px;margin-bottom:3px;}
.dyr-tl__cap-label{font-size:9px;letter-spacing:.18em;margin-bottom:2px;}
.dyr-tl__cap-year{font-size:13px;letter-spacing:0;}
.dyr-tl__item{
margin:0 0 18px 40px !important;padding:16px 18px;border-radius:12px;
}
/* 도트 중앙 = 라인 중앙(x=25.5) — 도트 width:14 → left = 25.5-7-40 = -21.5 */
.dyr-tl__item::before{
width:14px;height:14px;left:-21.5px !important;top:46px;border-width:2px;
}
/* 가로 커넥터: 카드 왼쪽 → 라인 우측 가장자리(x=27) — width:13 left:-13 */
.dyr-tl__item .dyr-tl__year::before{
left:-13px !important;width:13px;top:53px;
}
.dyr-tl__year{font-size:17px;margin-bottom:4px;}
.dyr-tl__title{font-size:14px;margin-bottom:8px;}
.dyr-tl__list{font-size:12.5px;line-height:1.7;}
.dyr-tl__list li{padding:2px 0 2px 14px;}
.dyr-tl__list li::before{top:12px;width:7px;}
/* === about-location: LOCATION MAP CARDS === */
.dyr-locmap{gap:14px;}
.dyr-locmap__card{border-radius:12px;}
.dyr-locmap__map{min-height:0;aspect-ratio:16/10;}
.dyr-locmap__info{padding:18px 16px;}
.dyr-locmap__tag{font-size:10px;padding:4px 9px;letter-spacing:.14em;}
.dyr-locmap__name{font-size:16px;margin:10px 0 14px;}
.dyr-locmap__lines{gap:10px;margin-bottom:16px;}
.dyr-locmap__lines li{grid-template-columns:26px 1fr;gap:8px;}
.dyr-locmap__lines svg{width:14px;height:14px;padding:5px;border-radius:6px;}
.dyr-locmap__lines span{font-size:9.5px;letter-spacing:.12em;}
.dyr-locmap__lines p{font-size:12.5px;line-height:1.45;}
.dyr-locmap__actions{padding-top:14px;gap:6px;}
.dyr-locmap__btn{padding:8px 10px;font-size:11.5px;gap:5px;border-radius:6px;}
.dyr-locmap__btn svg{width:13px;height:13px;}
}
@media (max-width: 460px){
.dyr-grid--products,.dyr-grid--support{grid-template-columns:1fr}
.dyr-hero__stats{grid-template-columns:1fr;gap:10px;max-width:none}
.dyr-hero__stats .dyr-stat__num,.dyr-stat__num{font-size:26px}
/* 360–390px급 — 타이틀 좀 더 축소 */
.dyr-hero__title{font-size:26px;}
.dyr-projects__nav{width:36px;height:36px;}
.dyr-projects__nav i{font-size:12px;}
}
/* =================================================================
공용 라이트박스
================================================================= */
[data-lightbox]{cursor:zoom-in;transition:filter .15s ease}
[data-lightbox]:hover{filter:brightness(.92)}
.dyr-lbx{
position:fixed;inset:0;z-index:99999;
display:flex;align-items:center;justify-content:center;
padding:48px;
}
.dyr-lbx[hidden]{display:none}
.dyr-lbx__backdrop{
position:absolute;inset:0;background:rgba(8,12,24,.92);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
cursor:default;
}
.dyr-lbx__stage{
position:relative;z-index:2;
max-width:100%;max-height:calc(100vh - 160px);
display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
.dyr-lbx__img{
max-width:100%;max-height:calc(100vh - 160px);
object-fit:contain;border-radius:6px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
pointer-events:auto;cursor:default;
transition:transform .25s ease;
transform-origin:center;
}
.dyr-lbx__close{
position:absolute;top:24px;right:24px;z-index:3;
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.1);border:0;color:#fff;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .15s ease, transform .15s ease;
}
.dyr-lbx__close svg{width:22px;height:22px}
.dyr-lbx__close:hover{background:rgba(255,255,255,.2);transform:scale(1.05)}
.dyr-lbx__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:54px;height:54px;border-radius:50%;
background:rgba(255,255,255,.1);border:0;color:#fff;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .15s ease, transform .15s ease;
}
.dyr-lbx__nav svg{width:28px;height:28px}
.dyr-lbx__nav:hover{background:rgba(255,255,255,.22)}
.dyr-lbx__nav--prev{left:24px}
.dyr-lbx__nav--next{right:24px}
.dyr-lbx__nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.dyr-lbx__nav--next:hover{transform:translateY(-50%) translateX(3px)}
.dyr-lbx__footer{
position:absolute;left:0;right:0;bottom:0;z-index:3;
padding:18px 32px;
display:flex;align-items:center;justify-content:space-between;gap:16px;
color:#fff;font-size:13.5px;
background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
pointer-events:none;
}
.dyr-lbx__counter{
font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;
color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;
}
.dyr-lbx__caption{
color:rgba(255,255,255,.9);text-align:right;
font-size:13.5px;line-height:1.5;flex:1;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width: 640px){
.dyr-lbx{padding:20px}
.dyr-lbx__close{top:14px;right:14px;width:40px;height:40px}
.dyr-lbx__nav{width:42px;height:42px}
.dyr-lbx__nav--prev{left:8px}
.dyr-lbx__nav--next{right:8px}
.dyr-lbx__footer{padding:14px 18px;font-size:12px}
}
/* =================================================================
SOLUTION DETAIL PAGE (solution-read.php)
================================================================= */
/* 본문 래퍼 — 사이트 표준 컨테이너(1440px)에 맞춤 */
.dyr-sread{max-width:var(--container);margin:0 auto;padding:0 32px}
.dyr-sread__section{padding:48px 0}
.dyr-sread__section + .dyr-sread__section{padding-top:0}
/* OVERVIEW 카드 — 미리보기의 .solpv-intro와 동일 */
.dyr-sread__intro{
background:#f3f5f8;border-radius:14px;padding:32px;
}
.dyr-sread__intro-eyebrow{
font-size:11px;font-weight:700;letter-spacing:.22em;color:#1b3a6b;margin:0 0 14px;
}
.dyr-sread__intro-title{
font-size:26px;font-weight:800;color:#0b1c3d;margin:0 0 14px;
line-height:1.3;letter-spacing:-.01em;
}
.dyr-sread__intro-body{
font-size:14px;line-height:1.75;color:#3a4759;margin:0;
}
/* 블록 제목 — 좌측 정렬 */
.dyr-sread__block-title{
font-size:22px;font-weight:800;color:#0b1c3d;margin:0 0 8px;letter-spacing:-.01em;
}
.dyr-sread__block-sub{
font-size:13.5px;color:#6b7886;margin:0 0 24px;
}
/* 핵심 특징 4열 카드 — 미리보기의 .solpv-features와 동일 (간격은 와이드폭에 맞춰 약간 키움) */
.dyr-sread__features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dyr-sread__feat{
position:relative;overflow:hidden;
background:rgba(255,255,255,.55);
border:1px solid rgba(11,28,61,.08);
border-radius:16px;
padding:32px 20px 26px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:14px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
box-shadow:0 4px 14px -8px rgba(11,28,61,.08);
}
/* 좌상단 코너에 부분 그라데이션 hint */
.dyr-sread__feat::before{
content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(circle at 0% 0%, var(--feat-color, rgba(27,58,107,.35)) 0%, transparent 60%);
opacity:.4;
pointer-events:none;
transition:opacity .25s ease;
}
/* 우하단 보조 hint — 대각선 균형 */
.dyr-sread__feat::after{
content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(circle at 100% 100%, var(--feat-color, rgba(27,58,107,.25)) 0%, transparent 55%);
opacity:.22;
pointer-events:none;
transition:opacity .25s ease;
}
.dyr-sread__feat:hover{
transform:translateY(-4px);
border-color:rgba(11,28,61,.18);
box-shadow:0 24px 50px -22px rgba(11,28,61,.22);
}
.dyr-sread__feat:hover::before{opacity:.65}
.dyr-sread__feat:hover::after{opacity:.4}
/* 카드 4개 컬러 로테이션 (블루 → 틸 → 바이올렛 → 앰버)
카드 배경(--feat-color)과 아이콘 그라데이션(--feat-ic-from/to)을 함께 정의 */
.dyr-sread__feat:nth-child(1){
--feat-color:rgba(59, 130, 246, .55);
--feat-ic-from:#60a5fa; --feat-ic-to:#1d4ed8;
}
.dyr-sread__feat:nth-child(2){
--feat-color:rgba(20, 184, 166, .55);
--feat-ic-from:#5eead4; --feat-ic-to:#0f766e;
}
.dyr-sread__feat:nth-child(3){
--feat-color:rgba(168, 85, 247, .55);
--feat-ic-from:#c084fc; --feat-ic-to:#7c3aed;
}
.dyr-sread__feat:nth-child(4){
--feat-color:rgba(245, 158, 11, .55);
--feat-ic-from:#fcd34d; --feat-ic-to:#d97706;
}
.dyr-sread__feat:nth-child(5){
--feat-color:rgba(244, 63, 94, .55);
--feat-ic-from:#fb7185; --feat-ic-to:#be123c;
}
.dyr-sread__feat-icon{
position:relative;z-index:1;overflow:hidden;
width:58px;height:58px;border-radius:18px;
background:rgba(255,255,255,.45);
border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
color:var(--feat-ic-to, #0b1c3d); /* 아이콘 색상 — 카드 톤의 진한 쪽 */
display:flex;align-items:center;justify-content:center;
font-size:24px;line-height:1;
box-shadow:
0 6px 18px -8px rgba(11,28,61,.18),
inset 0 1px 0 rgba(255,255,255,.7);
}
/* 코너 색상 hint — 카드와 동일한 부분 그라데이션 */
.dyr-sread__feat-icon::before{
content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(circle at 30% 0%, var(--feat-color, rgba(27,58,107,.4)) 0%, transparent 70%);
opacity:.6;
pointer-events:none;
}
.dyr-sread__feat-icon i{position:relative;z-index:1;font-size:24px;line-height:1}
.dyr-sread__feat-title{
position:relative;z-index:1;
font-size:14px;font-weight:700;color:#0b1c3d;margin:0;line-height:1.4;
letter-spacing:-.005em;
}
/* APPLICATIONS 갤러리 — 미리보기의 .solpv-gallery 와 동일 */
.dyr-sread__gallery{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.dyr-sread__gal-item{display:flex;flex-direction:column;gap:10px}
.dyr-sread__gal-media{
position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
background:#e6e8ee center/cover no-repeat;
cursor:zoom-in;text-decoration:none;
transition:transform .18s ease, box-shadow .18s ease;
}
.dyr-sread__gal-media:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px -14px rgba(11,28,61,.32);
}
.dyr-sread__gal-media::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, transparent 55%, rgba(11,28,61,.28) 100%);
opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.dyr-sread__gal-media:hover::after{opacity:1}
.dyr-sread__gal-media--empty{
cursor:default;display:flex;align-items:center;justify-content:center;color:#a3acbf;
background:#f1f4fa;
}
.dyr-sread__gal-media--empty svg{width:40px;height:40px}
.dyr-sread__gal-zoom{
position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.95);color:#0b1c3d;
display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(-4px);transition:opacity .2s ease, transform .2s ease;
z-index:2;
}
.dyr-sread__gal-zoom svg{width:16px;height:16px}
.dyr-sread__gal-media:hover .dyr-sread__gal-zoom{opacity:1;transform:translateY(0)}
.dyr-sread__gal-cap{font-size:13px;color:#3a4759;display:inline-block;line-height:1.45}
/* CATALOG 다운로드 바 — 미리보기의 .solpv-dlbar 와 동일 (네이비 그라데이션) */
/* CATALOG DOWNLOAD BAR — 고도화 */
.dyr-sread__dlbar{
position:relative;
display:flex;align-items:center;gap:32px;
padding:36px 40px;border-radius:20px;
background:
radial-gradient(circle at 100% 0%, rgba(86,130,255,.18) 0%, transparent 50%),
radial-gradient(circle at 0% 100%, rgba(28,90,220,.18) 0%, transparent 50%),
linear-gradient(135deg, #0b1220 0%, #1b3a6b 100%);
color:#fff;flex-wrap:wrap;
box-shadow:0 28px 56px -28px rgba(11,28,61,.5);
overflow:hidden;
}
.dyr-sread__dlbar::before{
content:'';position:absolute;right:-60px;top:-60px;
width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
pointer-events:none;
}
/* 좌측 큰 아이콘 */
.dyr-sread__dlbar-ico{
flex-shrink:0;width:72px;height:72px;border-radius:18px;
background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.14);
display:flex;align-items:center;justify-content:center;
position:relative;z-index:1;
}
.dyr-sread__dlbar-ico i{font-size:30px;color:#fff;line-height:1}
/* 텍스트 영역 */
.dyr-sread__dlbar-text{flex:1;min-width:280px;position:relative;z-index:1}
.dyr-sread__dlbar-eyebrow{
font-size:11px;font-weight:700;letter-spacing:.22em;
color:rgba(255,255,255,.7);margin:0 0 8px;
}
.dyr-sread__dlbar-title{
font-size:22px;font-weight:800;color:#fff;
margin:0 0 8px;line-height:1.3;letter-spacing:-.01em;
}
.dyr-sread__dlbar-desc{
font-size:14px;color:rgba(255,255,255,.78);
margin:0 0 14px;line-height:1.55;max-width:720px;
}
/* 포맷 칩 — 글래스모피즘 + 코너 부분 그라데이션 hint */
.dyr-sread__dlbar-formats{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;gap:8px;
}
.dyr-sread__dlbar-formats li{
position:relative;overflow:hidden;
font-size:12.5px;font-weight:700;letter-spacing:.08em;
color:rgba(255,255,255,.92);
padding:8px 14px;border-radius:8px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
/* 좌측 상단 코너에 부분 그라데이션 hint (60% 만 채움) */
.dyr-sread__dlbar-formats li::before{
content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(circle at 0% 0%, var(--chip-color, rgba(255,255,255,.4)) 0%, transparent 65%);
opacity:.55;
pointer-events:none;
transition:opacity .2s ease;
}
.dyr-sread__dlbar-formats li:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.25);
background:rgba(255,255,255,.08);
}
.dyr-sread__dlbar-formats li:hover::before{opacity:.85}
/* 포맷별 코너 색상 — CSS 변수로 그라데이션 hint 만 살짝 입힘 */
.dyr-sread__dlbar-formats li[data-format="PDF"]{--chip-color:rgba(248, 113, 113, .85)}
.dyr-sread__dlbar-formats li[data-format="ZIP"]{--chip-color:rgba(192, 132, 252, .85)}
.dyr-sread__dlbar-formats li[data-format="DOC"],
.dyr-sread__dlbar-formats li[data-format="DOCX"]{--chip-color:rgba(96, 165, 250, .85)}
.dyr-sread__dlbar-formats li[data-format="PPT"],
.dyr-sread__dlbar-formats li[data-format="PPTX"]{--chip-color:rgba(251, 146, 60, .85)}
.dyr-sread__dlbar-formats li[data-format="XLS"],
.dyr-sread__dlbar-formats li[data-format="XLSX"]{--chip-color:rgba(74, 222, 128, .85)}
/* 다운로드 버튼 */
.dyr-sread__dlbar-file{
flex-shrink:0;position:relative;z-index:1;
}
.dyr-sread__dlbar-pick{
position:relative;overflow:hidden;
display:inline-flex;align-items:center;gap:14px;
padding:14px 22px 14px 16px;border-radius:14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:#fff;text-decoration:none;
transition:background .2s ease, border-color .2s ease;
min-width:200px;
}
/* 좌상단 코너 그라데이션 hint */
.dyr-sread__dlbar-pick::before{
content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(circle at 0% 0%, rgba(96,165,250,.55) 0%, transparent 65%);
opacity:.55;
pointer-events:none;
transition:opacity .25s ease;
}
.dyr-sread__dlbar-pick:hover{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.3);
}
.dyr-sread__dlbar-pick:hover::before{opacity:.85}
.dyr-sread__dlbar-pick-ico{
position:relative;z-index:1;flex-shrink:0;
width:42px;height:42px;border-radius:12px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:16px;
}
.dyr-sread__dlbar-pick-txt{
position:relative;z-index:1;
display:flex;flex-direction:column;line-height:1.2;
}
.dyr-sread__dlbar-pick-txt strong{
font-size:15px;font-weight:700;color:#fff;letter-spacing:-.005em;
}
.dyr-sread__dlbar-pick-txt small{
font-size:11.5px;color:rgba(255,255,255,.65);font-weight:500;margin-top:3px;
}
/* 준비 중 상태 */
.dyr-sread__dlbar-soon{
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;
border:1px solid rgba(255,255,255,.15);
}
.dyr-sread__dlbar-soon i{font-size:13px}
/* APPLICATIONS — 3x2 갤러리 */
.dyr-sol-gallery{
display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;margin-top:48px;
}
.dyr-sol-gal__item{margin:0;display:flex;flex-direction:column;gap:12px}
.dyr-sol-gal__media{
position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:14px;
background:#e6e8ee center/cover no-repeat;
overflow:hidden;cursor:zoom-in;text-decoration:none;
transition:transform .35s ease, box-shadow .35s ease;
}
.dyr-sol-gal__media:hover{
transform:translateY(-3px);
box-shadow:0 22px 46px -22px rgba(11,28,61,.4);
}
.dyr-sol-gal__media::after{
content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent 50%, rgba(11,28,61,.35) 100%);
opacity:0;transition:opacity .25s ease;
}
.dyr-sol-gal__media:hover::after{opacity:1}
.dyr-sol-gal__media--empty{
cursor:default;display:flex;align-items:center;justify-content:center;color:#a3acbf;
background:#f1f4fa;
}
.dyr-sol-gal__media--empty svg{width:44px;height:44px}
.dyr-sol-gal__zoom{
position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.95);color:#0b1c3d;
display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(-4px);transition:opacity .25s ease, transform .25s ease;
z-index:2;
}
.dyr-sol-gal__zoom svg{width:18px;height:18px}
.dyr-sol-gal__media:hover .dyr-sol-gal__zoom{opacity:1;transform:translateY(0)}
.dyr-sol-gal__cap{
font-size:14px;font-weight:600;color:#0b1c3d;text-align:center;line-height:1.45;
}
/* CATALOG DOWNLOAD BAR */
.dyr-sol-dlbar{
display:flex;align-items:center;justify-content:space-between;gap:24px;
background:#fff;border-radius:18px;padding:32px 36px;
box-shadow:0 18px 50px -28px rgba(11,28,61,.28);
}
.dyr-sol-dlbar__text{flex:1;min-width:0}
.dyr-sol-dlbar__eyebrow{
font-size:11px;font-weight:700;letter-spacing:.16em;color:#5d7299;margin:0 0 8px;
}
.dyr-sol-dlbar__title{
font-size:22px;font-weight:800;color:#0b1c3d;margin:0 0 8px;line-height:1.3;
}
.dyr-sol-dlbar__desc{
font-size:14.5px;color:#4f5b78;margin:0;line-height:1.55;
}
.dyr-sol-dlbar__btn{flex-shrink:0;white-space:nowrap}
/* RELATED PROJECTS */
.dyr-sol-rel{
display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;margin-top:48px;
}
.dyr-sol-rel__item{
display:block;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;
box-shadow:0 12px 30px -22px rgba(11,28,61,.3);
transition:transform .25s ease, box-shadow .25s ease;
}
.dyr-sol-rel__item:hover{
transform:translateY(-4px);
box-shadow:0 22px 46px -22px rgba(11,28,61,.42);
}
.dyr-sol-rel__media{
width:100%;aspect-ratio:16/10;background:#e6e8ee center/cover no-repeat;
}
.dyr-sol-rel__body{padding:22px 24px}
.dyr-sol-rel__loc{
font-size:11px;font-weight:700;letter-spacing:.14em;color:#5d7299;margin:0 0 6px;text-transform:uppercase;
}
.dyr-sol-rel__name{
font-size:17px;font-weight:700;color:#0b1c3d;margin:0 0 12px;line-height:1.4;
}
.dyr-sol-rel__arrow{font-size:13px;font-weight:600;color:#0b1c3d;opacity:.7}
/* BOTTOM GALLERY — 화살표 슬라이드 + 클릭 확대 */
.dyr-sol-slider{
position:relative;margin-top:48px;
}
.dyr-sol-slider__viewport{
overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding:8px 4px 14px;
}
.dyr-sol-slider__viewport::-webkit-scrollbar{display:none}
.dyr-sol-slider__track{
display:flex;gap:16px;width:max-content;
}
.dyr-sol-slider__slide{
position:relative;display:block;flex-shrink:0;
width:380px;height:260px;border-radius:14px;
background:#e6e8ee center/cover no-repeat;
cursor:zoom-in;text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease;
}
.dyr-sol-slider__slide:hover{
transform:translateY(-3px);
box-shadow:0 22px 46px -22px rgba(11,28,61,.4);
}
.dyr-sol-slider__slide::after{
content:'';position:absolute;inset:0;border-radius:14px;
background:linear-gradient(180deg, transparent 55%, rgba(11,28,61,.35) 100%);
opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.dyr-sol-slider__slide:hover::after{opacity:1}
.dyr-sol-slider__zoom{
position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.95);color:#0b1c3d;
display:flex;align-items:center;justify-content:center;
opacity:0;transform:translateY(-4px);transition:opacity .25s ease, transform .25s ease;
}
.dyr-sol-slider__zoom svg{width:18px;height:18px}
.dyr-sol-slider__slide:hover .dyr-sol-slider__zoom{opacity:1;transform:translateY(0)}
/* 화살표 네비 — 사이드에 오버레이 */
.dyr-sol-slider__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
background:#fff;color:#0b1c3d;
box-shadow:0 12px 30px -10px rgba(11,28,61,.45);
display:flex;align-items:center;justify-content:center;
transition:opacity .25s ease, background .25s ease, transform .25s ease;
}
.dyr-sol-slider__nav:hover{background:#0b1c3d;color:#fff;transform:translateY(-50%) scale(1.05)}
.dyr-sol-slider__nav--prev{left:-12px}
.dyr-sol-slider__nav--next{right:-12px}
.dyr-sol-slider__nav.is-off{opacity:.25;pointer-events:none}
/* RESPONSIVE */
@media (max-width: 1024px){
.dyr-sread__features{grid-template-columns:repeat(2,1fr)}
.dyr-sread__gallery{grid-template-columns:repeat(2,1fr)}
.dyr-sol-rel{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 720px){
.dyr-sread{padding:0 20px}
.dyr-sread__section{padding:36px 0}
.dyr-sread__intro{padding:24px}
.dyr-sread__intro-title{font-size:21px}
.dyr-sread__block-title{font-size:19px}
.dyr-sread__features{grid-template-columns:repeat(2,1fr);gap:12px}
.dyr-sread__gallery{grid-template-columns:1fr}
.dyr-sread__dlbar{
flex-direction:column;align-items:flex-start;
padding:26px 22px;gap:18px;border-radius:16px;
}
.dyr-sread__dlbar-ico{width:56px;height:56px;border-radius:14px}
.dyr-sread__dlbar-ico i{font-size:24px}
.dyr-sread__dlbar-title{font-size:19px}
.dyr-sread__dlbar-file{width:100%}
.dyr-sread__dlbar-pick{width:100%;justify-content:flex-start}
.dyr-sol-rel{grid-template-columns:1fr}
.dyr-sol-slider__slide{width:280px;height:200px}
.dyr-sol-slider__nav{width:42px;height:42px}
.dyr-sol-slider__nav--prev{left:-4px}
.dyr-sol-slider__nav--next{right:-4px}
}
/* =================================================================
커스텀 스크롤바 — 브랜드 톤 (네이비 → 액센트 골드)
※ 현재 index 페이지(body[data-page="home"]) 스코프
추후 다른 페이지로 확장 시 :has() 셀렉터 인자만 늘리면 됨
================================================================= */
/* Firefox — scrollbar-width/color */
html:has(body[data-page="home"]){
scrollbar-width:thin;
scrollbar-color:#2e5aa4 #eef2f8;
}
/* WebKit (Chrome/Safari/Edge) — 페이지 스크롤바 */
html:has(body[data-page="home"])::-webkit-scrollbar{
width:12px;height:12px;
}
html:has(body[data-page="home"])::-webkit-scrollbar-track{
background:#eef2f8;
border-left:1px solid #e0e6ef;
}
html:has(body[data-page="home"])::-webkit-scrollbar-thumb{
background:linear-gradient(180deg, #1b3a6b 0%, #2e5aa4 50%, #1b3a6b 100%);
border-radius:999px;
border:2px solid #eef2f8; /* inset 효과 — 트랙 안에 떠 있는 느낌 */
background-clip:padding-box;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 1px 2px rgba(11,28,61,.15);
transition:background .25s ease;
}
html:has(body[data-page="home"])::-webkit-scrollbar-thumb:hover{
background:linear-gradient(180deg, #2e5aa4 0%, #c8a464 50%, #2e5aa4 100%);
background-clip:padding-box;
}
html:has(body[data-page="home"])::-webkit-scrollbar-thumb:active{
background:linear-gradient(180deg, #0b1c3d 0%, #1b3a6b 50%, #0b1c3d 100%);
background-clip:padding-box;
}
html:has(body[data-page="home"])::-webkit-scrollbar-corner{
background:#eef2f8;
}
/* 모바일 — 슬림하게 (트랙 거의 안보이게) */
@media (max-width:640px){
html:has(body[data-page="home"])::-webkit-scrollbar{
width:6px;height:6px;
}
html:has(body[data-page="home"])::-webkit-scrollbar-track{
background:transparent;border:0;
}
html:has(body[data-page="home"])::-webkit-scrollbar-thumb{
border:1px solid transparent;
background:linear-gradient(180deg, #1b3a6b, #2e5aa4);
background-clip:padding-box;
}
}
/* =================================================================
PRODUCT-ROPELAB 페이지 — 고도화 디자인
※ 시네마틱 히어로 + 마키 + KPI + 갤러리 + zigzag 카드 + 적용분야 + CTA
================================================================= */
/* ─── 1. HERO ────────────────────────────────────────────── */
.rl-hero{
position:relative;min-height:100vh;display:flex;align-items:center;
padding:calc(var(--header-h) + 60px) 0 80px;
background:#0a1124;color:#fff;overflow:hidden;isolation:isolate;
}
.rl-hero__bg{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center;
filter:brightness(.42) saturate(1.15) contrast(1.05);
transform:scale(1.05);
animation:rlHeroDrift 22s ease-in-out infinite alternate;
}
@keyframes rlHeroDrift{
from{transform:scale(1.05) translate(0,0)}
to {transform:scale(1.10) translate(-1.5%,-1%)}
}
.rl-hero__shade{
position:absolute;inset:0;z-index:1;
background:
radial-gradient(ellipse at 70% 110%, rgba(46,90,164,.55) 0%, transparent 55%),
radial-gradient(ellipse at 0% 0%, rgba(13,148,136,.32) 0%, transparent 45%),
linear-gradient(180deg, rgba(10,17,36,.65) 0%, rgba(10,17,36,.55) 45%, rgba(10,17,36,.9) 100%);
}
/* SVG 헥사 메쉬 패턴 */
.rl-hero__mesh{
position:absolute;inset:0;z-index:1;opacity:.18;
background-image:url("data:image/svg+xml;utf8,");
background-size:44px 38px;
mask-image:radial-gradient(ellipse at center, #000 0%, #000 50%, transparent 100%);
-webkit-mask-image:radial-gradient(ellipse at center, #000 0%, #000 50%, transparent 100%);
}
/* 코너 글로우 — 따뜻한 액센트 */
.rl-hero__glow{
position:absolute;border-radius:50%;filter:blur(110px);
pointer-events:none;z-index:1;
animation:rlGlowPulse 12s ease-in-out infinite alternate;
}
.rl-hero__glow--a{
top:-160px;right:-120px;width:540px;height:540px;
background:radial-gradient(circle, rgba(91,138,232,.55) 0%, transparent 70%);
}
.rl-hero__glow--b{
bottom:-180px;left:-140px;width:480px;height:480px;
background:radial-gradient(circle, rgba(20,154,168,.42) 0%, transparent 70%);
animation-delay:-4s;
}
.rl-hero__glow--c{
top:30%;left:50%;transform:translateX(-50%);
width:380px;height:380px;
background:radial-gradient(circle, rgba(200,164,100,.18) 0%, transparent 70%);
animation-delay:-7s;
}
@keyframes rlGlowPulse{
from{transform:scale(.95)}
to {transform:scale(1.12)}
}
.rl-hero__inner{
position:relative;z-index:2;
max-width:var(--container);width:100%;
margin:0 auto;padding:0 32px;
}
.rl-hero__crumb{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;letter-spacing:.18em;font-weight:700;
color:rgba(255,255,255,.55);margin-bottom:28px;
}
.rl-hero__crumb a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s ease;}
.rl-hero__crumb a:hover{color:#fff;}
.rl-hero__crumb i{font-size:8px;color:rgba(255,255,255,.35);}
.rl-hero__crumb span{color:var(--c-accent);}
.rl-hero__eyebrow{
display:inline-flex;align-items:center;gap:12px;
font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--c-accent);
text-transform:uppercase;margin-bottom:22px;
}
.rl-hero__eyebrow-line{width:38px;height:1px;background:var(--c-accent);}
.rl-hero__eyebrow i{font-size:13px;opacity:.9;}
.rl-hero__title{
font-family:'Inter','Noto Sans KR',sans-serif;
font-size:clamp(40px, 7.5vw, 96px);
font-weight:900;line-height:1.02;letter-spacing:-.035em;
margin:0 0 28px;
}
.rl-hero__title-line{display:block;}
.rl-hero__title-line--accent{
background:linear-gradient(120deg, #c8a464 0%, #f5d99a 40%, #c8a464 60%, #8a6730 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-style:italic;
}
.rl-hero__sub{
max-width:720px;font-size:clamp(15px, 1.4vw, 18px);
color:rgba(255,255,255,.85);line-height:1.75;margin:0 0 32px;
}
.rl-hero__sub strong{color:#fff;font-weight:600;}
.rl-hero__chips{
display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px;
}
.rl-hero__chips span{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(12px) saturate(140%);
-webkit-backdrop-filter:blur(12px) saturate(140%);
font-size:11.5px;font-weight:600;letter-spacing:.06em;color:#fff;
}
.rl-hero__chips i{color:var(--c-accent);font-size:11px;}
.rl-hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.rl-hero__cta-btn{padding:14px 24px;font-size:14px;}
.rl-hero__cta-arrow{transition:transform .3s var(--ease);}
.rl-hero__cta-btn:hover .rl-hero__cta-arrow{transform:translateX(4px);}
.rl-hero__scroll{
position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:8px;
font-size:10px;letter-spacing:.32em;color:rgba(255,255,255,.55);
text-decoration:none;animation:rlScrollBounce 1.8s ease-in-out infinite;
}
.rl-hero__scroll i{font-size:12px;}
@keyframes rlScrollBounce{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(6px)}
}
/* ─── 2. MARQUEE ─────────────────────────────────────────── */
.rl-marquee{
background:#0b1c3d;color:#fff;padding:18px 0;
overflow:hidden;border-top:1px solid rgba(255,255,255,.06);
mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.rl-marquee__track{
display:inline-flex;align-items:center;gap:36px;
white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.22em;
animation:rlMarquee 32s linear infinite;
}
.rl-marquee__track span{display:inline-flex;align-items:center;gap:8px;}
.rl-marquee__track i{color:var(--c-accent);font-size:11px;}
.rl-marquee__dot{color:var(--c-accent);font-size:6px;opacity:.7;}
@keyframes rlMarquee{
from{transform:translateX(0)}
to {transform:translateX(-50%)}
}
/* ─── 3. STORY ───────────────────────────────────────────── */
.rl-story{padding:120px 0;background:linear-gradient(180deg,#fff,#f7f9fc);}
.rl-story__grid{
display:grid;grid-template-columns:1.05fr 1fr;gap:80px;
align-items:flex-start;
}
.rl-story__lead{}
.rl-story__eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:800;letter-spacing:.22em;
color:var(--c-primary);text-transform:uppercase;margin:0 0 18px;
}
.rl-story__eyebrow i{font-size:13px;color:var(--c-accent);}
.rl-story__title{
font-size:clamp(28px, 3.4vw, 44px);
font-weight:800;line-height:1.25;letter-spacing:-.02em;
margin:0 0 24px;color:#0b1c3d;
}
.rl-story__accent{
background:linear-gradient(135deg, var(--c-primary), var(--c-primary-2,#2e5aa4) 50%, var(--c-accent));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.rl-story__body{
font-size:15.5px;line-height:1.85;color:#54607a;margin:0 0 16px;
}
.rl-story__body strong{color:#0b1c3d;font-weight:700;}
.rl-story__kpis{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.rl-kpi{
position:relative;padding:24px 22px 22px;border-radius:16px;
background:#fff;border:1px solid #e6e8ee;isolation:isolate;
box-shadow:0 4px 14px rgba(11,28,61,.04);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
overflow:hidden;
}
.rl-kpi::before{
content:'';position:absolute;inset:0;z-index:-1;
background:radial-gradient(circle at 100% 0%, var(--rl-kpi,#1b3a6b) 0%, transparent 60%);
opacity:.10;transition:opacity .3s ease;
}
.rl-kpi:hover{
transform:translateY(-4px);border-color:transparent;
box-shadow:0 18px 38px rgba(11,28,61,.12);
}
.rl-kpi:hover::before{opacity:.18;}
.rl-kpi__ic{
font-size:22px;color:var(--rl-kpi,#1b3a6b);opacity:.85;margin-bottom:10px;display:block;
}
.rl-kpi__num{
display:block;
font-family:'Inter',sans-serif;
font-size:30px;font-weight:900;color:#0b1c3d;
letter-spacing:-.02em;line-height:1;margin-bottom:6px;
}
.rl-kpi__num small{font-size:18px;font-weight:800;color:var(--c-text-muted);}
.rl-kpi__num span{font-size:14px;font-weight:700;color:var(--c-text-soft);margin-left:2px;}
.rl-kpi__label{
display:block;font-size:10px;font-weight:800;letter-spacing:.22em;
color:var(--rl-kpi,#1b3a6b);margin-bottom:8px;text-transform:uppercase;
}
.rl-kpi__sub{font-size:11.5px;color:var(--c-text-soft);line-height:1.5;}
/* ─── 4. GALLERY ─────────────────────────────────────────── */
.rl-gallery{padding:100px 0 80px;background:#f7f9fc;}
.rl-gallery__head{text-align:center;margin-bottom:48px;}
.rl-gallery__eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--c-primary);
text-transform:uppercase;margin:0 0 12px;
}
.rl-gallery__eyebrow i{font-size:13px;color:var(--c-accent);}
.rl-gallery__title{
font-size:clamp(28px, 3.4vw, 42px);font-weight:800;
color:#0b1c3d;letter-spacing:-.02em;margin:0 0 12px;
}
.rl-gallery__sub{font-size:15px;color:#54607a;max-width:520px;margin:0 auto;line-height:1.6;}
.rl-gallery__grid{
display:grid;grid-template-columns:repeat(6, 1fr);gap:14px;
}
.rl-gallery__cell{
position:relative;display:block;overflow:hidden;
border-radius:16px;background:#0b1220 center/cover no-repeat;
cursor:pointer;isolation:isolate;
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rl-gallery__cell--wide{grid-column:span 3;aspect-ratio:3/2;}
.rl-gallery__cell--normal{grid-column:span 2;aspect-ratio:1/1;}
.rl-gallery__cell::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(11,28,61,.55) 100%);
z-index:1;
}
.rl-gallery__cell:hover{
transform:translateY(-4px);
box-shadow:0 28px 60px -22px rgba(11,28,61,.5);
}
.rl-gallery__num{
position:absolute;top:14px;left:14px;z-index:3;
display:inline-flex;align-items:center;
font-family:'Inter',sans-serif;font-size:11px;font-weight:800;
letter-spacing:.22em;color:#fff;
padding:5px 11px;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.rl-gallery__hover{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
z-index:3;width:54px;height:54px;border-radius:50%;
background:rgba(255,255,255,.96);color:#0b1c3d;
display:flex;align-items:center;justify-content:center;
font-size:18px;opacity:0;
transition:opacity .25s ease, transform .25s ease;
box-shadow:0 14px 32px -8px rgba(0,0,0,.4);
}
.rl-gallery__cell:hover .rl-gallery__hover{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
/* ─── 5. CATEGORIES — zigzag editorial ──────────────────── */
.rl-cats{position:relative;padding:120px 0;background:#fff;overflow:hidden;}
.rl-cats__bgmark{
position:absolute;top:48px;left:50%;transform:translateX(-50%);
font-family:'Inter',sans-serif;
font-size:clamp(110px, 16vw, 220px);font-weight:900;
letter-spacing:-.05em;line-height:1;white-space:nowrap;
background:linear-gradient(120deg,
rgba(100,200,220,.06) 0%,
rgba(140,170,230,.06) 25%,
rgba(180,150,230,.06) 50%,
rgba(255,200,120,.06) 75%,
rgba(100,200,220,.06) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-stroke:1px rgba(27,58,107,.04);
pointer-events:none;user-select:none;z-index:0;
}
.rl-cats > .dyr-section__inner{position:relative;z-index:1;}
.rl-cats__head{text-align:center;max-width:720px;margin:0 auto 64px;}
.rl-cats__eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--c-primary);
text-transform:uppercase;margin:0 0 12px;
}
.rl-cats__eyebrow i{font-size:13px;color:var(--c-accent);}
.rl-cats__title{
font-size:clamp(28px, 3.4vw, 42px);font-weight:800;
color:#0b1c3d;letter-spacing:-.02em;margin:0 0 14px;line-height:1.2;
}
.rl-cats__sub{font-size:15.5px;color:#54607a;line-height:1.65;}
.rl-cats__list{display:flex;flex-direction:column;gap:48px;}
.rl-cat{
display:grid;grid-template-columns:1.1fr 1fr;gap:56px;
align-items:center;
}
.rl-cat--reverse{grid-template-columns:1fr 1.1fr;}
.rl-cat--reverse .rl-cat__media{order:2;}
.rl-cat--reverse .rl-cat__body{order:1;}
.rl-cat__media{
position:relative;aspect-ratio:5/4;
border-radius:22px;overflow:hidden;
background:#0b1220;
box-shadow:0 28px 60px -28px rgba(11,28,61,.35);
isolation:isolate;
}
.rl-cat__img{
position:absolute;inset:0;
background-size:cover;background-position:center;
transition:transform .8s var(--ease);
}
.rl-cat:hover .rl-cat__img{transform:scale(1.06);}
.rl-cat__num{
position:absolute;top:24px;left:24px;z-index:3;
font-family:'Inter',sans-serif;font-size:18px;font-weight:900;
letter-spacing:.06em;color:#fff;
padding:8px 16px;border-radius:10px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.rl-cat__glow{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(135deg, rgba(11,28,61,0) 50%, rgba(11,28,61,.5) 100%),
radial-gradient(circle at 0% 100%, rgba(96,165,250,.22) 0%, transparent 55%);
opacity:0;transition:opacity .35s ease;
}
.rl-cat:hover .rl-cat__glow{opacity:1;}
.rl-cat__body{}
.rl-cat__eyebrow{
font-size:11px;font-weight:800;letter-spacing:.24em;
color:var(--c-primary-2);margin:0 0 14px;text-transform:uppercase;
}
.rl-cat__title{
font-size:clamp(24px, 2.6vw, 34px);font-weight:800;
color:#0b1c3d;letter-spacing:-.02em;line-height:1.2;
margin:0 0 18px;
}
.rl-cat__desc{
font-size:15px;line-height:1.85;color:#54607a;
margin:0 0 24px;
}
.rl-cat__desc br{display:block;content:'';margin-top:2px;}
.rl-cat__cta{
display:inline-flex;align-items:center;gap:10px;
padding:13px 24px;border-radius:999px;
background:#0b1c3d;color:#fff;text-decoration:none;
font-size:13.5px;font-weight:700;letter-spacing:.01em;
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rl-cat__cta i{font-size:11px;transition:transform .25s ease;}
.rl-cat__cta:hover{
background:linear-gradient(135deg, var(--c-primary), var(--c-primary-2,#2e5aa4));
transform:translateY(-2px);
box-shadow:0 18px 38px -16px rgba(11,28,61,.4);
}
.rl-cat__cta:hover i{transform:translateX(4px);}
/* ─── 6. APPLICATIONS ────────────────────────────────────── */
.rl-apps{padding:100px 0;background:linear-gradient(180deg,#fff 0%, #eef2f8 100%);}
.rl-apps__head{text-align:center;margin-bottom:48px;}
.rl-apps__eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--c-primary);
text-transform:uppercase;margin:0 0 12px;
}
.rl-apps__eyebrow i{font-size:13px;color:var(--c-accent);}
.rl-apps__title{
font-size:clamp(28px, 3.4vw, 42px);font-weight:800;
color:#0b1c3d;letter-spacing:-.02em;margin:0;
}
.rl-apps__grid{
display:grid;grid-template-columns:repeat(6, 1fr);gap:14px;
}
.rl-app{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:28px 18px 24px;border-radius:16px;
background:#fff;border:1px solid #e6e8ee;
transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
text-align:center;
}
.rl-app:hover{
transform:translateY(-4px);border-color:transparent;
box-shadow:0 18px 38px rgba(11,28,61,.12);
}
.rl-app i{
font-size:30px;color:var(--c-primary);margin-bottom:10px;
transition:color .25s ease, transform .25s ease;
}
.rl-app:hover i{color:var(--c-accent);transform:scale(1.1);}
.rl-app strong{
font-family:'Inter',sans-serif;
font-size:13.5px;font-weight:800;letter-spacing:.12em;color:#0b1c3d;
}
.rl-app span{font-size:11.5px;color:#54607a;font-weight:500;}
/* ─── 7. FINAL CTA ───────────────────────────────────────── */
.rl-finalcta{
position:relative;padding:120px 32px;overflow:hidden;isolation:isolate;color:#fff;
}
.rl-finalcta__bg{
position:absolute;inset:0;z-index:-2;
background:
radial-gradient(ellipse at 30% 30%, rgba(96,165,250,.35) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(200,164,100,.20) 0%, transparent 45%),
linear-gradient(135deg, #0a1124 0%, #0e1d3d 50%, #1b3a6b 100%);
}
.rl-finalcta__glow{
position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:-1;
animation:rlGlowPulse 14s ease-in-out infinite alternate;
}
.rl-finalcta__glow--1{
top:-200px;left:-100px;width:520px;height:520px;
background:radial-gradient(circle, rgba(91,138,232,.45) 0%, transparent 70%);
}
.rl-finalcta__glow--2{
bottom:-220px;right:-120px;width:480px;height:480px;
background:radial-gradient(circle, rgba(200,164,100,.32) 0%, transparent 70%);
animation-delay:-5s;
}
.rl-finalcta__inner{
position:relative;z-index:1;max-width:880px;margin:0 auto;text-align:center;
}
.rl-finalcta__eyebrow{
font-size:11px;font-weight:800;letter-spacing:.32em;
color:var(--c-accent);margin:0 0 18px;
}
.rl-finalcta__title{
font-size:clamp(28px, 4vw, 48px);font-weight:900;line-height:1.2;
letter-spacing:-.02em;margin:0 0 18px;
}
.rl-finalcta__title span{
background:linear-gradient(120deg, #c8a464 0%, #f5d99a 50%, #c8a464 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-style:italic;
}
.rl-finalcta__sub{
font-size:15.5px;color:rgba(255,255,255,.82);line-height:1.7;
max-width:560px;margin:0 auto 32px;
}
.rl-finalcta__btns{
display:inline-flex;flex-wrap:wrap;gap:14px;justify-content:center;
}
.rl-finalcta__btn{padding:14px 26px;font-size:14px;}
.rl-finalcta__arrow{transition:transform .3s var(--ease);}
.rl-finalcta__btn:hover .rl-finalcta__arrow{transform:translateX(4px);}
/* ─── 데스크탑 → 태블릿 ──────────────────────────────────── */
@media (max-width:1024px){
.rl-story__grid{grid-template-columns:1fr;gap:48px;}
.rl-cat,.rl-cat--reverse{grid-template-columns:1fr;gap:24px;}
.rl-cat--reverse .rl-cat__media,
.rl-cat--reverse .rl-cat__body{order:0;}
.rl-gallery__grid{grid-template-columns:repeat(4, 1fr);}
.rl-gallery__cell--wide{grid-column:span 4;aspect-ratio:16/9;}
.rl-gallery__cell--normal{grid-column:span 2;aspect-ratio:1/1;}
.rl-apps__grid{grid-template-columns:repeat(3, 1fr);}
}
/* ─── 모바일 컴팩트 ─────────────────────────────────────── */
@media (max-width:640px){
.rl-hero{min-height:auto;padding:calc(var(--header-h) + 32px) 0 56px;}
.rl-hero__inner{padding:0 16px;}
.rl-hero__crumb{font-size:10px;letter-spacing:.12em;margin-bottom:18px;}
.rl-hero__eyebrow{font-size:10.5px;letter-spacing:.22em;margin-bottom:16px;}
.rl-hero__eyebrow-line{width:24px;}
.rl-hero__title{font-size:36px;letter-spacing:-.025em;margin-bottom:18px;}
.rl-hero__sub{font-size:13.5px;line-height:1.65;margin-bottom:22px;}
.rl-hero__chips{gap:6px;margin-bottom:24px;}
.rl-hero__chips span{padding:6px 11px;font-size:10.5px;gap:6px;}
.rl-hero__cta{flex-direction:column;width:100%;}
.rl-hero__cta-btn{width:100%;justify-content:center;padding:13px 20px;font-size:13px;}
.rl-hero__scroll{display:none;}
.rl-marquee{padding:14px 0;}
.rl-marquee__track{font-size:10.5px;gap:24px;}
.rl-story{padding:36px 0;}
.rl-story .dyr-section__inner{padding:0 12px;}
.rl-story__title{font-size:22px;line-height:1.25;margin-bottom:14px;}
.rl-story__body{font-size:13.5px;line-height:1.75;margin-bottom:12px;}
.rl-story__kpis{grid-template-columns:1fr 1fr;gap:10px;}
.rl-kpi{padding:16px 14px 14px;border-radius:12px;}
.rl-kpi__ic{font-size:18px;margin-bottom:6px;}
.rl-kpi__num{font-size:22px;}
.rl-kpi__num small{font-size:14px;}
.rl-kpi__num span{font-size:12px;}
.rl-kpi__label{font-size:9.5px;letter-spacing:.16em;margin-bottom:5px;}
.rl-kpi__sub{font-size:10.5px;line-height:1.45;}
.rl-gallery{padding:36px 0;}
.rl-gallery .dyr-section__inner{padding:0 12px;}
.rl-gallery__head{margin-bottom:20px;}
.rl-gallery__title{font-size:22px;}
.rl-gallery__sub{font-size:12.5px;}
.rl-gallery__grid{grid-template-columns:repeat(2, 1fr);gap:8px;}
.rl-gallery__cell--wide{grid-column:span 2;aspect-ratio:16/10;}
.rl-gallery__cell--normal{grid-column:span 1;aspect-ratio:1/1;}
.rl-gallery__num{top:10px;left:10px;font-size:9.5px;padding:3px 8px;}
.rl-gallery__hover{width:38px;height:38px;font-size:14px;opacity:1;
background:rgba(255,255,255,.7);}
.rl-cats{padding:36px 0;}
.rl-cats__bgmark{font-size:60px;top:22px;}
.rl-cats .dyr-section__inner{padding:0 12px;}
.rl-cats__head{margin-bottom:24px;}
.rl-cats__title{font-size:22px;}
.rl-cats__sub{font-size:13px;line-height:1.55;}
.rl-cats__list{gap:24px;}
.rl-cat{gap:14px;}
.rl-cat__media{aspect-ratio:4/3;border-radius:14px;}
.rl-cat__num{top:12px;left:12px;font-size:14px;padding:5px 12px;border-radius:7px;}
.rl-cat__eyebrow{font-size:9.5px;letter-spacing:.2em;margin-bottom:8px;}
.rl-cat__title{font-size:20px;margin-bottom:10px;}
.rl-cat__desc{font-size:13px;line-height:1.7;margin-bottom:14px;}
.rl-cat__cta{padding:10px 18px;font-size:12.5px;gap:8px;}
.rl-cat__cta i{font-size:10px;}
.rl-apps{padding:36px 0;}
.rl-apps .dyr-section__inner{padding:0 12px;}
.rl-apps__head{margin-bottom:22px;}
.rl-apps__title{font-size:22px;}
.rl-apps__grid{grid-template-columns:repeat(3, 1fr);gap:8px;}
.rl-app{padding:16px 8px 14px;border-radius:12px;}
.rl-app i{font-size:22px;margin-bottom:6px;}
.rl-app strong{font-size:11px;letter-spacing:.08em;}
.rl-app span{font-size:10px;}
.rl-finalcta{padding:48px 16px;}
.rl-finalcta__title{font-size:22px;line-height:1.3;}
.rl-finalcta__sub{font-size:13px;line-height:1.65;margin-bottom:22px;}
.rl-finalcta__btns{flex-direction:column;width:100%;}
.rl-finalcta__btn{width:100%;justify-content:center;padding:12px 20px;font-size:13px;}
}
/* ===========================================================
PRODUCTS LINEUP — index page magazine-style 4행 2열
배경은 다른 섹션과 어울리는 soft gray
카드만 매거진 스타일 (.dyr-prodx)
인너 좌우 패딩 제거 + 폭 확장 → 카드가 충분히 넓게
=========================================================== */
.dyr-prodx-sec{
background:#eef1f5;
}
.dyr-prodx-sec .dyr-section__inner{
max-width:1520px;
padding-left:0;
padding-right:0;
}
/* 헤더 텍스트만 안쪽 거터 유지 — 텍스트가 화면 끝까지 가지 않게
max-width 확장으로 부연설명 한 줄에 들어오게 */
.dyr-prodx-sec .dyr-section__head{
padding-left:32px;
padding-right:32px;
max-width:none;
}
/* GRID — 4행 2열 고정 */
.dyr-prodx-sec__list{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:28px;
width:100%;
max-width:none;
margin:0;
}
/* CARD */
.dyr-prodx{
--prodx-accent:#818cf8;
--prodx-delay:0ms;
position:relative; display:block;
text-decoration:none; color:#fff;
transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx__frame{
position:relative; overflow:hidden;
aspect-ratio:5/4;
border-radius:22px;
background:#0c1228;
box-shadow:
0 12px 40px -8px rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.04) inset;
transition:
box-shadow .6s cubic-bezier(.22,.61,.36,1),
transform .65s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover{ transform:translateY(-6px); }
.dyr-prodx:hover .dyr-prodx__frame{
box-shadow:
0 22px 56px -14px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.06) inset;
}
/* MEDIA */
.dyr-prodx__media{
position:absolute; inset:0;
background-size:cover; background-position:center;
transform:scale(1.02);
transition:transform 1.4s cubic-bezier(.22,.61,.36,1), filter .6s ease;
filter:saturate(.88);
}
.dyr-prodx:hover .dyr-prodx__media{
transform:scale(1.1);
filter:saturate(1.05);
}
/* NOISE / GRAIN */
.dyr-prodx__noise{
position:absolute; inset:0; opacity:.45;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
mix-blend-mode:overlay; pointer-events:none;
}
/* VEIL */
.dyr-prodx__veil{
position:absolute; inset:0;
background:
linear-gradient(180deg,
rgba(8,10,24,.15) 0%,
rgba(8,10,24,.3) 35%,
rgba(8,10,24,.88) 80%,
rgba(8,10,24,.96) 100%);
transition:background .6s ease;
}
.dyr-prodx:hover .dyr-prodx__veil{
background:
linear-gradient(180deg,
rgba(8,10,24,.08) 0%,
rgba(8,10,24,.22) 35%,
rgba(8,10,24,.85) 80%,
rgba(8,10,24,.94) 100%);
}
/* LEFT EDGE — 호버 시 위에서 아래로 그려짐 */
.dyr-prodx__edge{
position:absolute; left:0; top:0;
width:3px; height:0;
background:linear-gradient(180deg, var(--prodx-accent), transparent);
transition:height .8s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover .dyr-prodx__edge{ height:100%; }
/* CORNER MARKS */
.dyr-prodx__corner{
position:absolute; width:24px; height:24px;
border:1.5px solid var(--prodx-accent);
opacity:0; transition:opacity .5s ease, transform .5s ease;
}
.dyr-prodx__corner--tl{ top:14px; left:14px; border-right:0; border-bottom:0; transform:translate(8px,8px); }
.dyr-prodx__corner--br{ bottom:14px; right:14px; border-left:0; border-top:0; transform:translate(-8px,-8px); }
.dyr-prodx:hover .dyr-prodx__corner{ opacity:.8; transform:translate(0,0); }
/* NUMBER */
.dyr-prodx__num{
position:absolute; top:22px; left:26px; z-index:2;
font-family:'Inter',sans-serif;
font-size:62px; font-weight:900;
line-height:1; letter-spacing:-.04em;
color:transparent;
-webkit-text-stroke:1.2px rgba(255,255,255,.28);
transition:
-webkit-text-stroke-color .4s ease,
color .4s ease,
transform .5s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover .dyr-prodx__num{
-webkit-text-stroke-color:var(--prodx-accent);
color:color-mix(in srgb, var(--prodx-accent) 18%, transparent);
transform:translateY(-4px);
}
/* DOT */
.dyr-prodx__dot{
position:absolute; top:30px; right:26px; z-index:2;
width:10px; height:10px; border-radius:50%;
background:var(--prodx-accent);
box-shadow:
0 0 0 5px rgba(255,255,255,.07),
0 0 22px var(--prodx-accent);
animation:dyr-prodx-pulse 2.2s ease-in-out infinite;
}
@keyframes dyr-prodx-pulse{
0%,100%{ box-shadow:0 0 0 5px rgba(255,255,255,.07), 0 0 22px var(--prodx-accent); }
50%{ box-shadow:0 0 0 9px rgba(255,255,255,.04), 0 0 32px var(--prodx-accent); }
}
/* BODY */
.dyr-prodx__body{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:32px 30px;
}
.dyr-prodx__tag{
display:inline-flex; align-items:center;
font-family:'Inter',sans-serif;
font-size:10.5px; font-weight:700;
letter-spacing:.28em; text-transform:uppercase;
color:var(--prodx-accent);
padding:5px 10px;
background:rgba(0,0,0,.4);
border:1px solid rgba(255,255,255,.1);
border-radius:4px;
backdrop-filter:blur(8px);
margin-bottom:12px;
}
.dyr-prodx__title{
font-size:clamp(22px, 2.4vw, 28px);
font-weight:700; line-height:1.18;
letter-spacing:-.012em;
margin:0 0 8px;
color:#fff;
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover .dyr-prodx__title{ transform:translateY(-2px); }
.dyr-prodx__excerpt{
font-size:14px; line-height:1.65;
color:rgba(226,232,240,.72);
margin:0 0 18px;
display:-webkit-box;
-webkit-line-clamp:2; line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* CTA */
.dyr-prodx__cta{
display:inline-flex; align-items:center; gap:0;
font-family:'Inter',sans-serif;
font-size:11.5px; font-weight:700;
letter-spacing:.24em; text-transform:uppercase;
color:#fff;
position:relative; padding-bottom:6px;
}
.dyr-prodx__cta-text{ position:relative; }
.dyr-prodx__cta-text::after{
content:''; position:absolute;
left:0; bottom:-4px; width:0; height:1px;
background:var(--prodx-accent);
transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover .dyr-prodx__cta-text::after{ width:100%; }
.dyr-prodx__cta-line{
display:inline-block;
width:24px; height:1px;
background:var(--prodx-accent);
margin:0 8px 0 12px;
transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover .dyr-prodx__cta-line{ width:36px; }
.dyr-prodx__cta-arrow{
font-size:11px; color:var(--prodx-accent);
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx:hover .dyr-prodx__cta-arrow{ transform:translateX(6px); }
/* REVEAL */
.dyr-prodx.dyr-reveal{
opacity:0; transform:translateY(48px) scale(.98);
transition:
opacity .9s cubic-bezier(.22,.61,.36,1),
transform .9s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--prodx-delay);
}
.dyr-prodx.dyr-reveal.is-in{
opacity:1; transform:translateY(0) scale(1);
}
.dyr-prodx-sec__head.dyr-reveal{
opacity:0; transform:translateY(28px);
transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.dyr-prodx-sec__head.dyr-reveal.is-in{
opacity:1; transform:translateY(0);
}
/* TABLET 1024 down */
@media (max-width:1024px){
.dyr-prodx-sec .dyr-section__inner{ padding-left:16px; padding-right:16px; }
.dyr-prodx-sec .dyr-section__head{ padding-left:0; padding-right:0; }
.dyr-prodx-sec__list{ gap:20px; }
.dyr-prodx__frame{ border-radius:18px; }
.dyr-prodx__num{ font-size:52px; top:18px; left:22px; }
.dyr-prodx__body{ padding:26px 24px; }
}
/* MOBILE 640 down — 1열로 전환, 다른 셀렉션과 동일 컴팩트 기준
(.dyr-solutions 의 모바일 컴팩트 베이스라인을 그대로 적용) */
@media (max-width:640px){
.dyr-prodx-sec .dyr-section__inner{ padding-left:12px; padding-right:12px; }
.dyr-prodx-sec .dyr-section__head{
padding-left:0; padding-right:0; margin-bottom:24px;
}
.dyr-prodx-sec .dyr-section__eyebrow{
font-size:10.5px; letter-spacing:.18em; margin-bottom:8px;
}
.dyr-prodx-sec .dyr-section__title{
font-size:22px; line-height:1.25; letter-spacing:-.02em;
}
.dyr-prodx-sec .dyr-section__desc{
font-size:13px; line-height:1.55; word-break:keep-all;
}
.dyr-prodx-sec .dyr-section__desc br{ display:none; }
.dyr-prodx-sec__list{
grid-template-columns:1fr;
gap:14px;
}
.dyr-prodx__frame{ aspect-ratio:4/3; border-radius:16px; }
.dyr-prodx__num{ font-size:42px; top:14px; left:18px; }
.dyr-prodx__dot{ top:20px; right:18px; width:8px; height:8px; }
.dyr-prodx__corner{ width:18px; height:18px; }
.dyr-prodx__corner--tl{ top:10px; left:10px; }
.dyr-prodx__corner--br{ bottom:10px; right:10px; }
.dyr-prodx__body{ padding:20px 18px; }
.dyr-prodx__tag{ font-size:9.5px; letter-spacing:.22em; padding:4px 8px; margin-bottom:10px; }
.dyr-prodx__title{ font-size:20px; }
.dyr-prodx__excerpt{ font-size:12.5px; margin-bottom:14px; }
.dyr-prodx__cta{ font-size:10.5px; }
.dyr-prodx__cta-line{ width:18px; margin:0 6px 0 10px; }
}
/* ===========================================================
PRODUCT page — Jakob-style 4-col grid (.jk-products)
subhero 아래에 깔끔한 카드만 나열
=========================================================== */
.jk-products{
background:#fff;
padding:48px 0 80px;
}
.jk-products__inner{
max-width:1320px;
margin:0 auto;
padding:0 24px;
}
.jk-products__grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:18px;
}
.jk-card{
display:flex; flex-direction:column;
text-decoration:none;
color:inherit;
background:#fff;
border:1px solid #e6e8ee;
border-radius:4px;
overflow:hidden;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.jk-card:hover{
border-color:#2e5aa4;
box-shadow:0 6px 20px rgba(11,28,61,.08);
transform:translateY(-2px);
}
.jk-card__media{
position:relative;
aspect-ratio:1/1; /* Jakob 카드 영역과 동일 정사각 — 이미지도 1:1 (정사각) */
background:#fff;
overflow:hidden;
display:flex; align-items:center; justify-content:center;
padding:16px; /* 도면/이미지가 가장자리에 붙지 않게 */
}
.jk-card__media img{
max-width:100%; max-height:100%;
width:auto; height:auto;
object-fit:contain; /* 잘림 없이 전체가 보이도록 (Jakob 원본 동일) */
display:block;
transition:transform .5s ease;
}
.jk-card:hover .jk-card__media img{ transform:scale(1.04); }
.jk-card__body{
flex:0 0 auto; /* body 는 자기 컨텐츠 만큼만 */
padding:14px 18px 16px;
border-top:1px solid #eef0f4;
}
.jk-card__eyebrow{
font-family:'Inter',sans-serif;
font-size:12.5px;
font-weight:700;
color:#1c1c1c;
margin:0 0 6px;
letter-spacing:0;
}
.jk-card__title{
font-family:'Inter','Noto Sans KR',sans-serif;
font-size:17px;
font-weight:400;
color:#2e5aa4;
margin:0;
letter-spacing:-.005em;
line-height:1.3;
transition:color .2s ease;
}
.jk-card:hover .jk-card__title{
color:#1b3a6b;
}
/* TABLET 1024 down — 3열 */
@media (max-width:1100px){
.jk-products__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.jk-products__inner{ padding:0 16px; }
}
/* MOBILE 640 down — 2열 컴팩트 */
@media (max-width:640px){
.jk-products{ padding:24px 0 48px; }
.jk-products__inner{ padding:0 12px; }
.jk-products__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.jk-card__body{ padding:12px 12px 14px; }
.jk-card__eyebrow{ font-size:11px; margin-bottom:4px; }
.jk-card__title{ font-size:14px; }
}
/* ===========================================================
L4 — 제품 상세 페이지 (Jakob 동일 룩)
히어로 갤러리 + 우측 사이드 (Information / Downloads) + 스펙 테이블
=========================================================== */
.dyr-subhero--compact{ padding:48px 0 36px; }
.jk-detail{
background:#fff;
padding:36px 0 80px;
}
.jk-detail__inner{
max-width:1320px;
margin:0 auto;
padding:0 24px;
}
/* === 상단 그리드 (이미지 7 : 사이드 3) === */
.jk-detail__top{
display:grid;
grid-template-columns:minmax(0, 1fr) 320px;
gap:36px;
align-items:start;
margin-bottom:48px;
}
/* === LEFT — 히어로 (썸네일은 박스 내부 좌측 하단에 절대 배치) === */
.jk-detail__media{ display:flex; flex-direction:column; }
.jk-detail__hero{
position:relative;
background:#fff;
border:1px solid #e6e8ee;
border-radius:4px;
aspect-ratio:16/10;
overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.jk-detail__hero img{
max-width:80%; max-height:80%;
object-fit:contain;
display:block;
}
.jk-detail__hero-empty{
color:#a0aab8;
font-size:14px;
}
/* 썸네일 — 히어로 박스 좌측 하단에 절대 위치 */
.jk-detail__thumbs{
position:absolute;
left:14px;
bottom:14px;
display:flex;
gap:8px;
flex-wrap:wrap;
max-width:calc(100% - 28px);
z-index:2;
}
.jk-detail__thumb{
width:74px; height:74px;
background:#fff;
border:1px solid #d6dae3;
border-radius:4px;
cursor:pointer;
padding:6px;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
transition:border-color .2s ease, box-shadow .2s;
box-shadow:0 1px 3px rgba(20,40,80,.06);
}
.jk-detail__thumb img{
max-width:100%; max-height:100%;
object-fit:contain;
display:block;
}
.jk-detail__thumb:hover{ border-color:#2e5aa4; box-shadow:0 2px 6px rgba(46,90,164,.18); }
.jk-detail__thumb.is-active{ border-color:#2e5aa4; border-width:2px; padding:5px; }
/* === RIGHT — 사이드 아코디언 === */
.jk-detail__side{ min-width:0; }
.jk-detail__accordion{
border-bottom:1px solid #e6e8ee;
padding:18px 0;
}
.jk-detail__accordion:first-child{ border-top:1px solid #e6e8ee; }
.jk-detail__accordion summary{
font-size:18px;
font-weight:700;
color:#15202b;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
padding-right:4px;
list-style:none;
-webkit-tap-highlight-color:transparent;
user-select:none;
}
.jk-detail__accordion summary::-webkit-details-marker{ display:none; }
.jk-detail__accordion summary i{
font-size:14px;
color:#7a8aa3;
transition:transform .2s ease;
}
.jk-detail__accordion[open] summary i{ transform:rotate(180deg); }
.jk-detail__acc-body{
margin-top:14px;
font-size:14px;
line-height:1.7;
color:#374151;
}
.jk-detail__acc-body p,
.jk-detail__acc-body li{ margin:0 0 8px; }
.jk-detail__acc-body ul{
padding-left:0;
list-style:none;
}
.jk-detail__acc-body ul li{
position:relative;
padding-left:0;
}
.jk-detail__empty{
font-size:13px;
color:#a0aab8;
font-style:italic;
}
/* === 다운로드 리스트 === */
.jk-detail__downloads{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:8px;
}
.jk-detail__downloads a{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
background:#fafbfd;
border:1px solid #e6e8ee;
border-radius:6px;
text-decoration:none;
color:#1b3a6b;
font-size:13.5px;
transition:background .2s ease, border-color .2s ease;
}
.jk-detail__downloads a:hover{
background:#fff;
border-color:#2e5aa4;
}
.jk-detail__downloads a i{ font-size:14px; color:#7a8aa3; }
.jk-detail__downloads a span{ flex:1 1 auto; }
.jk-detail__dl-type{
font-style:normal;
font-size:10.5px;
font-weight:700;
letter-spacing:.08em;
color:#7a8aa3;
background:#eef2f8;
padding:2px 6px;
border-radius:3px;
}
/* === 푸터 노트 === */
.jk-detail__notes{
margin-top:20px;
padding:14px 0 0;
font-size:13px;
color:#7a8aa3;
font-style:italic;
}
/* === 스펙 테이블 === */
.jk-detail__spec{
margin-top:0;
}
.jk-detail__spec-scroll{
overflow-x:auto;
border-radius:4px;
}
.jk-detail__table{
width:100%;
border-collapse:collapse;
font-size:14px;
background:#fff;
}
.jk-detail__table thead th{
text-align:left;
font-weight:700;
color:#15202b;
padding:18px 16px;
border-bottom:2px solid #cdd5e0;
white-space:nowrap;
font-size:13.5px;
letter-spacing:.01em;
}
.jk-detail__table tbody td{
padding:16px;
border-bottom:1px solid #eef0f4;
color:#1b3a6b;
font-size:13.5px;
white-space:nowrap;
}
.jk-detail__table tbody tr:nth-child(even) td{ background:#fafbfd; }
.jk-detail__table tbody tr:hover td{ background:#f5f8fc; }
.jk-detail__table tbody td:first-child{
color:inherit;
font-weight:400;
}
/* 펼치기 토글 컬럼 */
.jk-detail__col-toggle{ width:44px; }
.jk-detail__toggle-cell{
text-align:center;
padding:0 8px !important;
}
.jk-detail__toggle{
width:28px; height:28px;
background:transparent;
border:none;
color:#6b7a8c;
cursor:pointer;
border-radius:4px;
transition:transform .25s ease, color .15s;
display:inline-flex;
align-items:center;
justify-content:center;
}
.jk-detail__toggle:hover{ color:#1b3a6b; }
.jk-detail__row.has-details{ cursor:pointer; }
.jk-detail__row.is-open .jk-detail__toggle{ transform:rotate(180deg); color:#1b3a6b; }
.jk-detail__row.is-open + .jk-detail__row-extra td{ background:#f5f8fc !important; }
.jk-detail__row.is-open td{ background:#f0f5fc !important; }
/* 펼쳐진 행의 상세 내용 */
.jk-detail__row-extra td{
padding:0 !important;
border-bottom:1px solid #cdd5e0;
}
.jk-detail__row-extra-inner{
display:grid;
grid-template-columns:1.6fr 1fr;
gap:48px;
padding:24px 16px 28px;
background:#fff;
border-top:1px solid #e7ebf2;
}
.jk-detail__row-block h4{
font-size:14.5px;
font-weight:700;
color:#15202b;
margin:0 0 14px;
letter-spacing:.01em;
}
.jk-detail__row-block dl{
display:grid;
grid-template-columns:auto 1fr;
column-gap:32px;
row-gap:8px;
margin:0;
font-size:13.5px;
}
.jk-detail__row-block dt{
color:#6b7a8c;
font-weight:400;
white-space:nowrap;
}
.jk-detail__row-block dd{
color:#1b3a6b;
margin:0;
}
.jk-detail__row-block p{
font-size:13.5px;
color:#6b7a8c;
margin:0;
}
/* === 액션 버튼 (DXF / PDF / Favorites) === */
.jk-detail__actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:24px 0 18px;
padding-top:24px;
border-top:1px solid #e7ebf2;
}
.jk-detail__action{
display:inline-flex;
align-items:center;
gap:10px;
padding:13px 22px;
border:1px solid #1b3a6b;
color:#1b3a6b;
background:#fff;
font-size:13.5px;
font-weight:500;
border-radius:4px;
text-decoration:none;
transition:background .15s, color .15s;
letter-spacing:.01em;
}
.jk-detail__action:hover{
background:#1b3a6b;
color:#fff;
}
.jk-detail__action i{ font-size:14px; }
/* 면책 문구 */
.jk-detail__disclaimer{
margin:18px 0 0;
font-size:12.5px;
color:#7a8aa3;
line-height:1.5;
}
/* === RESPONSIVE === */
@media (max-width:980px){
.jk-detail__top{
grid-template-columns:1fr;
gap:28px;
}
.jk-detail__side{ order:2; }
.jk-detail__media{ order:1; }
}
@media (max-width:640px){
.jk-detail{ padding:24px 0 48px; }
.jk-detail__inner{ padding:0 12px; }
.jk-detail__hero{ aspect-ratio:4/3; }
.jk-detail__thumbs{ left:10px; bottom:10px; gap:6px; }
.jk-detail__thumb{ width:56px; height:56px; padding:4px; }
.jk-detail__accordion summary{ font-size:16px; }
.jk-detail__acc-body{ font-size:13.5px; }
.jk-detail__table thead th,
.jk-detail__table tbody td{ padding:12px 10px; font-size:12.5px; }
.jk-detail__action{ padding:11px 16px; font-size:12.5px; }
.jk-detail__row-extra-inner{
grid-template-columns:1fr;
gap:24px;
padding:16px 10px 20px;
}
.jk-detail__row-block dl{
grid-template-columns:1fr;
column-gap:0;
row-gap:4px;
}
.jk-detail__row-block dd{ padding-left:0; margin-bottom:6px; }
}
/* ===========================================================
제품 카드 그리드 (.dyr-prodcard) — index PRODUCTS + product.php 공용
정사각 썸네일(제품 위 / 여백 아래) 하단에 라벨 오버레이
=========================================================== */
.dyr-prodgrid{
display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:18px;
}
.dyr-prodcard{
position:relative;display:flex;flex-direction:column;
background:#fff;border:1px solid #e6e8ee;border-radius:14px;overflow:hidden;
text-decoration:none;color:inherit;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.dyr-prodcard:hover{
transform:translateY(-4px);
box-shadow:0 20px 42px -26px rgba(11,28,61,.4);
border-color:#cdd6e4;
}
.dyr-prodcard__media{
aspect-ratio:1/1;background:#fff;overflow:hidden;
}
.dyr-prodcard__media img{width:100%;height:100%;object-fit:contain;display:block;
transition:transform .3s ease}
.dyr-prodcard:hover .dyr-prodcard__media img{transform:scale(1.04)}
/* 텍스트를 사진 하단 여백에 오버레이 */
.dyr-prodcard__body{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:18px 48px 18px 20px;
background:linear-gradient(to top, #fff 48%, rgba(255,255,255,.9) 78%, rgba(255,255,255,0));
}
.dyr-prodcard__eyebrow{
display:block;font-size:10px;letter-spacing:.14em;font-weight:700;
text-transform:uppercase;color:#5b6b86;margin-bottom:6px;
}
.dyr-prodcard--arch .dyr-prodcard__eyebrow{color:#2e5aa4}
.dyr-prodcard--rl .dyr-prodcard__eyebrow{color:#0d9488}
.dyr-prodcard__title{
font-size:16px;font-weight:700;color:#0b1c3d;margin:0;
letter-spacing:-.01em;line-height:1.32;
}
.dyr-prodcard:hover .dyr-prodcard__title{color:#1b3a6b}
.dyr-prodcard__go{
position:absolute;right:14px;bottom:15px;
width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#f3f5f9;color:#94a3b8;font-size:11px;
transition:background .2s ease, color .2s ease, transform .2s ease;
}
.dyr-prodcard:hover .dyr-prodcard__go{background:#1b3a6b;color:#fff;transform:translateX(2px)}
.dyr-prodcard__go svg{width:12px;height:12px;display:block}
/* reveal 스태거 (index 에서만 .dyr-reveal 부여) */
.dyr-prodcard.dyr-reveal{opacity:0;transform:translateY(16px);
transition:opacity .5s ease, transform .5s ease;transition-delay:var(--prodx-delay,0ms)}
.dyr-prodcard.dyr-reveal.is-in{opacity:1;transform:none}
@media (max-width:1080px){ .dyr-prodgrid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:720px){ .dyr-prodgrid{grid-template-columns:repeat(2, minmax(0,1fr));gap:12px} }
@media (max-width:420px){ .dyr-prodgrid{grid-template-columns:1fr} }