/* ============================================================ main-fx.css — 메인(main/main.php) 전용 효과 ------------------------------------------------------------ 메인에서만 쓰는 연출을 모아둔다. 공통 스타일(버튼·리빌·타이포 등)은 style.css 에 그대로 두고, 여기에는 메인 화면에만 붙는 효과만 넣는다. 메인이 아닌 페이지는 이 파일을 불러오지 않는다. ============================================================ */ /* ---------- 히어로 · 흐르는 물결 배경 (참고: new.studio) ---------- */ /* 히어로 배경을 셰이더가 직접 그린다. new.studio 영상에서 뽑은 딥네이비 → 일렉트릭 블루 그라데이션이 도메인 워핑으로 천천히 흐른다. 본문(z-index:2) 아래에 깔린다. */ .hero__flow { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; } /* 시안의 실크 사진 대신 셰이더가 배경을 그린다. WebGL 이 없으면 아래 그라데이션이 그대로 보이도록 .hero__bg 에 같은 색을 깔아 둔다. */ .hero__bg { background: linear-gradient(100deg, #241E67 0%, #3B32A2 42%, #574CC4 100%); } .hero__bg img { display: none; } /* 움직임을 줄이도록 설정한 사용자에게는 흐름을 멈추고 직접 넘기게 둔다 */ @media (prefers-reduced-motion: reduce) { .why__scroller { overflow-x: auto; scrollbar-width: none; } .why__scroller::-webkit-scrollbar { display: none; } .why__track { animation: none; } .why__list[aria-hidden="true"] { display: none; } } /* ---------- Web Guide · 오버 시 테두리가 그려지는 효과 ---------- */ /* 각도를 애니메이션하려면 커스텀 속성을 등록해야 한다(Chrome/Edge/Safari 16.4+). 등록되지 않은 브라우저에서는 테두리가 즉시 나타나며, 기능상 문제는 없다. */ @property --guide-sweep { syntax: ""; inherits: false; initial-value: 0deg; } .guide-card__link { position: relative; } .guide-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 8px; /* 이 padding 이 곧 테두리 두께다 (마스크로 가운데를 파내 테두리만 남긴다) */ padding: 20px; --guide-sweep: 0deg; /* 좌측 상단 모서리에서 출발해 시계 방향으로 한 바퀴 그려진다 */ background: conic-gradient(from -135deg, #ffd76a 0deg, #ff7ac4 calc(var(--guide-sweep) * .35), #58e0ff calc(var(--guide-sweep) * .7), #ffffff var(--guide-sweep), rgba(255, 255, 255, 0) var(--guide-sweep)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --guide-sweep .75s cubic-bezier(.3, .8, .3, 1); pointer-events: none; } .guide-card__link:hover::after, .guide-card__link:focus-visible::after { --guide-sweep: 360deg; } /* 위 테두리는 카드 안쪽으로 20px 을 차지한다. 제목과 태그는 원래 카드 가장자리에 바짝 붙어 있어 그 띠에 덮였다. 띠 두께(20px)만큼 안쪽으로 들여 놓아 글자가 가려지지 않게 한다. (사진은 띠가 액자처럼 걸리는 편이 보기 좋아 그대로 둔다) .guide-card__title · __tags 는 웹가이드 목록 페이지와 같은 이름을 쓰므로 메인의 목록(.guide__list) 안으로만 한정한다. */ .guide__list .guide-card__title, .guide__list .guide-card__tags { padding-left: 20px; padding-right: 20px; } .guide__list .guide-card__tags { margin-bottom: 20px; } @media (prefers-reduced-motion: reduce) { .guide-card__link::after { transition: none; } } /* ---------- 서비스 · 스크롤에 따라 어두운 톤 → 밝은 톤 (참고: basicagency.com) ---------- */ /* JS 가 --lit 을 0 → 1 로 밀어준다. 스크립트가 없으면 0 인 채로 남아 원래 디자인 그대로다. */ .svc { --lit: 0; } .svc::after { content: ""; position: absolute; inset: 0; z-index: 0; /* 배경 사진 위, 본문(z-index:1) 아래 */ pointer-events: none; /* background: linear-gradient(180deg, #f6f7fc 0%, #e9ecfb 100%); */ opacity: var(--lit); } /* 바탕이 밝아지는 만큼 제목 색을 함께 뒤집는다. color-mix 를 모르는 브라우저는 아래 흰색 선언에 그대로 머문다. */ /* .svc__head { color: var(--c-white); } .svc__head { color: color-mix(in srgb, #ffffff, #1b1a18 calc(var(--lit) * 100%)); } */ /* 어두운 바탕에서도, 밝아진 뒤에도 카드가 뜨도록 그림자를 조금 올린다. */ .svc-card__box { box-shadow: 0 12px 32px rgba(20, 20, 45, .10); } /* ---------- Why · 카드 ---------- */ .why-card { transition: box-shadow .3s ease; will-change: transform; } .why-card:hover { transform: none; } /* ---------- Why · 카드 아이콘 (Figma 930:4975) ---------- 다섯 장이 자동으로 흘러가는 동안 타일이 제자리에서 느리게 떠 있고, 그 위로 카드마다 다른 빛이 지나간다. 그림이 라 효과를 직접 붙일 수 없어 감싼 요소의 ::before / ::after 로 그린다(.svc-fx 와 같은 방식). 타일 바탕이 밝은 파스텔이라 빛은 흰색으로 얹는다. */ .why-card__icon { transition: transform .35s cubic-bezier(.2, .7, .3, 1); } .why-card__icon > img { animation: why-icon-float 5.4s ease-in-out infinite; will-change: transform; } /* 다섯 장이 한꺼번에 오르내리지 않도록 시작점을 흩는다 */ .why-card__icon[data-fx="2"] > img { animation-delay: -1.1s; } .why-card__icon[data-fx="3"] > img { animation-delay: -2.2s; } .why-card__icon[data-fx="4"] > img { animation-delay: -3.3s; } .why-card__icon[data-fx="5"] > img { animation-delay: -4.4s; } @keyframes why-icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } } .why-card__icon::before, .why-card__icon::after { content: ""; position: absolute; pointer-events: none; z-index: 1; } /* 01 레이어 — 빛이 비스듬히 한 번 스친다 */ .why-card__icon[data-fx="1"]::before { inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 60%); transform: translateX(-100%); animation: why-sheen 5s cubic-bezier(.45, 0, .2, 1) infinite; } @keyframes why-sheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } } /* 02 사람 — 가운데가 천천히 밝아졌다 잦아든다 */ .why-card__icon[data-fx="2"]::before { inset: 0; background: radial-gradient(circle at 50% 56%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 62%); animation: why-breathe 4.2s ease-in-out infinite; } @keyframes why-breathe { 0%, 100% { opacity: .12; transform: scale(.84); } 50% { opacity: .95; transform: scale(1.08); } } /* 03 화살표 — 속도가 보이도록 넓은 빛이 빠르게 지나간다 */ .why-card__icon[data-fx="3"]::before { inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 82%); transform: translateX(-100%); animation: why-dash 3.2s cubic-bezier(.7, 0, .3, 1) infinite; } @keyframes why-dash { 0% { transform: translateX(-100%); } 52%, 100% { transform: translateX(100%); } } /* 04 문서 — 아래에서 위로 한 줄이 훑고 지나간다 */ .why-card__icon[data-fx="4"]::before { left: 0; right: 0; bottom: -42%; height: 42%; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .92) 100%); animation: why-scan 4.6s ease-in-out infinite; } @keyframes why-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 72%, 100% { transform: translateY(-260%); opacity: 0; } } /* 05 톱니 — 관리가 멈추지 않는다는 뜻으로 점선 고리가 천천히 돈다. 타일 바탕이 밝아 흰색은 묻히므로 주 색을 옅게 쓴다. */ .why-card__icon[data-fx="5"]::after { inset: 19%; border-radius: 50%; border: 2px dashed rgba(87, 76, 196, .5); /* var(--c-blue) 계열 */ animation: why-gear-spin 9s linear infinite; } @keyframes why-gear-spin { to { transform: rotate(360deg); } } /* 카드에 올리면 타일이 조금 커지고 빛이 빨라진다 */ .why-card:hover .why-card__icon { transform: scale(1.07); } .why-card:hover .why-card__icon[data-fx="1"]::before { animation-duration: 2.6s; } .why-card:hover .why-card__icon[data-fx="2"]::before { animation-duration: 2.4s; } .why-card:hover .why-card__icon[data-fx="3"]::before { animation-duration: 1.6s; } .why-card:hover .why-card__icon[data-fx="4"]::before { animation-duration: 2.6s; } .why-card:hover .why-card__icon[data-fx="5"]::after { animation-duration: 3.4s; } @media (prefers-reduced-motion: reduce) { .why-card__icon > img, .why-card__icon::before, .why-card__icon::after { animation: none; } .why-card__icon::before, .why-card__icon::after { opacity: 0; } .why-card:hover .why-card__icon { transform: none; } } /* ---------- 포트폴리오 · 스크롤에 맞춰 부채가 펼쳐진다 (참고: audition.smtown.com) ---------- */ /* smtown 은 구간을 고정(pin)해 두고 포스터 목록을 스크롤로 움직인다. 여기서는 고정 없이, 섹션이 들어오는 정도(--open 0~1)에 회전·높이·크기를 실어 카드가 접힌 상태에서 시안 배치로 펼쳐지게 한다. JS 가 없으면 --open 이 1 이라 시안 그대로다. */ .pf { --open: 1; } .pf.is-scrubbed { --open: 0; } .pf-card { transform: translate(-50%, -50%) translateY(calc((1 - var(--open)) * 130px)) rotate(calc(var(--r) * var(--open))) scale(calc(.84 + .16 * var(--open))); } .pf-card:hover { transform: translate(-50%, -50%) translateY(calc((1 - var(--open)) * 130px)) rotate(calc(var(--r) * var(--open))) scale(calc(.84 + .16 * var(--open) + .05)); } /* ---------- 유지보수 · 잔잔한 부유와 맥박 (참고: itddaa.com) ---------- */ /* itddaa 는 작은 요소들에 floating / rotate / scale 을 조금씩 시차를 두고 걸어 화면이 정지해 보이지 않게 한다. 여기서도 장식 요소에만 얕게 준다. */ @keyframes mt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes mt-drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } } @keyframes mt-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 67, 238, .45); } 70% { box-shadow: 0 0 0 9px rgba(74, 67, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 67, 238, 0); } } .mt-acc__chips img { animation: mt-float 4s ease-in-out infinite; } .mt-acc__chips img:nth-child(2) { animation-delay: -1.4s; } .mt-acc__sheen { animation: mt-drift 9s ease-in-out infinite; } .mt-acc:nth-child(2) .mt-acc__sheen { animation-delay: -3s; } .mt-acc:nth-child(3) .mt-acc__sheen { animation-delay: -6s; } /* 접수중인 건은 상태 점이 천천히 뛴다 — 처리 중이라는 신호 */ .mt-req__status--ing .mt-req__knob { animation: mt-pulse 2.6s ease-out infinite; } /* 카드는 아주 얕게 떠 있게만 한다(읽는 데 방해되지 않는 폭) */ .mt-req { animation: mt-float 6.5s ease-in-out infinite; } .mt__col .mt-req:nth-child(2) { animation-delay: -2.1s; } .mt__col .mt-req:nth-child(3) { animation-delay: -4.2s; } .mt__col--right .mt-req { animation-duration: 7.2s; } @media (prefers-reduced-motion: reduce) { .mt-acc__chips img, .mt-acc__sheen, .mt-req, .mt-req__status--ing .mt-req__knob { animation: none; } } /* ---------- 전시 · 작은 창이 열리듯 타일이 펼쳐진다 (참고: carlab.kr) ---------- */ /* carlab 은 clip-path: inset(...) 을 좁은 라운드 창에서 전체로 여는 방식을 쓴다. 기본값은 '이미 열린 상태'라 스크립트가 없으면 그대로 다 보인다. */ .ex-tile { clip-path: inset(0% 0% 0% 0% round 0px); transition: clip-path .95s cubic-bezier(.22, .8, .24, 1), opacity .55s ease; } .ex.is-armed .ex-tile { clip-path: inset(46% 46% 46% 46% round 30px); opacity: 0; } .ex.is-armed.is-open .ex-tile { clip-path: inset(0% 0% 0% 0% round 0px); opacity: 1; } /* 타일마다 조금씩 늦게 열려 한 번에 펼쳐지지 않게 한다 */ .ex.is-armed .ex-tile:nth-child(1) { transition-delay: 0s, 0s; } .ex.is-armed .ex-tile:nth-child(2) { transition-delay: .07s, .07s; } .ex.is-armed .ex-tile:nth-child(3) { transition-delay: .14s, .14s; } .ex.is-armed .ex-tile:nth-child(4) { transition-delay: .21s, .21s; } .ex.is-armed .ex-tile:nth-child(5) { transition-delay: .28s, .28s; } .ex.is-armed .ex-tile:nth-child(6) { transition-delay: .35s, .35s; } .ex.is-armed .ex-tile:nth-child(7) { transition-delay: .42s, .42s; } .ex.is-armed .ex-tile:nth-child(8) { transition-delay: .49s, .49s; } .ex.is-armed .ex-tile:nth-child(9) { transition-delay: .56s, .56s; } .ex.is-armed .ex-tile:nth-child(10) { transition-delay: .63s, .63s; } .ex.is-armed .ex-tile:nth-child(11) { transition-delay: .70s, .70s; } .ex.is-armed .ex-tile:nth-child(12) { transition-delay: .77s, .77s; } /* 카피는 타일이 열린 뒤 한 줄씩 올라온다 */ .ex.is-armed .ex__title, .ex.is-armed .ex__lead, .ex.is-armed .ex__more { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.22, .8, .24, 1); } .ex.is-armed .ex__title { transition-delay: .45s; } .ex.is-armed .ex__lead { transition-delay: .58s; } .ex.is-armed .ex__more { transition-delay: .71s; } .ex.is-armed.is-open .ex__title, .ex.is-armed.is-open .ex__lead, .ex.is-armed.is-open .ex__more { opacity: 1; transform: none; } /* ---------- Clients · 기울어진 로고 벽 (참고: godo.co.kr) ---------- */ /* godo 는 로고 격자를 통째로 기울여(-22도) 대각선으로 흘린다. 여기서는 이미 -7도로 기울어 있으니, 스크롤에 따라 기울기가 눕는 정도만 더한다. */ .clients { --tilt: -7deg; --wallz: 1; } .clients__wall { /* style.css 의 translate(-50%, -50%) rotate scale 과 맞춘다 */ transform: translate(-50%, -50%) rotate(var(--tilt)) scale(var(--wallz)); transition: none; } /* ---------- 서비스 · 카드마다 다른 배경 글로우 (참고: reflect.app) ---------- */ /* reflect 는 카드 모서리에 아주 옅은 radial-gradient 를 깔아 카드마다 다른 공기를 만든다. 시안의 흰 카드는 그대로 두고, 그 위에 색만 아주 얕게 얹는다. */ .svc-card { --glow: 74, 67, 238; } .svc-card:nth-child(1) { --glow: 70, 144, 212; } .svc-card:nth-child(2) { --glow: 18, 181, 201; } .svc-card:nth-child(3) { --glow: 126, 73, 205; } .svc-card:nth-child(4) { --glow: 182, 1, 198; } .svc-card:nth-child(5) { --glow: 74, 67, 238; } .svc-card__box { position: relative; overflow: hidden; background-color: var(--c-white); background-image: radial-gradient(120% 82% at 50% 0%, rgba(var(--glow), .13) 0%, rgba(var(--glow), 0) 62%), radial-gradient(90% 120% at 100% 100%, rgba(var(--glow), .09) 0%, rgba(var(--glow), 0) 68%); transition: background-image .45s ease, box-shadow .3s ease; } /* 아래쪽으로 옅게 깔리는 결 — reflect 의 linear sheen */ .svc-card__box::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(var(--glow), 0) 0%, rgba(var(--glow), .07) 100%); pointer-events: none; } .svc-card__link:hover .svc-card__box { background-image: radial-gradient(130% 95% at 50% 0%, rgba(var(--glow), .2) 0%, rgba(var(--glow), 0) 66%), radial-gradient(100% 130% at 100% 100%, rgba(var(--glow), .14) 0%, rgba(var(--glow), 0) 72%); } /* 카드 안의 글자는 글로우 위에 있어야 한다 */ .svc-card__tag, .svc-card__title, .svc-card__desc { position: relative; z-index: 1; } /* ---------- 어두운 배경의 점선 무늬 — W 모양 (참고: wisprflow.ai) ---------- */ /* 점 격자를 깔고 W 획 모양으로 마스크해, 어두운 포트폴리오 섹션 뒤에 웹비스타의 W 가 은은히 남는다. */ .pf__dots { position: absolute; left: 50%; top: 46%; z-index: 0; width: min(1180px, 76%); height: 420px; transform: translate(-50%, -50%); pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.3px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M8 6 L26 54 L42 20 L58 54 L76 6' fill='none' stroke='%23fff' stroke-width='9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M8 6 L26 54 L42 20 L58 54 L76 6' fill='none' stroke='%23fff' stroke-width='9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; animation: pf-dots-breathe 7s ease-in-out infinite; } @keyframes pf-dots-breathe { 0%, 100% { opacity: .34; } 50% { opacity: .6; } } @media (prefers-reduced-motion: reduce) { .pf__dots { animation: none; } } /* ---------- 전시 · 디더링된 배경 필드 (참고: basedash.com) ---------- */ /* JS(WebGL)가 그린다. 스크립트가 없으면 빈 캔버스라 화면에 영향이 없다. */ .ex__field { position: absolute; inset: -6%; z-index: 0; display: block; width: 112%; height: 112%; opacity: .5; pointer-events: none; opacity: 0.2; } @media (max-width: 768px) { } /* ============================================================ 히어로 탭 전환 — visual01 / 02 / 03 ============================================================ */ .hero-panel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; /* 세로 가운데 */ align-items: center; gap: clamp(40px, 5.5vh, 72px); box-sizing: border-box; } .hero-panel[hidden] { display: none !important; } /* 패널이 바뀔 때 부드럽게 갈아 끼운다 */ .hero-panel.is-active { animation: hero-panel-in .6s cubic-bezier(.22, .8, .24, 1) both; } @keyframes hero-panel-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* 탭은 이제 화면을 바꾸는 버튼이다 */ .hero-tab { border: 1px solid var(--c-tab-border); cursor: pointer; font-family: inherit; } /* ---------- 2·3번 탭 배경 : 검정 + 큰 블러 광원 (참고: huly.io) ---------- */ .hero__night { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #090a0c; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; pointer-events: none; } .hero[data-panel="2"] .hero__night, .hero[data-panel="3"] .hero__night { opacity: 1; visibility: visible; transition: opacity .55s ease, visibility 0s; } /* 2번 탭에서는 실크 배경과 결 레이어를 덮는다 */ .hero[data-panel="2"] .hero__flow, .hero[data-panel="3"] .hero__flow { opacity: 0; } .hero__bloom { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; } .hero__bloom--1 { left: 8%; top: 6%; width: 46%; height: 58%; background: radial-gradient(circle, rgba(255, 138, 60, .34) 0%, rgba(255, 138, 60, 0) 70%); animation: hero-bloom 17s ease-in-out infinite alternate; } .hero__bloom--2 { right: 4%; bottom: 2%; width: 52%; height: 62%; background: radial-gradient(circle, rgba(56, 132, 255, .38) 0%, rgba(56, 132, 255, 0) 70%); animation: hero-bloom 21s ease-in-out infinite alternate-reverse; } .hero__bloom--3 { left: 34%; top: 30%; width: 40%; height: 46%; background: radial-gradient(circle, rgba(210, 208, 208, .16) 0%, rgba(210, 208, 208, 0) 70%); animation: hero-bloom 26s ease-in-out infinite alternate; } @keyframes hero-bloom { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.12); } } /* 3번 탭에서만 디더링 필드를 쓴다 */ .hero__dither { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .55s ease; } .hero[data-panel="3"] .hero__dither { opacity: .6; } .hero[data-panel="3"] .hero__bloom--1 { opacity: .35; } /* ---------- 2. 수상 및 인증 (시안 132:2150) 무대 965×554 · 상장 215×304 · 좌상 주황 / 우하 파란 테두리 빛 ---------- */ .awards { position: relative; width: min(965px, 86%); /* 바깥 글로우가 잘리지 않게 */ overflow: visible; } /* 바깥으로 번지는 빛 — overflow:hidden 무대 밖에 둔다 */ .awards::before, .awards::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(32px); } .awards::before { width: 46%; height: 58%; top: -16%; left: -10%; background: radial-gradient(circle, rgba(255, 150, 55, .85) 0%, rgba(255, 110, 30, .35) 42%, transparent 70%); } .awards::after { width: 50%; height: 60%; right: -12%; bottom: -18%; background: radial-gradient(circle, rgba(70, 190, 255, .82) 0%, rgba(40, 140, 255, .32) 42%, transparent 70%); } .awards__stage { position: relative; z-index: 1; aspect-ratio: 965 / 554; min-height: 349px; width: 100%; border-radius: 12px; overflow: hidden; background: #0a0a0c; /* 모서리 방향 글로우 + 얇은 테두리 */ box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), -6px -6px 16px rgba(255, 130, 40, .55), 8px 10px 16px rgba(50, 170, 255, .55); } .awards__wall { --tilt: -14deg; position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.2vw, 16px); width: 138%; height: 148%; padding: clamp(12px, 1.5vw, 22px) 0; transform: translate(-50%, -50%) rotate(var(--tilt)); transform-origin: 50% 50%; background: #0d0d10; } .awards__row { overflow: hidden; } .awards__track { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); width: max-content; padding-right: clamp(10px, 1.1vw, 16px); animation: awards-roll var(--dur, 52s) linear infinite; animation-direction: var(--dir, normal); } @keyframes awards-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 상장 카드 — 시안 215×304 */ .awards__card { flex: none; display: block; width: clamp(118px, 14.5vw, 170px); aspect-ratio: 215 / 304; height: auto; overflow: hidden; border-radius: 4px; background: #16161b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .awards__card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* 문구는 흐르는 상장 위에 얹힌다 */ .awards__copy { position: absolute; left: 0; right: 0; top: 50%; z-index: 6; margin: 0; transform: translateY(-50%); text-align: center; color: var(--c-white); } .awards__copy span { display: block; font-size: clamp(20px, 1.979vw, 38px); /* 시안 ~38 */ font-weight: 800; line-height: 1.7; } /* 글자가 묻히지 않도록 가운데를 눌러준다 */ .awards__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:rgba(0, 0, 0, 0.6); } /* ---------- 3. 전시회 솔루션 ---------- */ .patent { position: relative; width: min(100%, 960px); padding: 10px; text-align: center; color: var(--c-white); } .patent__img { display: block; width: clamp(200px, 60vw, 400px); height: auto; margin: 0 auto; margin-bottom: max(-13vw, -5%); animation: patent-float 6s ease-in-out infinite; } @keyframes patent-float { 0%, 100% { transform: translate(8%,0); } 50% { transform: translate(8%,-12px); } } .patent__title { margin: 26px 0 0; font-size: clamp(22px, 2.083vw, 40px); /* 시안 ~40 */ font-weight: 800; line-height: 1.5; } .patent__lead { margin: 0.2em 0 0; font-size: clamp(15px, 1.458vw, 28px); /* 시안 ~28 */ font-weight: 700; line-height: 1.6; } .patent__more { display: flex; justify-content: center; margin-top: 34px; } @media (max-width: 900px) { .awards { width: min(965px, 94%); } .awards__card { width: clamp(88px, 22vw, 140px); } } @media (prefers-reduced-motion: reduce) { .awards__track, .hero__bloom, .patent__img { animation: none; } .hero-panel.is-active { animation: none; } } /* 탭은 패널 위에 있어야 한다 — 패널이 히어로 전체를 덮고 있어 마우스를 가로챈다 */ .hero__tabs { z-index: 5; } /* ============================================================ 서비스 아이콘 — 서비스마다 다른 배경 효과 (참고: reflect.app) ------------------------------------------------------------ reflect 는 카드마다 아이콘 뒤에 다른 움직임을 깐다(레이더 회전 · 빛 스침 · 궤도 · 스캔 · 반짝임). 시안의 아이콘 그림은 그대로 두고 그 위에 층만 얹는다. ============================================================ */ .svc-fx { position: relative; display: block; overflow: hidden; isolation: isolate; } .svc-fx > img { display: block; width: 100%; height: 100%; border-radius: 50%; } .svc-fx::before, .svc-fx::after { content: ""; position: absolute; pointer-events: none; z-index: 1; } /* ---- 1. 기업 홈페이지 제작 — 빛이 화면을 스치고 지나간다 (aiShowcaseStarlight) ---- */ .svc-fx[data-fx="1"]::before { inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 58%); transform: translateX(-100%); animation: svc-starlight 4.6s cubic-bezier(.45, 0, .2, 1) infinite; } @keyframes svc-starlight { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(100%); } } /* ---- 2. 유지관리 — 레이더가 훑고 파문이 퍼진다 (researchRadarRotate) ---- */ .svc-fx[data-fx="2"]::before { inset: -12%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(124, 58, 237, .42) 0deg, rgba(124, 58, 237, .12) 26deg, rgba(124, 58, 237, 0) 58deg); animation: svc-radar 7s linear infinite; } @keyframes svc-radar { 0% { transform: rotate(-201deg); } 100% { transform: rotate(159deg); } } .svc-fx[data-fx="2"]::after { inset: 24%; border-radius: 50%; border: 1px solid rgba(124, 58, 237, .55); animation: svc-ping 3.2s cubic-bezier(.2, .7, .3, 1) infinite; } @keyframes svc-ping { 0% { transform: scale(.35); opacity: .85; } 100% { transform: scale(1.6); opacity: 0; } } /* ---- 3. 시스템 구축 — 노드 하나가 궤도를 돌고 링이 번진다 (connected-card) ---- */ .svc-fx[data-fx="3"]::before { left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 14px rgba(124, 58, 237, .95); animation: svc-orbit 5.5s linear infinite; } @keyframes svc-orbit { from { transform: rotate(0deg) translateX(76px) rotate(0deg); } to { transform: rotate(360deg) translateX(76px) rotate(-360deg); } } .svc-fx[data-fx="3"]::after { inset: 28%; border-radius: 50%; border: 1px solid rgba(124, 58, 237, .45); animation: svc-ping 3.8s cubic-bezier(.2, .7, .3, 1) infinite .6s; } /* ---- 4. 검색 최적화 — 목록을 위에서 아래로 훑는 스캔 띠 ---- */ .svc-fx[data-fx="4"]::before { left: 0; right: 0; height: 26%; background: linear-gradient(180deg, rgba(139, 92, 246, 0) 0%, rgba(139, 92, 246, .34) 50%, rgba(139, 92, 246, 0) 100%); animation: svc-scan 4.4s cubic-bezier(.5, 0, .5, 1) infinite; } @keyframes svc-scan { 0% { transform: translateY(-45%); } 50% { transform: translateY(305%); } 100% { transform: translateY(-45%); } } /* ---- 5. 보안관리 — 자물쇠가 맥박치고 코드가 반짝인다 (StarsTwinkle) ---- */ .svc-fx[data-fx="5"]::before { inset: 0; background: radial-gradient(circle at 50% 46%, rgba(124, 58, 237, .45) 0%, rgba(124, 58, 237, 0) 46%); animation: svc-lockglow 3s ease-in-out infinite; } @keyframes svc-lockglow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .svc-fx[data-fx="5"]::after { inset: 0; background-image: radial-gradient(1.7px 1.7px at 22% 30%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 71% 22%, #fff 50%, transparent 52%), radial-gradient(1.9px 1.9px at 34% 74%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 79% 67%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 55% 88%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 14% 55%, #fff 50%, transparent 52%); animation: svc-twinkle 2.6s steps(1, end) infinite; } @keyframes svc-twinkle { 0%, 100% { opacity: .12; } 25% { opacity: .85; } 50% { opacity: .28; } 75% { opacity: .7; } } /* 카드에 마우스를 올리면 같은 움직임이 조금 빨라진다 */ .svc-card__link:hover .svc-fx[data-fx="2"]::before { animation-duration: 4s; } .svc-card__link:hover .svc-fx[data-fx="3"]::before { animation-duration: 3.2s; } .svc-card__link:hover .svc-fx[data-fx="4"]::before { animation-duration: 2.6s; } .svc-card__link:hover .svc-fx[data-fx="1"]::before { animation-duration: 2.4s; } @media (prefers-reduced-motion: reduce) { .svc-fx::before, .svc-fx::after { animation: none; } .svc-fx[data-fx="1"]::before, .svc-fx[data-fx="4"]::before { opacity: 0; } } /* ============================================================ 메인 히어로 — 팬 덱 탭 · 유리 지표바 · 02 수상인증 · 03 특허 (2026-09 개편. 작업용으로 나눠 두었던 main-visual.css · main-section02.css · main-section03.css 를 여기로 합쳤다) ------------------------------------------------------------ 기존 클래스(.hero · .hero__stats · .hero__lead …)를 건드리는 규칙은 .hero:has(.hero__deck) 로 감싸 두었다. 같은 파일을 읽는 옛 마크업 화면(main_test.php)에는 걸리지 않게 하려는 것이다. ============================================================ */ /* ============================================================ 1. 탭 — 왼쪽 세로 목록에서 「팬 덱」 으로 ------------------------------------------------------------ 시안(버튼 레이아웃 및 글래스 디자인)의 3B·팬 덱 안. 카드 세 장을 부채처럼 겹쳐 놓고, 고른 것만 똑바로 세워 앞으로 띄운다. 버튼의 class·data-tab 은 그대로라 main-fx.js 는 손대지 않았다. ============================================================ */ .hero__deck { /* 예전에는 화면 왼쪽에 붙여 세로로 쌓았다. 이제 가운데 위쪽에 가로로 편다. */ position: absolute; left: 50%; top: clamp(72px, 7vw, 108px); transform: translateX(-50%); z-index: 5; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 0; width: auto; height: clamp(104px, 9vw, 130px); } .hero__deck .hero-tab { /* style.css 의 세로 목록용 값(200x55 · 테두리 · 배경)을 모두 되돌린다 */ display: block; width: clamp(120px, 10.4vw, 150px); height: auto; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; transform-origin: 50% 120%; transition: transform .52s cubic-bezier(.22, 1, .28, 1); } .hero__deck .hero-tab + .hero-tab { margin-left: clamp(-14px, -0.8vw, -10px); } /* 겹치는 차례와 부채 각도 */ .hero__deck .hero-tab:nth-child(1) { z-index: 0; transform: rotate(-9deg) scale(.96); } .hero__deck .hero-tab:nth-child(2) { z-index: 1; transform: rotate(0deg) scale(.96); } .hero__deck .hero-tab:nth-child(3) { z-index: 2; transform: rotate(9deg) scale(.96); } .hero__deck .hero-tab.is-active { z-index: 5; transform: rotate(0deg) translateY(-26px) scale(1.06); } /* 카드 몸통 — 유리 */ .hero-tab__body { display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(12, 6, 38, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(6, 2, 26, .4); transition: border-color .52s ease, box-shadow .52s ease; } .hero-tab.is-active .hero-tab__body { border-color: rgba(255, 255, 255, .55); box-shadow: 0 26px 56px rgba(6, 2, 26, .6); } /* 카드 위쪽 미리보기 띠 — 그 탭의 화면 분위기를 색으로 보여 준다 */ .hero-tab__thumb { display: block; height: clamp(42px, 3.6vw, 52px); background-size: cover; background-position: center; filter: saturate(.5); transition: filter .52s ease; } .hero-tab.is-active .hero-tab__thumb { filter: saturate(1.15); } .hero__deck .hero-tab:nth-child(1) .hero-tab__thumb { background-image: radial-gradient(90% 70% at 20% 10%, rgba(124, 58, 237, .80), rgba(36, 22, 99, 0) 60%), linear-gradient(135deg, #2b1a74 0%, #3c2496 55%, #1e1257 100%); } .hero__deck .hero-tab:nth-child(2) .hero-tab__thumb { background-image: radial-gradient(85% 70% at 80% 10%, rgba(236, 72, 153, .60), rgba(36, 22, 99, 0) 60%), linear-gradient(135deg, #3a1a6d 0%, #4b2391 50%, #201259 100%); } .hero__deck .hero-tab:nth-child(3) .hero-tab__thumb { background-image: radial-gradient(85% 70% at 50% 0%, rgba(34, 211, 238, .50), rgba(36, 22, 99, 0) 60%), linear-gradient(135deg, #172b6e 0%, #2d2390 55%, #181048 100%); } /* 번호 + 이름 */ .hero-tab__meta { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 10px 13px 10px 20px; } .hero-tab__num { font-family: var(--font-num, Montserrat), monospace; font-size: 9px; font-weight: 700; letter-spacing: .14em; } .hero__deck .hero-tab:nth-child(1) .hero-tab__num { color: #a78bfa; } .hero__deck .hero-tab:nth-child(2) .hero-tab__num { color: #f0abfc; } .hero__deck .hero-tab:nth-child(3) .hero-tab__num { color: #67e8f9; } .hero-tab__label { font-size: clamp(11px, 1.05vw, 13px); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: rgba(255, 255, 255, .6); transition: color .52s ease; } .hero-tab.is-active .hero-tab__label { color: #fff; } /* 1024 이하 — style.css 가 탭을 흐름 안으로 되돌리고 가로로 늘린다. 덱은 카드 폭이 고정이라야 부채가 되므로 폭만 다시 잡고, 자리는 그 흐름을 따른다. */ @media (max-width: 1024px) { .hero__deck { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; } .hero__deck .hero-tab { width: clamp(108px, 13vw, 140px); flex: 0 0 auto; height: auto; } } /* 더 좁아지면 부채를 접고 한 줄로 늘어놓는다 —— :nth-child 부채 규칙이 이기지 못하도록 같은 자리수로 짚어 준다. 예전에는 첫 장이 rotate(-9deg) 로 누워 있어 바깥곽이 넓어졌고, 360px 에서는 그 만큼 왼쪽으로 써 01 카드가 화면 밖으로 나갔다. */ @media (max-width: 720px) { .hero__deck { /* static 으로 두면 덱이 제 그림층을 못 가져, 판 2·3 에서 덮이는 검은 막(.hero__night, z-index 1) 아래로 z-index 0 인 첫 장이 깔린다. 자리는 그대로 두고 그림층만 되찾는다. */ position: relative; z-index: 5; transform: none; height: auto; flex-wrap: nowrap; gap: clamp(6px, 2.2vw, 10px); width: 100%; margin: 0 auto; padding: 0 clamp(8px, 3vw, 16px); box-sizing: border-box; } .hero__deck .hero-tab, .hero__deck .hero-tab:nth-child(1), .hero__deck .hero-tab:nth-child(2), .hero__deck .hero-tab:nth-child(3), .hero__deck .hero-tab.is-active { /* 부채를 접는다. none 대신 translateZ(0) 인 것은, 판을 바꿀 때 첫 장이 다시 안 그려지는 크롬 합성 문제를 피하려고 제 나름의 그림층을 갖게 하려는 것이다. */ transform: translateZ(0); } /* 세 장을 똑같이 나눠 갖는다 — 좌우로 넘치거나 줄바꿈하지 않는다 */ .hero__deck .hero-tab { flex: 1 1 0; width: auto; min-width: 0; max-width: 140px; } .hero__deck .hero-tab + .hero-tab { margin-left: 0; } .hero__deck .hero-tab__meta { justify-content: center; gap: clamp(4px, 1.5vw, 5px); padding: 9px clamp(4px, 2vw, 8px); } .hero__deck .hero-tab__label { overflow: hidden; font-size: clamp(9.5px, 2.9vw, 12px); text-overflow: ellipsis; } .hero__deck .hero-tab__num { font-size: 8px; letter-spacing: .08em; } } /* main.js 의 단추 글자 굴림 효과를 건너뛰게 하려고 넣어 둔 빈 표식. .btn-roll 이 display:inline-block 이라 hidden 만으로는 안 숨는다. */ .hero__deck .btn-roll { display: none; } /* ============================================================ 2. 배경 — 탭마다 색이 갈아 끼워진다 ------------------------------------------------------------ 히어로에는 이미 층이 여럿 있다. .hero__bg(0) → .hero__flow 셰이더 · .hero__night(1) → 본문(2) 그 사이에 색 층을 한 장 더 깔아, 아래 셰이더의 움직임은 살린 채 탭마다 화면 색만 바뀌게 한다. 시안의 배경 3장과 같은 색 배합이다. .hero[data-panel] 값만 보므로 JS 는 손대지 않았다. ============================================================ */ .hero__wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .85; transition: background-image .7s ease, transform 1.2s ease; transform: scale(1.04); background-image: radial-gradient(90% 70% at 20% 10%, rgba(124, 58, 237, .55), rgba(36, 22, 99, 0) 60%), radial-gradient(80% 80% at 85% 60%, rgba(56, 189, 248, .26), rgba(36, 22, 99, 0) 65%); } .hero[data-panel="2"] .hero__wash { background-image: radial-gradient(85% 70% at 80% 10%, rgba(236, 72, 153, .42), rgba(36, 22, 99, 0) 60%), radial-gradient(75% 75% at 15% 70%, rgba(99, 102, 241, .42), rgba(36, 22, 99, 0) 65%); } .hero[data-panel="3"] .hero__wash { background-image: radial-gradient(85% 70% at 50% 0%, rgba(34, 211, 238, .34), rgba(36, 22, 99, 0) 60%), radial-gradient(75% 75% at 90% 80%, rgba(139, 92, 246, .46), rgba(36, 22, 99, 0) 65%); } /* 아래쪽을 살짝 눌러 글자가 또렷하게 (시안의 hero-scrim) */ .hero__wash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(36, 22, 99, 0) 0%, rgba(27, 17, 71, .40) 70%, rgba(20, 12, 55, .62) 100%); } @media (prefers-reduced-motion: reduce) { .hero__wash { transition: none; transform: none; } } /* ============================================================ 3. 카피 — 시안 글자 크기·색 ============================================================ */ .hero:has(.hero__deck) .hero__lead { font-size: clamp(15px, 1.8vw, 24px); /* 시안 24 (예전 36) */ font-weight: 700; letter-spacing: -.02em; line-height: 1.5; color: #c7d2fe; } .hero:has(.hero__deck) .hero__title { margin: 16px 0 0; font-size: clamp(28px, 5.6vw, 68px); /* 시안 68 (예전 64) */ font-weight: 800; line-height: 1.16; letter-spacing: -.035em; color: #fff; text-wrap: pretty; text-shadow: 0 6px 34px rgba(16, 8, 48, .5); } /* ============================================================ 4. 지표 — 유리 바 ------------------------------------------------------------ 예전에는 높이를 280px 로 못 박고 회색 계열 그라데이션을 깔았다. 시안은 보랏빛 유리에 모서리를 크게 굴리고, 높이는 내용에 맡긴다. ============================================================ */ .hero:has(.hero__deck) .hero__stats { width: min(100%, 1180px); height: auto; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: rgba(23, 14, 60, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } .hero:has(.hero__deck) .hero__stats .stat { gap: 16px; padding: clamp(26px, 3.2vw, 44px) 18px; color: inherit; } /* 칸 사이 선 — 시안은 칸 높이를 다 쓰는 얇은 선이다 */ .hero:has(.hero__deck) .hero__stats .stat + .stat::before { top: 0; height: 100%; transform: none; background: rgba(255, 255, 255, .09); } .hero:has(.hero__deck) .hero__stats .stat__num { font-size: clamp(30px, 3.6vw, 54px); /* 시안 54 */ font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #67e8f9; } .hero:has(.hero__deck) .hero__stats .stat__num .unit { font-weight: 400; } .hero:has(.hero__deck) .hero__stats .stat__label { font-size: clamp(13px, 1.1vw, 16px); /* 시안 16 */ font-weight: 700; color: #dbeafe; } /* ============================================================ 5. 02·03 을 히어로 탭 안에 넣기 ------------------------------------------------------------ 시안은 두 내용을 아래로 흐르는 독립 섹션으로 뺐지만, 지금 구조를 지키기로 해서 히어로 2·3번 탭 안에 넣었다. · 섹션이 제 배경을 갖고 있었는데, 그것은 아래 .hero__wash 가 대신한다. · overflow:hidden 은 남겨 두되 상자를 탭 칸 전체로 키운다. 상자가 내용만큼만 크면 오로라가 그 네모에서 뚝 잘려 배경에 띠가 생긴다. ============================================================ */ .cert-sec--inhero, .pt-sec--inhero { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 clamp(20px, 3vw, 40px); background: none; } .cert-sec--inhero .cs-inner, .pt-sec--inhero .pt-inner { width: 100%; } /* 패널 높이에 맞춰 조금 눕힌다 */ .cert-sec--inhero .cs-inner { gap: clamp(28px, 3vw, 56px) 56px; } .cert-sec--inhero .cs-deck { height: clamp(320px, 34vw, 480px); } .pt-sec--inhero .pt-inner { gap: clamp(28px, 3vw, 64px) 56px; } /* ============================================================ 6. 탭마다 배경 — 시안의 섹션 배경을 그대로 ------------------------------------------------------------ 1번 탭은 지금 쓰던 셰이더를 그대로 살린다(덧칠만 한다). 2·3번 탭은 시안이 섹션에 깔아 두었던 짙은 보라를 그대로 덮는다. 그래야 그 위의 오로라·인증서 카드가 시안과 같은 색으로 읽힌다. ============================================================ */ .hero[data-panel="2"] .hero__wash { opacity: 1; transform: none; background-image: linear-gradient(180deg, #1c1250 0%, #241663 44%, #191046 100%); } .hero[data-panel="3"] .hero__wash { opacity: 1; transform: none; /* 03 탭 카드 썸네일과 같은 색배합 — 위쪽 청록 번짐 + 남보라 바탕 */ background-image: radial-gradient(85% 70% at 50% 0%, rgba(34, 211, 238, .28), rgba(23, 43, 110, 0) 62%), linear-gradient(135deg, #172b6e 0%, #2d2390 55%, #181048 100%); } /* 시안의 섹션 배경은 그늘이 따로 없다. 2·3번에서는 아래 그늘을 걷는다. */ .hero[data-panel="2"] .hero__wash::after, .hero[data-panel="3"] .hero__wash::after { opacity: 0; } /* ============================================================ 7. 히어로 세로 줄이기 ------------------------------------------------------------ style.css 는 980px 로 못박아 두었다. Scroll down 표시를 뺐고 화면 높이에 맞춰 알아서 줄게 한다. 낮은 노트북에서도 한 화면에 담긴다. ============================================================ */ .hero:has(.hero__deck) { height: min(760px, calc(100vh - var(--header-h, 100px))); min-height: 560px; } /* 탭이 위로 올라온 만큼 패널 내용도 조금 위에서 시작한다 */ .hero__deck { top: clamp(56px, 5.4vw, 84px); } /* ============================================================ 8. 낮아진 히어로에 맞추기 ------------------------------------------------------------ 탭 카드는 흐름 밖(absolute)이라 내용 위로 겹친다. 탭이 차지하는 높이만큼 위 여백을 주어 내용이 그 아래에서 시작하게 한다. ============================================================ */ .cert-sec--inhero, .pt-sec--inhero { padding-top: calc(clamp(56px, 5.4vw, 84px) + clamp(104px, 9vw, 130px) + 20px); padding-bottom: clamp(20px, 2.5vw, 40px); } /* 1번 탭(카피 + 지표)도 같은 만큼 내린다 */ .hero:has(.hero__deck) .hero-panel--1 { padding-top: calc(clamp(56px, 5.4vw, 84px) + clamp(104px, 9vw, 130px) + 20px); padding-bottom: clamp(20px, 2.5vw, 40px); gap: clamp(24px, 3.5vh, 48px); } /* 특허증 — 남는 높이에 맞춘다. 가로세로는 사진 비율(1100:1556)을 지킨다. */ .pt-sec--inhero .pt-card { max-width: calc(clamp(240px, 40vh, 430px) * 1100 / 1556); } .pt-sec--inhero .pt-figure { padding: 0; } .pt-sec--inhero .pt-halo { width: clamp(240px, 34vh, 380px); height: clamp(240px, 34vh, 380px); } /* 인증서 코버플로도 남는 높이에 맞춘다 */ .cert-sec--inhero .cs-deck { height: clamp(260px, 42vh, 430px); } /* ============================================================ 9. 03 탭 — 파란 계열로 통일 ------------------------------------------------------------ 시안의 03 섹션은 분홍·보라였는데, 이 탭의 카드 썸네일은 파랑이다. 탭을 눌렀을 때 카드 색과 화면 색이 따로 놀지 않게 효과를 전부 그 파란 계열(#172b6e · #2d2390 · 청록 #22d3ee)에서 뽑는다. 도장 빛만 금색 그대로 둔다 — 실제 특허증 직인 자리라 색을 바꾸면 어색하다. ============================================================ */ /* 오로라 — 분홍 → 청록 / 보라 → 남색 */ .pt-sec--inhero .pt-glow .g1 { background: radial-gradient(circle, rgba(34, 211, 238, .26), rgba(34, 211, 238, 0) 68%); } .pt-sec--inhero .pt-glow .g2 { background: radial-gradient(circle, rgba(59, 90, 237, .42), rgba(59, 90, 237, 0) 68%); } /* 특허증 뒤 빛무리 */ .pt-sec--inhero .pt-halo { background: conic-gradient(from 0deg, rgba(103, 232, 249, 0), rgba(103, 232, 249, .32), rgba(93, 132, 255, .34), rgba(103, 232, 249, 0)); } /* 문구 밑줄 */ .pt-sec--inhero .pt-line:nth-child(1) span { background: linear-gradient(90deg, #67e8f9, rgba(255, 255, 255, 0)); } .pt-sec--inhero .pt-line:nth-child(2) span { background: linear-gradient(90deg, #7ea6ff, rgba(255, 255, 255, 0)); } /* 단추 */ .pt-sec--inhero .pt-cta { background: linear-gradient(135deg, #a5f3fc, #93b4ff); box-shadow: 0 18px 40px rgba(103, 232, 249, .28); } .pt-sec--inhero .pt-cta:hover { box-shadow: 0 26px 52px rgba(103, 232, 249, .42); } /* ============================================================ 02 수상·인증 섹션 작업용 CSS — /main/main_section02.php 에서만 읽는다 ------------------------------------------------------------ 시안(버튼 레이아웃 및 글래스 디자인 / webvista-main.html)의 「02 AWARDS & CERTIFICATES — 3D 코버플로」 블록을 그대로 옮겼다. 공통 파일을 지금 못 고치므로 여기에만 둔다. 합칠 때는 이 내용을 style.css(또는 main-fx.css)로 옮기고 이 파일을 지운다. ============================================================ */ /* ========================================================= 02 AWARDS & CERTIFICATES — 3D 코버플로 ========================================================= */ /* ===== SECTION ===== */ .cert-sec { position: relative; overflow: hidden; padding: 96px 40px 104px; background: linear-gradient(180deg, #1c1250 0%, #241663 44%, #191046 100%); } .cs-glow { position: absolute; inset: -12% -6%; pointer-events: none; } .cs-glow i { position: absolute; display: block; border-radius: 50%; } .cs-glow .g1 { left: -6%; top: -8%; width: 58%; height: 78%; filter: blur(60px); background: radial-gradient(circle, rgba(124,58,237,.5), rgba(124,58,237,0) 68%); animation: auroraA 17s ease-in-out infinite; } .cs-glow .g2 { right: -8%; bottom: -14%; width: 62%; height: 82%; filter: blur(70px); background: radial-gradient(circle, rgba(34,211,238,.3), rgba(34,211,238,0) 68%); animation: auroraB 21s ease-in-out infinite; } .cs-grain { position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 3px 3px; } /* 떠오르는 파티클 */ .cs-sparks { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none; } .cs-sparks span { position: absolute; bottom: 0; border-radius: 999px; animation: floatUp linear infinite; } .cs-inner { position: relative; z-index: 2; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 60px 56px; align-items: center; } .cs-lines { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; } .cs-line { display: flex; align-items: flex-start; animation: riseIn 820ms cubic-bezier(.2,1,.3,1) both; } .cs-line:nth-child(1) { animation-delay: 120ms; } .cs-line:nth-child(2) { animation-delay: 260ms; } .cs-line:nth-child(3) { animation-delay: 400ms; } .cs-num { margin-top: 15px; flex-shrink: 0; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .18em; } .cs-line > div { min-width: 0; } .cs-text { font-size: clamp(26px, 2.9vw, 39px); line-height: 1.26; font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: pretty; } .cs-rule { display: block; margin-top: 11px; height: 2px; border-radius: 2px; transform-origin: left; animation: drawRule 900ms cubic-bezier(.2,1,.3,1) both; } .cs-line:nth-child(1) .cs-num { color: #a78bfa; } .cs-line:nth-child(2) .cs-num { color: #f0abfc; } .cs-line:nth-child(3) .cs-num { color: #67e8f9; } .cs-line:nth-child(1) .cs-rule { width: 64px; animation-delay: 120ms; background: linear-gradient(90deg, #a78bfa, rgba(255,255,255,0)); } .cs-line:nth-child(2) .cs-rule { width: 92px; animation-delay: 260ms; background: linear-gradient(90deg, #f0abfc, rgba(255,255,255,0)); } .cs-line:nth-child(3) .cs-rule { width: 78px; animation-delay: 400ms; background: linear-gradient(90deg, #67e8f9, rgba(255,255,255,0)); } .cs-foot { margin-top: 42px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; animation: riseIn 900ms cubic-bezier(.2,1,.3,1) 620ms both; } .cs-count { display: flex; align-items: baseline; gap: 8px; } .cs-count strong { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: transparent; background-image: linear-gradient(90deg, #c4b5fd, #67e8f9, #c4b5fd); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: shimmerText 4.5s linear infinite; } .cs-count span { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.62); } .cs-div { width: 1px; height: 28px; background: rgba(255,255,255,.2); } .cs-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; color: #140a38; background: linear-gradient(135deg, #e9d5ff, #a5f3fc); box-shadow: 0 14px 34px rgba(103,232,249,.26); transition: transform 300ms ease, box-shadow 300ms ease; } .cs-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(103,232,249,.4); } .cs-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); animation: sheen 3.6s ease-in-out infinite; } .cs-cta span { position: relative; } /* ===== 우: 3D 코버플로 ===== */ .cs-deck { position: relative; min-width: 0; height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; } .cs-halo { position: absolute; top: 50%; left: 50%; width: 460px; height: 460px; margin: -250px 0 0 -230px; border-radius: 50%; pointer-events: none; filter: blur(40px); background: conic-gradient(from 0deg, rgba(167,139,250,0), rgba(167,139,250,.35), rgba(103,232,249,.3), rgba(167,139,250,0)); animation: haloSpin 24s linear infinite; } .cs-stage { position: relative; isolation: isolate; width: 100%; height: 350px; overflow: hidden; perspective: 1500px; perspective-origin: 50% 46%; } .cs-card { position: absolute; top: 50%; left: 50%; width: 200px; height: 286px; margin: -143px 0 0 -100px; transform-origin: 50% 50%; transition: transform 820ms cubic-bezier(.22,1,.28,1), opacity 620ms ease; } .cs-card > .body { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.4); transition: box-shadow 820ms ease; } .cs-card .pic { width: 100%; height: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat; } .cs-card .gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 42%); } .cs-card .dim { position: absolute; inset: 0; pointer-events: none; background: rgba(13,7,36,.42); transition: background 820ms ease; } .cs-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(180deg, rgba(13,7,36,0), rgba(13,7,36,.88)); font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; color: #fff; text-align: center; opacity: 0; transition: opacity 620ms ease; pointer-events: none; } .cs-card .reflect { position: absolute; left: 0; right: 0; top: 100%; height: 28px; margin-top: 2px; border-radius: 10px; filter: blur(1px); pointer-events: none; opacity: 0; background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); transform: scaleY(-1); transition: opacity 820ms ease; } .cs-card.is-active .dim { background: rgba(13,7,36,0); } .cs-card.is-active .cap { opacity: 1; } .cs-card.is-active .reflect { opacity: .28; } .cs-ui { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; } .cs-meter { display: flex; align-items: center; gap: 12px; } .cs-idx { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.85); white-space: nowrap; } .cs-bar { width: 120px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; } .cs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a78bfa, #67e8f9); transition: width 820ms cubic-bezier(.22,1,.28,1); } .cs-nav { display: flex; align-items: center; gap: 10px; } .cs-nav a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; font-size: 15px; text-decoration: none; backdrop-filter: blur(10px); transition: background 260ms ease, transform 260ms ease; } .cs-nav a:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .cs-glow i, .cs-sparks span, .cs-halo, .cs-cta::after, .cs-count strong { animation: none !important; } } @keyframes auroraA { 0%,100% { transform: translate3d(-6%,-4%,0) scale(1); } 50% { transform: translate3d(8%,6%,0) scale(1.18); } } @keyframes auroraB { 0%,100% { transform: translate3d(6%,5%,0) scale(1.1); } 50% { transform: translate3d(-8%,-6%,0) scale(1); } } @keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes ringPulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes floatUp { 0% { transform: translateY(24px) scale(.5); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-200px) scale(1.1); opacity: 0; } } @keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes shimmerText { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 60%,100% { transform: translateX(260%) skewX(-18deg); } } @keyframes haloSpin { to { transform: rotate(360deg); } } /* ============================================================ 03 특허·전시 섹션 작업용 CSS — /main/main_section03.php 에서만 읽는다 ------------------------------------------------------------ 시안의 「03 PATENT & EXHIBITION」 블록을 그대로 옮겼다. 합칠 때는 이 내용을 style.css(또는 main-fx.css)로 옮기고 이 파일을 지운다. ============================================================ */ /* ===== SECTION 03 — 특허 / 전시 ===== */ .pt-sec { position: relative; overflow: hidden; padding: 100px 40px 108px; background: linear-gradient(180deg, #191046 0%, #221459 46%, #1b1150 100%); } .pt-glow { position: absolute; inset: -12% -6%; pointer-events: none; } .pt-glow i { position: absolute; display: block; border-radius: 50%; } .pt-glow .g1 { right: -4%; top: -10%; width: 56%; height: 80%; filter: blur(66px); background: radial-gradient(circle, rgba(236,72,153,.28), rgba(236,72,153,0) 68%); animation: auroraC 19s ease-in-out infinite; } .pt-glow .g2 { left: -8%; bottom: -16%; width: 62%; height: 84%; filter: blur(72px); background: radial-gradient(circle, rgba(124,58,237,.42), rgba(124,58,237,0) 68%); animation: auroraD 23s ease-in-out infinite; } .pt-grain { position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 3px 3px; } .pt-inner { position: relative; z-index: 2; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 64px 60px; align-items: center; } .pt-figure { position: relative; min-width: 0; display: flex; justify-content: center; align-items: center; padding: 26px 0; } .pt-halo { position: absolute; width: 440px; height: 440px; border-radius: 50%; filter: blur(46px); pointer-events: none; animation: orbit 26s linear infinite; background: conic-gradient(from 0deg, rgba(240,171,252,0), rgba(240,171,252,.3), rgba(167,139,250,.34), rgba(240,171,252,0)); } .pt-card { position: relative; width: 100%; max-width: 380px; transform-style: preserve-3d; animation: cardFloat 9s ease-in-out infinite; } .pt-card > .paper { position: relative; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 46px 90px rgba(6,2,26,.66), 0 6px 18px rgba(6,2,26,.4); } .pt-card .pic { width: 100%; aspect-ratio: 1100 / 1556; background-size: cover; background-position: top center; background-image: url(certs/patent.jpg); } .pt-card .spec { position: absolute; top: 0; left: 0; width: 70%; height: 70%; pointer-events: none; filter: blur(12px); animation: specular 7.5s ease-in-out infinite; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,0) 90%); } .pt-card .gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(200deg, rgba(255,255,255,.22), rgba(255,255,255,0) 46%); } .pt-seal { position: absolute; right: 12%; top: 11%; width: 128px; height: 128px; border-radius: 50%; pointer-events: none; filter: blur(16px); animation: sealGlow 3.8s ease-in-out infinite; background: radial-gradient(circle, rgba(212,175,55,.75), rgba(212,175,55,0) 70%); } .pt-copy { min-width: 0; } .pt-lines { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; } .pt-line { animation: riseIn 820ms cubic-bezier(.2,1,.3,1) both; } .pt-line:nth-child(1) { animation-delay: 140ms; } .pt-line:nth-child(2) { animation-delay: 300ms; } .pt-line p { margin: 0; font-size: clamp(27px, 3vw, 40px); line-height: 1.26; font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: balance; } .pt-line span { display: block; margin-top: 12px; height: 2px; border-radius: 2px; transform-origin: left; animation: drawRule 900ms cubic-bezier(.2,1,.3,1) both; } .pt-line:nth-child(1) span { width: 88px; animation-delay: 140ms; background: linear-gradient(90deg, #f0abfc, rgba(255,255,255,0)); } .pt-line:nth-child(2) span { width: 118px; animation-delay: 300ms; background: linear-gradient(90deg, #67e8f9, rgba(255,255,255,0)); } .pt-cta { position: relative; overflow: hidden; margin-top: 44px; display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #170b3d; background: linear-gradient(135deg, #f5d0fe, #a5f3fc); box-shadow: 0 18px 40px rgba(240,171,252,.28); animation: riseIn 900ms cubic-bezier(.2,1,.3,1) 460ms both; transition: transform 300ms ease, box-shadow 300ms ease; } .pt-cta:hover { transform: translateY(-3px); box-shadow: 0 26px 52px rgba(240,171,252,.42); } .pt-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); animation: sheen 3.6s ease-in-out infinite; } .pt-cta span { position: relative; } @keyframes auroraC { 0%,100% { transform: translate3d(5%,-4%,0) scale(1.05); } 50% { transform: translate3d(-7%,6%,0) scale(1.2); } } @keyframes auroraD { 0%,100% { transform: translate3d(-5%,5%,0) scale(1.12); } 50% { transform: translate3d(7%,-6%,0) scale(1); } } @keyframes cardFloat { 0%,100% { transform: perspective(1500px) rotateY(-13deg) rotateX(3deg) translateY(0); } 50% { transform: perspective(1500px) rotateY(-10deg) rotateX(2deg) translateY(-14px); } } @keyframes specular { 0% { transform: translate(-60%,-60%) rotate(18deg); opacity: 0; } 18% { opacity: .85; } 55%,100% { transform: translate(120%,120%) rotate(18deg); opacity: 0; } } @keyframes sealGlow { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .8; transform: scale(1.12); } } @keyframes orbit { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pt-glow i, .pt-halo, .pt-card, .pt-card .spec, .pt-seal, .pt-cta::after { animation: none !important; } } @keyframes auroraA { 0%,100% { transform: translate3d(-6%,-4%,0) scale(1); } 50% { transform: translate3d(8%,6%,0) scale(1.18); } } @keyframes auroraB { 0%,100% { transform: translate3d(6%,5%,0) scale(1.1); } 50% { transform: translate3d(-8%,-6%,0) scale(1); } } @keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes ringPulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes floatUp { 0% { transform: translateY(24px) scale(.5); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-200px) scale(1.1); opacity: 0; } } @keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes shimmerText { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 60%,100% { transform: translateX(260%) skewX(-18deg); } } @keyframes haloSpin { to { transform: rotate(360deg); } } /* ============================================================ 히어로 다듬기 — 세 탭 손보기 (2026-09-18) ------------------------------------------------------------ · 1번 : 카피를 탭 가까이 올리고, 지표는 바닥에 붙인다 · 2번 : 내용을 올리고, 왼쪽 글자를 키우고, 밑줄을 빛나게, 상장을 키운다 · 3번 : 특허증을 키우고, 오른쪽 글자를 키워 위로 올린다 앞의 값들을 지우지 않고 뒤에서 덮어쓴다 — 뭘 바꿨는지 한눈에 보이게. ============================================================ */ /* ---------- 탭 카드 아래로 내용 붙이기 ---------- */ /* 탭 카드는 흐름 밖(absolute)이라 내용 위로 겹친다. 예전에는 카드가 차지하는 높이를 CSS 에 그대로 옮겨 적어 여백을 줬는데, 카드 크기 규칙이 바뀌면 그 셈이 어긋나 글자를 덮었다. 이제 JS(main-fx.js)가 실제로 잰 값을 --deck-bottom 으로 넘겨 준다. 괄호 안 값은 JS 가 없을 때의 대비책. */ .hero:has(.hero__deck) .hero-panel--1 { /* 카피는 탭 바로 밑, 지표 바는 바닥 — 가운데 몰아 두지 않는다 */ justify-content: space-between; padding-top: calc(var(--deck-bottom, 214px) + 22px); } .cert-sec--inhero, .pt-sec--inhero { align-items: flex-start; padding-top: calc(var(--deck-bottom, 214px) + 14px); } /* ============================================================ 2번 탭 — 수상·인증 ============================================================ */ /* 왼쪽 글자 5 단계 크게 (39 → 46.5). 최소·vw 도 같은 비율로 올린다. */ .cert-sec--inhero .cs-text { font-size: clamp(31px, 3.46vw, 46.5px); } /* 글줄 밑 빛 라인 — 그어진 뒤 은은히 숨 쉬게 한다. drop-shadow 는 currentColor 를 따르므로 줄마다 색을 물려 준다. */ .cert-sec--inhero .cs-rule { height: 3px; animation: drawRule 900ms cubic-bezier(.2, 1, .3, 1) both, ruleGlow 2.6s ease-in-out infinite; } .cert-sec--inhero .cs-line:nth-child(1) .cs-rule { color: #a78bfa; animation-delay: 120ms, 0s; } .cert-sec--inhero .cs-line:nth-child(2) .cs-rule { color: #f0abfc; animation-delay: 260ms, .45s; } .cert-sec--inhero .cs-line:nth-child(3) .cs-rule { color: #67e8f9; animation-delay: 400ms, .9s; } @keyframes ruleGlow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 4px currentColor); } 50% { filter: brightness(1.5) drop-shadow(0 0 15px currentColor); } } /* 상장 키우기 — 높이는 내용에 맡기고 무대(stage)로 크기를 정한다 */ .cert-sec--inhero .cs-deck { height: auto; gap: 18px; } .cert-sec--inhero .cs-stage { height: clamp(300px, 44vh, 424px); --cw: clamp(186px, 14.6vw, 234px); /* 카드 가로 */ --ch: calc(var(--cw) * 1.43); /* 상장 비율 그대로 */ cursor: grab; touch-action: pan-y; /* 세로 스크롤은 그대로 */ } .cert-sec--inhero .cs-stage.is-drag { cursor: grabbing; } .cert-sec--inhero .cs-card { width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); } .cert-sec--inhero .cs-halo { width: clamp(360px, 31vw, 500px); height: clamp(360px, 31vw, 500px); margin: calc(clamp(360px, 31vw, 500px) / -2 - 20px) 0 0 calc(clamp(360px, 31vw, 500px) / -2); } /* ============================================================ 3번 탭 — 특허·전시 ============================================================ */ /* 특허증 키우기. 가로세로는 사진 비율(1100:1556)을 지킨다. */ .pt-sec--inhero .pt-card { max-width: calc(clamp(300px, 52vh, 480px) * 1100 / 1556); } .pt-sec--inhero .pt-halo { width: clamp(300px, 42vh, 430px); height: clamp(300px, 42vh, 430px); } /* 오른쪽 글자 5 단계 크게 (40 → 47.5) */ .pt-sec--inhero .pt-line p { font-size: clamp(32px, 3.56vw, 47.5px); } /* 특허증이 훨씬 커져서 가운데 맞춤으로는 글이 내려앉는다. 위에서 시작하게 한다. */ .pt-sec--inhero .pt-inner { align-items: start; } .pt-sec--inhero .pt-lines { margin-top: 26px; gap: 18px; } .pt-sec--inhero .pt-cta { margin-top: clamp(26px, 3.4vh, 44px); } /* 좁은 화면에서는 한 줄로 내려오므로 위 맞춤을 되돌린다 */ @media (max-width: 719px) { .pt-sec--inhero .pt-inner { align-items: center; } } /* ---------- 화면 폭에 따라 크기 다시 ---------- .cs-inner · .pt-inner 는 330px 이하가 되면 한 줄로 내려앉는다(auto-fit). 두 칸으로 나란히 설 때와 위아래로 쌓일 때는 쓸 수 있는 높이가 전혀 달라서, 상장·특허증 크기를 그 경계에서 갈라 준다. 안 그러면 히어로 밑으로 흘러넘친다. */ /* 넉넉한 화면 — 남는 아래 여백까지 끌어 쓴다 */ @media (min-width: 1200px) { .cert-sec--inhero .cs-stage { height: clamp(300px, 48vh, 460px); --cw: clamp(200px, 15.4vw, 250px); } .pt-sec--inhero .pt-card { max-width: calc(clamp(320px, 57vh, 530px) * 1100 / 1556); } .pt-sec--inhero .pt-halo { width: clamp(320px, 46vh, 470px); height: clamp(320px, 46vh, 470px); } } /* 태블릿 아래 — 한 줄로 쌓이므로 확 줄인다 */ @media (max-width: 1199px) { .cert-sec--inhero .cs-text { font-size: clamp(23px, 2.9vw, 33px); } .cert-sec--inhero .cs-lines { margin-top: 24px; gap: 14px; } .cert-sec--inhero .cs-foot { margin-top: 26px; } .cert-sec--inhero .cs-stage { height: clamp(224px, 31vh, 300px); --cw: clamp(148px, 17vw, 188px); } .cert-sec--inhero .cs-halo { width: clamp(250px, 30vw, 330px); height: clamp(250px, 30vw, 330px); margin: calc(clamp(250px, 30vw, 330px) / -2 - 16px) 0 0 calc(clamp(250px, 30vw, 330px) / -2); } .pt-sec--inhero .pt-line p { font-size: clamp(23px, 3vw, 33px); } .pt-sec--inhero .pt-lines { margin-top: 20px; gap: 14px; } .pt-sec--inhero .pt-cta { margin-top: 22px; } .pt-sec--inhero .pt-card { max-width: calc(clamp(210px, 29vh, 290px) * 1100 / 1556); } .pt-sec--inhero .pt-halo { width: clamp(210px, 27vh, 280px); height: clamp(210px, 27vh, 280px); } } /* ---------- 좁은 화면에서 두 칸이 안 접히던 것 ---------- .cs-inner · .pt-inner 는 repeat(auto-fit, minmax(330px, 1fr)) 이라 폭이 모자라면 한 칸으로 접혀야 한다. 그런데 이 상자가 flex 자식이 되면서 min-width:auto 가 "두 칸(330×2)" 을 최소 폭으로 붙들어, 접히지 않고 화면 밖으로 삐져나갔다. 휴대폰에서 왼쪽 글자와 오른쪽 상장이 양쪽으로 잘려 나가던 원인이다. */ .cert-sec--inhero .cs-inner, .pt-sec--inhero .pt-inner { min-width: 0; } /* 한 칸으로 접히는 폭 — 위아래로 쌓이니 다시 한 번 줄인다 */ @media (max-width: 820px) { .cert-sec--inhero .cs-inner, .pt-sec--inhero .pt-inner { grid-template-columns: minmax(0, 1fr); gap: 22px; } .cert-sec--inhero .cs-text { font-size: clamp(19px, 5vw, 24px); } .cert-sec--inhero .cs-lines { margin-top: 16px; gap: 11px; } .cert-sec--inhero .cs-foot { margin-top: 16px; gap: 14px; } .cert-sec--inhero .cs-deck { gap: 12px; } .cert-sec--inhero .cs-stage { height: clamp(176px, 25vh, 210px); --cw: clamp(116px, 31vw, 140px); } .cert-sec--inhero .cs-halo { width: 240px; height: 240px; margin: -140px 0 0 -120px; } .pt-sec--inhero .pt-inner { align-items: center; } .pt-sec--inhero .pt-line p { font-size: clamp(19px, 5vw, 24px); } .pt-sec--inhero .pt-lines { margin-top: 16px; gap: 11px; } .pt-sec--inhero .pt-cta { margin-top: 16px; } .pt-sec--inhero .pt-card { max-width: calc(clamp(176px, 25vh, 220px) * 1100 / 1556); } .pt-sec--inhero .pt-halo { width: 200px; height: 200px; } } /* ---------- 좌우·아래 여백 되찾기 ---------- 02·03 은 원래 따로 선 섹션이라 제 여백(위아래 104px)을 갖고 있고, 그 값이 좁은 화면용 미디어 쿼리에 다시 한 번 적혀 있다. 그 쿼리가 파일에서 더 뒤에 있어 같은 힘(클래스 하나)끼리는 나중 것이 이겨, 탭 안에서 쓰려고 줄여 둔 아래 여백이 104px 로 되돌아가 있었다. 휴대폰·태블릿에서 내용이 히어로 밑으로 흘러넘치던 진짜 원인이다. 파일 맨 뒤에서 다시 못 박는다. */ .cert-sec--inhero, .pt-sec--inhero { padding-right: clamp(18px, 3vw, 40px); padding-bottom: clamp(16px, 2vw, 34px); padding-left: clamp(18px, 3vw, 40px); padding-top: calc(var(--deck-bottom, 214px) + 10px); } /* 한 칸으로 쌓이는 폭 — 높이가 빠듯하니 한 번 더 줄인다 */ @media (max-width: 820px) { .cert-sec--inhero .cs-text { font-size: clamp(18px, 4.6vw, 22px); } .cert-sec--inhero .cs-stage { height: clamp(150px, 18vh, 182px); --cw: clamp(104px, 27vw, 126px); } .cert-sec--inhero .cs-halo { width: 210px; height: 210px; margin: -125px 0 0 -105px; } .pt-sec--inhero .pt-line p { font-size: clamp(18px, 4.6vw, 22px); } .pt-sec--inhero .pt-card { max-width: calc(clamp(160px, 22vh, 210px) * 1100 / 1556); } } /* ---------- 1024 이하 — 히어로를 흐름에 되돌린다 ---------- 1024 아래에서는 탭 카드가 흐름 안으로 돌아온다(위쪽 @media). 그런데 패널은 여전히 흐름 밖(absolute)이라, 탭 카드가 차지한 높이만큼 위 여백을 주고 남은 자리에 내용을 우겨넣어야 했다. 높이가 760px 로 묶여 있으니 02 탭처럼 내용이 긴 화면은 히어로 밖으로 밀려 잘렸다(히어로가 overflow:hidden 이다). 탭은 한 번에 하나만 보이므로(나머지는 hidden) 패널을 흐름 안에 두어도 겹칠 일이 없다. 흐름에 되돌리고 높이를 내용에 맡긴다. 잘리는 일이 없어지고 위 여백 셈도 필요 없어진다. */ @media (max-width: 1024px) { .hero:has(.hero__deck) { height: auto; min-height: min(680px, calc(100vh - var(--header-h, 100px))); padding-bottom: clamp(28px, 5vw, 52px); } .hero:has(.hero__deck) .hero-panel { /* static 으로 두면 z-index 가 안 먹어 배경(.hero__wash)이 글자를 덮는다 */ position: relative; inset: auto; z-index: 2; padding-top: clamp(18px, 3.5vw, 32px); } .cert-sec--inhero, .pt-sec--inhero { position: relative; inset: auto; z-index: 2; padding-top: 0; padding-bottom: 0; } /* 흐름 안이라 높이가 내용대로 늘어난다 — 억지로 줄여 두었던 값을 푼다 */ .cert-sec--inhero .cs-stage { height: clamp(210px, 30vw, 300px); --cw: clamp(140px, 20vw, 190px); } .pt-sec--inhero .pt-card { max-width: clamp(210px, 30vw, 300px); } } @media (max-width: 820px) { .cert-sec--inhero .cs-text { font-size: clamp(21px, 5vw, 26px); } .pt-sec--inhero .pt-line p { font-size: clamp(21px, 5vw, 26px); } .cert-sec--inhero .cs-stage { height: clamp(210px, 46vw, 280px); --cw: clamp(140px, 30vw, 180px); } .pt-sec--inhero .pt-card { max-width: clamp(200px, 44vw, 280px); } .cert-sec--inhero .cs-halo { width: 260px; height: 260px; margin: -150px 0 0 -130px; } } /* 1024 이하에서 덱이 흐름 안으로 돌아오면, 상자 높이(clamp 104~130)보다 카드가 더 큰 경우가 생긴다. 게다가 카드는 ±9도로 기울어 있어 상자 밑으로 조금 삐져나온다. 흐름 안에서는 그 삐져나온 만큼이 바로 아랫 내용을 덮으므로, 높이를 내용에 맡기고 기운 만큼만 아래 여백으로 받아 둔다. */ @media (max-width: 1024px) { .hero__deck { height: auto; padding-bottom: 28px; } } /* ---------- 02·03 섹션의 제 배경 걷어내기 ---------- .cert-sec / .pt-sec 는 원래 따로 선 섹션이라 제 배경과 overflow:hidden 을 갖고 있다. 탭 안에 넣으면서 background:none 으로 껐지만, 그 원래 규칙이 파일에서 더 뒤에 있어 힘이 같은 클래스끼리는 나중 것이 이겼다(다시 켜졌다). 게다가 이 상자는 flex 자식이라 내용만큼만 넓어져서, 화면 한가운데에 1132px 짜리 배경 네모가 깔리고 그 밖은 잘려 나갔다 — 배경이 네모로 짤려 보이던 원인. 배경은 히어로의 .hero__wash 가 온 화면에 깔아 주므로 여기서는 완전히 끈다. */ .cert-sec--inhero, .pt-sec--inhero { width: 100%; max-width: none; background: none; overflow: visible; } /* ============================================================ 02 탭 — 글 묶음 위로 · 배경에 빛줄기 ============================================================ */ /* 왼쪽 글 묶음만 위로 올린다(오른쪽 상장은 가운데 그대로). 3줄이 상장 윗선에서 같이 시작하고, 아래 '52건 · 인증 전체 보기' 는 넉넉한 여백을 두고 따라온다. */ .cert-sec--inhero .cs-inner > *:first-child { align-self: start; } .cert-sec--inhero .cs-lines { margin-top: 0; } .cert-sec--inhero .cs-foot { margin-top: clamp(34px, 7vh, 78px); } /* 배경 빛 — 01(셰이더 얼룩) · 03(청록 번짐 + 도는 빛무리) 과 겹치지 않게 여기는 비스듬히 내리는 '빛줄기(god ray)' 로 간다. 천천히 좌우로 흐르고 숨 쉬듯 밝기가 오르내린다. */ .hero[data-panel="2"] .hero__night::before { content: ""; position: absolute; inset: -30% -40%; pointer-events: none; z-index: 1; background: repeating-linear-gradient(104deg, rgba(196, 181, 253, 0) 0px, rgba(196, 181, 253, 0) 72px, rgba(167, 139, 250, .15) 104px, rgba(233, 213, 255, .40) 134px, rgba(196, 181, 253, .13) 170px, rgba(196, 181, 253, 0) 214px, rgba(196, 181, 253, 0) 248px, rgba(103, 232, 249, .20) 276px, rgba(196, 181, 253, 0) 318px); filter: blur(11px); mix-blend-mode: screen; /* 글자 있는 아래쪽으로 갈수록 옅어지게 — 읽기를 방해하지 않는다 */ -webkit-mask-image: linear-gradient(170deg, #000 0%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.18) 100%); mask-image: linear-gradient(170deg, #000 0%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.18) 100%); animation: csBeams 19s ease-in-out infinite; } @keyframes csBeams { 0%, 100% { transform: translateX(-7%) skewX(0deg); opacity: .7; } 50% { transform: translateX(7%) skewX(-2.5deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero[data-panel="2"] .hero__night::before { animation: none; opacity: .7; } } /* ============================================================ 03 탭 — 줄 간격 벌리고, 단추를 특허증 아랫선에 맞추기 ============================================================ */ .pt-sec--inhero .pt-lines { gap: clamp(26px, 4.2vh, 46px); } .pt-sec--inhero .pt-line p { line-height: 1.38; } .pt-sec--inhero .pt-line span { margin-top: 17px; } /* 글 칸을 특허증 높이만큼 늘리고 단추를 맨 아래로 밀면, 단추 밑선이 특허증 밑선과 맞는다. */ .pt-sec--inhero .pt-copy { align-self: stretch; display: flex; flex-direction: column; } .pt-sec--inhero .pt-cta { margin-top: auto; align-self: flex-start; } /* 한 줄로 쌓이는 폭에서는 늘릴 높이가 없다 — 원래대로 */ @media (max-width: 820px) { .pt-sec--inhero .pt-lines { gap: 12px; } .pt-sec--inhero .pt-copy { display: block; } .pt-sec--inhero .pt-cta { margin-top: 16px; } } /* 01 탭 — 카피(리드 + 제목)를 100px 내린다 */ .hero:has(.hero__deck) .hero-panel--1 .hero__copy { margin-top: 100px; } /* ============================================================ Why 카드 — 색 구분과 오버 효과 ------------------------------------------------------------ main.php 안에