/* m04 곡선 모서리 (참고 main4) — 화면 가득 사진, 오른쪽 아래 큰 곡선 깎기 ★ v1.55.6 글 배치는 3번 '왼쪽 큰 제목'과 같은 방식: 왼쪽 가운데 제목·설명·알약 버튼, 왼쪽 아래 넘김. 명조·곡선은 그대로 */ .iwv.iwv--m04 { --iwv-fg: #fff; --iwv-dim-d: .3; --iwv-t-font: 'Noto Serif KR', 'Nanum Myeongjo', serif; --iwv-t-size: clamp(36px, 4.5vw, 76px); --iwv-t-weight: 700; --iwv-t-lh: 1.28; --iwv-t-ls: -.035em; /* ★ v1.55.6 3번과 같은 크기 */ --iwv-d-size: clamp(18px, 2vw, 34px); --iwv-d-weight: 500; --iwv-d-lh: 1.35; --iwv-d-ls: -.02em; --m04-r: clamp(90px, 15vw, 280px); background: transparent; } .iwv.iwv--m04 .iwv-m04-frame { position: absolute; inset: 0; border-bottom-right-radius: var(--m04-r); overflow: hidden; background: #1d2633; isolation: isolate; } .iwv.iwv--m04 .iwv-dim { background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.1) 100%); opacity: calc(var(--iwv-dim, var(--iwv-dim-d)) * 2.4); } .iwv.iwv--m04 .is-dark .iwv-dim { background: linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 70%); } .iwv.iwv--m04 .is-on .iwv-img { animation: iwvM04Zoom 9s ease-out both; } @keyframes iwvM04Zoom { from { transform: scale(1.08); } to { transform: scale(1); } } .iwv.iwv--m04 .iwv-copy { position: absolute; z-index: 2; left: 7%; top: calc((100% + var(--iwv-hdr) - var(--m04-cb)) / 2); transform: translateY(-50%); width: min(62%, 900px); display: flex; flex-direction: column; align-items: flex-start; } .iwv.iwv--m04 { --m04-cb: calc(clamp(28px, 5%, 56px) + 52px); } .iwv.iwv--m04.is-single { --m04-cb: 0px; } .iwv.iwv--m04 .iwv-title { margin-bottom: clamp(22px, 2.6vw, 44px); } .iwv.iwv--m04 .iwv-desc { margin-bottom: clamp(26px, 3.4vw, 56px); } .iwv.iwv--m04 .iwv-copy > :last-child { margin-bottom: 0; } .iwv.iwv--m04 .iwv-btn { --iwv-b-bg: rgba(255,255,255,.28); --iwv-b-bd: rgba(255,255,255,.18); --iwv-b-pad: clamp(13px, 1.1vw, 18px) clamp(20px, 1.4vw, 24px); --iwv-b-size: clamp(15px, 1.15vw, 20px); backdrop-filter: blur(8px); gap: clamp(28px, 2.4vw, 44px); color: var(--iw-btn-color, #fff); } .iwv.iwv--m04 .iwv-btn:hover { background: rgba(255,255,255,.92); color: #111; } .iwv.iwv--m04 .iwv-btn .iwv-arw { width: 11px; height: 11px; } .iwv.iwv--m04 .is-dark .iwv-btn { --iwv-b-bg: rgba(20,24,31,.1); --iwv-b-bd: rgba(20,24,31,.25); color: #14181f; } .iwv.iwv--m04 .iwv-title { } .iwv.iwv--m04 .iwv-desc { opacity: .95; } .iwv.iwv--m04 .is-on .iwv-copy > * { animation: iwvM04In 1.1s cubic-bezier(.2,.7,.2,1) both; } .iwv.iwv--m04 .is-on .iwv-copy > *:nth-child(2) { animation-delay: .12s; } .iwv.iwv--m04 .is-on .iwv-copy > *:nth-child(3) { animation-delay: .24s; } @keyframes iwvM04In { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* 원형 진행 + 멈춤 · 점 */ .iwv.iwv--m04 .iwv-m04-ctrl { position: absolute; z-index: 5; left: 7%; bottom: clamp(28px, 5%, 56px); color: #fff; gap: 20px; } .iwv.iwv--m04 .iwv-m04-ring { position: relative; width: 52px; height: 52px; border-radius: 50%; } .iwv.iwv--m04 .iwv-m04-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.4; } .iwv.iwv--m04 .iwv-m04-ring .bg { stroke: rgba(255,255,255,.35); } .iwv.iwv--m04 .iwv-m04-ring .run { stroke: #fff; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; stroke-linecap: round; } .iwv.iwv--m04 .iwv-m04-ring .run.is-run { animation: iwvM04Ring var(--iwv-sec, 6s) linear forwards; } .iwv.iwv--m04.is-paused .iwv-m04-ring .run.is-run { animation-play-state: paused; } @keyframes iwvM04Ring { to { stroke-dashoffset: 0; } } .iwv.iwv--m04 .iwv-m04-ring i { width: 9px; height: 12px; border-width: 0 2.5px; } .iwv.iwv--m04.is-paused .iwv-m04-ring i { width: 0; height: 0; border-width: 7px 0 7px 11px; } .iwv.iwv--m04 .iwv-m04-dots .iwv-dots { gap: 12px; } .iwv.iwv--m04 .iwv-m04-dots .iwv-dot { width: 10px; height: 10px; opacity: .45; } .iwv.iwv--m04 .iwv-m04-dots .iwv-dot.is-on { width: 10px; opacity: 1; box-shadow: 0 0 0 5px rgba(255,255,255,.22); } @media (max-width: 1024px) { .iwv.iwv--m04 .iwv-copy { width: 80%; } } @media (max-width: 768px) { .iwv.iwv--m04 { --iwv-t-size: 36px; --iwv-d-size: 18px; --m04-r: 90px; } .iwv.iwv--m04 .iwv-dim { background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%); } .iwv.iwv--m04 .iwv-copy { left: 24px; right: 24px; width: auto; top: auto; bottom: 104px; transform: none; } .iwv.iwv--m04 .iwv-title { margin-bottom: 16px; } .iwv.iwv--m04 .iwv-desc { margin-bottom: 24px; } .iwv.iwv--m04 .iwv-m04-ctrl { left: 24px; bottom: 36px; gap: 14px; } .iwv.iwv--m04 .iwv-m04-ring { width: 44px; height: 44px; } } /* ★ v1.58.3 PC 글 시작선 = 서브 비주얼 제목·상단 메뉴 바와 같은 선 (본문 폭 --iw-container 1600 안쪽 40px) 위 left:7% 는 화면 폭 비율이라 넓은 화면에선 서브보다 바깥, 좁은 노트북에선 안쪽으로 어긋났다. 원래 규칙은 그대로 두고 같은 특이도로 뒤에서 덮는다(+ :not(.iwv--sub) — 서브 m04 는 sub.css 의 --iwsv-x 그대로). 1024 이하는 위 모바일 규칙 그대로 · 글 위치(has-tp)를 고른 비주얼은 common.css 규칙(더 높은 특이도)이 그대로 이긴다 */ @media (min-width: 1025px) { .iwv.iwv--m04:not(.iwv--sub) .iwv-copy, .iwv.iwv--m04:not(.iwv--sub) .iwv-m04-ctrl { left: max(40px, calc((100% - var(--iw-container, 1600px)) / 2 + 40px)); } } /* ★ v1.58.4 글 위치(꾸미기 › 글 위치 = has-tp)를 고른 메인도 같은 선 — 1.58.3 은 has-tp 를 빼 두어서 common.css 의 .iwv.has-tp.has-tp.has-tp … { left: var(--tp-x, 7%) } (특이도 더 높음)가 그대로 이겼다(다사랑 운영 = tp-left). --tp-x 만 바꾸면 왼쪽은 시작선 · 오른쪽은 끝선(햄버거 오른쪽과 같은 선) · 가운데는 양쪽이 같이 맞는다. 넘김 단추는 쪽마다 덮는다 */ @media (min-width: 1025px) { .iwv.iwv--m04.has-tp:not(.iwv--sub) { --tp-x: max(40px, calc((100% - var(--iw-container, 1600px)) / 2 + 40px)); } .iwv.iwv--m04.has-tp.tp-left:not(.iwv--sub) .iwv-m04-ctrl { left: var(--tp-x); } .iwv.iwv--m04.has-tp.tp-right:not(.iwv--sub) .iwv-m04-ctrl { right: var(--tp-x); } } /* ★ v1.60.0 글 묶음 옵션(꾸미기 › 글 묶음)용 경계 · 간격 변수 — 메인만. 값을 안 고르면 화면은 1.59.0 그대로 (기본 간격은 위 규칙과 같은 값을 var 의 기본으로 · 끝 글은 위 :last-child 규칙대로 0 이 되도록 :not(:last-child)) */ @media (min-width: 769px) { .iwv.iwv--m04:not(.iwv--sub) { --cp-H: var(--iwv-h, var(--iwv-full)); --cp-clr: clamp(24px, calc(var(--cp-H) * .045), 56px); --cp-t: calc(var(--iwv-hdr) + var(--cp-clr)); --cp-b: calc(var(--m04-cb) + var(--cp-clr)); } .iwv.iwv--m04.has-tp.tp-right:not(.iwv--sub) { --cp-b: calc(var(--m04-r) * .5 + 78px + var(--cp-clr)); } .iwv.iwv--m04:not(.iwv--sub) .iwv-title:not(:last-child) { margin-bottom: var(--iwv-g1, clamp(22px, 2.6vw, 44px)); } .iwv.iwv--m04:not(.iwv--sub) .iwv-desc:not(:last-child) { margin-bottom: var(--iwv-g2, clamp(26px, 3.4vw, 56px)); } } @media (max-width: 768px) { .iwv.iwv--m04:not(.iwv--sub) { --cp-t-mo: calc(var(--iwv-hdr) + 24px); --cp-b-mo: 104px; } .iwv.iwv--m04:not(.iwv--sub) .iwv-title:not(:last-child) { margin-bottom: var(--iwv-g1-mo, 16px); } .iwv.iwv--m04:not(.iwv--sub) .iwv-desc:not(:last-child) { margin-bottom: var(--iwv-g2-mo, 24px); } }