:root { --ink:#10100f; --paper:#f4f3ee; --orange:#f15822; --amber:#ffab18; }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; }
body { overflow:hidden; background:var(--paper); color:var(--ink); font-family:"Noto Sans KR",sans-serif; }
.renewal { isolation:isolate; min-height:100svh; position:relative; display:grid; grid-template-rows:auto 1fr auto auto; padding:clamp(24px,3.6vw,62px) clamp(24px,6vw,110px) clamp(22px,2.4vw,42px); overflow:hidden; animation:page-open 1.7s cubic-bezier(.22,.61,.36,1) both; }
.raon-line { position:fixed; inset:0; width:100%; height:100%; z-index:10; pointer-events:none; }
.image-atmosphere { position:absolute; z-index:-1; top:16%; right:clamp(24px,6vw,110px); width:min(38vw,560px); height:62%; overflow:hidden; pointer-events:none; opacity:0; transform:scale(.84); transform-origin:62% 54%; animation:photo-arrival 3.2s .55s cubic-bezier(.16,1,.3,1) forwards; }
.image-atmosphere::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,var(--paper) 0%,rgba(244,243,238,.97) 8%,rgba(244,243,238,.3) 45%,rgba(244,243,238,.09) 100%); }
.image-atmosphere::after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(244,243,238,.42),transparent 22%,transparent 72%,rgba(244,243,238,.96)); }
.image-atmosphere img { width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.12) brightness(.7); opacity:.93; transform:scale(1.08); transition:filter 1s ease, opacity 1s ease; animation:slow-drift 18s 3.8s ease-in-out infinite alternate; }
header { height:50px; display:flex; align-items:center; justify-content:space-between; position:relative; border-bottom:1px solid rgba(16,16,15,.2); } header::after { content:""; position:absolute; height:1px; background:var(--ink); bottom:-1px; left:0; right:0; transform:scaleX(0); transform-origin:left; animation:line-in .75s .1s cubic-bezier(.77,0,.18,1) forwards; }
.logo { width:132px; display:block; animation:rise 1.1s .15s cubic-bezier(.22,.61,.36,1) both; } header p { margin:0; font-size:11px; letter-spacing:-.02em; color:#4a4944; animation:rise 1.1s .32s cubic-bezier(.22,.61,.36,1) both; }
.message { align-self:center; padding:clamp(45px,8vh,115px) 0 clamp(35px,6vh,82px); max-width:1120px; }
.overline { margin:0 0 18px; font-size:clamp(12px,.8vw,14px); font-weight:500; color:var(--orange); letter-spacing:-.02em; animation:rise 1.2s .65s cubic-bezier(.22,.61,.36,1) both; }
h1 { margin:0; font-size:clamp(43px,5.1vw,85px); font-weight:600; line-height:1.2; letter-spacing:-.082em; animation:rise 1.35s .86s cubic-bezier(.22,.61,.36,1) both; } .mobile-title { display:none; } h1 em { font-style:normal; position:relative; z-index:0; white-space:nowrap; } h1 em::after { content:""; z-index:-1; position:absolute; height:.18em; left:1%; right:-1%; bottom:.05em; background:var(--amber); transform:skewX(-23deg); transform-origin:left; animation:marker 1.1s 1.68s cubic-bezier(.22,.61,.36,1) both; }
.statement { display:flex; align-items:end; gap:clamp(24px,7vw,110px); margin-top:clamp(36px,5vh,72px); padding-left:clamp(0px,7vw,125px); animation:rise 1.25s 1.15s cubic-bezier(.22,.61,.36,1) both; }.statement > p { margin:0; max-width:480px; font-size:clamp(14px,1.05vw,17px); line-height:1.85; letter-spacing:-.04em; color:#373732; }.services { padding-bottom:2px; display:flex; flex-direction:column; gap:6px; color:#4c4b46; font-size:12px; letter-spacing:-.035em; }.services span::before { content:""; display:inline-block; width:14px; height:1px; margin:0 8px 4px 0; background:var(--orange); }
.contact { display:flex; justify-content:space-between; align-items:end; padding:17px 0 20px; border-top:1px solid var(--ink); gap:30px; animation:rise 1.2s 1.52s cubic-bezier(.22,.61,.36,1) both; }.contact > p { margin:0; font-size:12px; line-height:1.8; color:#4e4d48; letter-spacing:-.035em; }.contact-links { display:flex; align-items:center; gap:18px; font-size:clamp(15px,1.15vw,18px); font-weight:600; letter-spacing:-.05em; white-space:nowrap; }.contact-links a { color:var(--ink); text-decoration:none; position:relative; padding:4px 0; transition:color .35s ease, transform .35s ease; }.contact-links a::after { content:""; position:absolute; height:2px; left:0; right:0; bottom:-2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.22,.61,.36,1); }.contact-links a:hover, .contact-links a:focus-visible { transform:translateY(-3px); }.contact-links a:hover::after, .contact-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }.contact-links a:last-child { color:var(--orange); }.contact-links span { width:1px; height:14px; background:#999891; }
footer { display:flex; align-items:center; justify-content:flex-end; border-top:1px solid rgba(16,16,15,.26); padding-top:16px; animation:appear 1.1s 1.72s ease both; } footer p { margin:0; font-size:10px; color:#77766f; letter-spacing:-.03em; }
@media (hover:hover) { .renewal:hover .image-atmosphere img { filter:grayscale(.76) contrast(1.08) brightness(.77); opacity:1; } }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes appear { from { opacity:0; } to { opacity:1; } }
@keyframes marker { from { transform:skewX(-23deg) scaleX(0); } to { transform:skewX(-23deg) scaleX(1); } }
@keyframes slow-drift { from { transform:scale(1.08) translateX(0); } to { transform:scale(1.13) translateX(-1.2%); } }
@keyframes page-open { from { opacity:0; } to { opacity:1; } }
@keyframes photo-arrival { 0% { opacity:0; transform:scale(.84); filter:blur(7px); } 55% { opacity:1; filter:blur(0); } 100% { opacity:1; transform:scale(1); filter:blur(0); } }
@keyframes line-in { to { transform:scaleX(1); } }
@media (max-width:760px) { body { overflow:hidden; }.renewal { padding:20px 22px 18px; grid-template-rows:auto 1fr auto auto; }.raon-line { display:none; }.image-atmosphere { width:100%; height:57%; top:auto; right:0; bottom:0; opacity:.54; transform:none; animation:mobile-photo-arrival 3.2s .55s cubic-bezier(.16,1,.3,1) forwards; }.image-atmosphere::before { background:linear-gradient(180deg,var(--paper) 0%,rgba(244,243,238,.96) 12%,rgba(244,243,238,.38) 53%,rgba(244,243,238,.72) 100%); }.image-atmosphere::after { background:linear-gradient(90deg,rgba(244,243,238,.47),rgba(244,243,238,.05)); }.image-atmosphere img { object-position:57% center; }.logo { width:110px; } header { height:42px; } header p { font-size:10px; }.message { align-self:center; padding:20px 0 24px; }.overline { font-size:11px; margin-bottom:13px; } h1 { font-size:clamp(34px,10.2vw,42px); line-height:1.23; }.desktop-title { display:none; }.mobile-title { display:inline; }.statement { display:block; padding-left:0; margin-top:31px; }.statement > p { max-width:330px; font-size:13px; line-height:1.75; }.desktop-break { display:none; }.services { margin-top:18px; gap:4px; font-size:10.5px; }.services span::before { width:11px; margin-right:7px; }.contact { display:block; padding:13px 0 15px; }.contact > p { font-size:10.5px; line-height:1.72; }.contact-links { gap:11px; margin-top:14px; font-size:13px; }.contact-links span { height:12px; } footer { padding-top:13px; }.renewal footer img { width:92px; } footer p { font-size:8px; max-width:185px; text-align:right; } }
@keyframes mobile-photo-arrival { 0% { opacity:0; filter:blur(7px); } 55% { opacity:.54; filter:blur(0); } 100% { opacity:.54; filter:blur(0); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media (max-height:720px) and (min-width:761px) { .renewal { padding-top:26px; padding-bottom:20px; }.message { padding:35px 0; } .statement { margin-top:27px; }.contact { padding:12px 0; } h1 { font-size:clamp(39px,4.6vw,66px); }.contact > p { font-size:11px; } }