@charset "UTF-8"; /* * Fonts are now loaded via Google Fonts in the HTML head section * - Noto Sans KR: 400, 500, 600, 700, 800 * - Manrope: 400, 500, 600, 700, 800 */ /* CSS Variables */ :root { --change-lang-ko: 'Noto Sans KR', sans-serif; --margin-auto: 0 auto; /* --max-inner-width: min(116.60rem, 60.73vw); */ --max-inner-width: min(116.60rem, 60.73vw); --mid-inner-width: 80vw; --default-padding: min(10.00rem, 5.21vw) 0; --max-inner-width-m: 100%; --default-padding-m: max(4.50rem, 12.00vw) 0; } /* Base Styles */ svg { max-width: 100%; max-height: 100%; } img, picture { width: 100%; } html, body { width: 100%; height: 100%; /* overflow: hidden; */ } html { font-size: 10px; font-family: var(--change-lang-ko); scroll-behavior: smooth; background-color: var(--ir-color-black); color: var(--ir-color-white); letter-spacing: -0.02em; text-rendering: optimizeLegibility; } /* 키 비주얼 게이트(단계 0~1) 동안 스크롤바를 없애 마우스 드래그로 게이트를 건너뛰지 못하게 한다 (휠·터치·키는 script.js 가 가로챔). blade 가 에 붙여 첫 화면부터 적용되고, script.js initVisualReveal 이 마지막 단계에 도달하면 제거해 그때 스크롤바가 생긴다 */ html.visual-gate { overflow: hidden; } html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; position: fixed; width: 100%; } .m-only { display: none !important; } .pc-only { display: block; } .is-br { display: block; } /* Skip Navigation */ #skip_nav { position: fixed; top: -6rem; width: 100%; line-height: 4rem; font-size: 1.6rem; text-align: center; color: var(--ir-color-white); background: var(--ir-color-black); transition: top 0.3s; z-index: 9999; } #skip_nav:focus, #skip_nav:active { top: 0; } /* Main Container */ #change_container { position: relative; width: 100%; height: 100%; /* height: 100vh; height: 100dvh; */ } /* Header */ #header { position: fixed; top: 0; left: 0; width: 100%; padding: min(3.70rem, 1.93vw) min(4.00rem, 2.08vw); z-index: 100; background-color: transparent; transition: background-color .3s, top .6s; } #header.bg-black { background-color: var(--ir-color-black); } #header .header-menu { /* display: none; */ display: flex; font-family: var(--lang-en); font-variation-settings: 'wght' 800; font-size: min(2.00rem, 1.04vw); line-height: 120%; flex-direction: row; gap: min(6.00rem, 3.13vw); } /* #header .header-menu.show { display: flex; } */ #header .header-inner { display: flex; align-items: center; justify-content: space-between; color: var(--change-white); } #header .logo { width: min(15.00rem, 7.81vw); } #header.bg { background-color: var(--change-dark); } #header.bg .header-menu { display: flex; } #header.scroll-down { top: -100rem; } /* main */ .section-inner, .footer-inner { width: var(--max-inner-width); margin: var(--margin-auto); padding: var(--default-padding); box-sizing: border-box; } .footer-inner { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; } .section-title { font-size: min(4.60rem, 2.40vw); font-weight: 700; line-height: 120%; margin-bottom: min(8.00rem, 4.17vw); letter-spacing: -0.02em; text-align: left; } .content-area { width: 100%; } /* Visual */ #visual { width: 100%; /* aspect-ratio: 1920/1080; */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; } /* 키 비주얼(캔버스 + 오버레이 문구)을 화면에 고정 → 비주얼 섹션을 지나도 이후 섹션 뒤에 배경처럼 남음. #visual 자체는 100vh 스페이서 역할만 하고, 이후 섹션/푸터는 z-index 1 로 그 위에 스크롤된다. 게이트 구간(단계 0~1)은 html.visual-gate 로 스크롤바를 없애 드래그로 건너뛰지 못하게 한다 (script.js initVisualReveal) */ #visual .visual-inner { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 0; } #main > .section:not(#visual):not(#registration), #footer { position: relative; z-index: 1; } #visual .visual-text-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; padding: 0 min(4.00rem, 2.08vw); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--ir-color-white); pointer-events: none; /* 타이틀 + 하단 정보를 같은 비율로 화면 중앙보다 위쪽에 배치 */ transform: translateY(-5vh); } #visual .visual-title { display: flex; flex-direction: column; align-items: center; } #visual .visual-title-en { display: block; /* key_visual.svg (612x100) : 시안 기준 폭 약 612px @1920 */ width: min(61.20rem, 31.88vw); } #visual .visual-title-en img { display: block; width: 100%; height: auto; } #visual .visual-title-ko { display: block; white-space: nowrap; margin-top: min(3.60rem, 1.88vw); font-weight: 400; font-size: min(4.40rem, 2.29vw); line-height: var(--lh-100); /* 자간을 넓게 벌리고, 마지막 글자 뒤 여백만큼 당겨 중앙 정렬 보정 (단어 사이 공백 없이 span 으로 나눠 모든 글자 간격 동일) */ letter-spacing: 0.9em; margin-right: -0.9em; } #visual .visual-title-ko span { display: inline-block; /* 글자별 인트로(visual.css)에서 transform 을 쓸 수 있도록 (inline 은 transform 불가). 현재 인트로는 CHANGE 타이틀 블러만 */ } #visual .visual-description { position: absolute; left: 0; bottom: 21%; width: 100%; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: min(2.00rem, 1.04vw); line-height: var(--lh-130); letter-spacing: -0.01em; } #visual .visual-description-item { display: block; white-space: nowrap; } #visual .visual-description-item + .visual-description-item { margin-left: min(2.80rem, 1.46vw); padding-left: min(2.80rem, 1.46vw); border-left: 1px solid rgba(255, 255, 255, 0.6); } /* Visual 오버레이 (스크롤 게이트: 1단계 체인지 소개 → 2단계 2027 주제) 배경은 딤/블러를 덮지 않는다 — 키 비주얼 캔버스의 색만 콘텐츠 팔레트(거의 검정 바탕 + 흰 큰 타이포, KV_colorem-settings-content.json)로 바뀌고 모션은 메인과 동일하게 계속 돈다 (visual.blade.php reveal / CJ, 0.7s 에 94%) */ #visual .visual-overlay { position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; } #visual .visual-overlay-stage { position: absolute; top: 50%; left: 50%; width: 86%; transform: translate(-50%, -50%); text-align: center; /* PC/모바일 모두 화면 중앙 정렬 */ } /* 단계 콘텐츠 전환 : 아래에서 위로 곧게 올라오는 세로 한 줄 이동 (확대/축소 없음). 아직 안 나온 단계는 아래(+rise)에서 대기, 지나간 단계는 위(-rise)로 빠져 있어 앞으로 갈 땐 위로, 되돌아갈 땐 아래로 흐른다. 이동 거리는 --overlay-rise (모바일은 아래 미디어 쿼리에서 재정의) */ #visual .visual-overlay { --overlay-rise: min(12.00rem, 6.25vw); } #visual .visual-overlay-content { position: relative; opacity: 0; transform: translateY(var(--overlay-rise)); /* 사라질 때: 지연 없이 빠르게 */ transition: opacity 0.35s ease, transform 0.35s ease; } /* 2단계가 활성일 때 1단계는 위로 빠져 있음 (1단계 ← 2단계 복귀 시 위에서 내려옴) */ #visual[data-stage="2"] .visual-overlay-stage[data-stage="1"] .visual-overlay-content { transform: translateY(calc(-1 * var(--overlay-rise))); } #visual .visual-overlay-stage.is-active .visual-overlay-content { opacity: 1; transform: translateY(0); /* 나타날 때: 배경 색상 전환(또는 이전 단계 퇴장) 직후 올라옴 — 스크롤 입력에 바로 반응하도록 지연·시간 단축 (script.js REVEAL_MS/SWITCH_MS 와 맞물림) */ transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1) 0.35s, transform 0.8s cubic-bezier(.16, 1, .3, 1) 0.35s; } #visual .visual-overlay-title { position: relative; display: inline-block; font-weight: 800; font-size: min(4.20rem, 2.19vw); line-height: 130%; letter-spacing: -0.02em; color: var(--ir-color-white); } #visual .visual-overlay-highlight { display: inline-block; padding: 0 0.3em; background-color: var(--ir-color-black); /* 두 단계 공통 : 검은 배경 + 빨간 글씨 */ color: var(--ir-color-red); } #visual .visual-overlay-highlight-en { font-family: var(--lang-en); font-weight: 800; letter-spacing: 0; } /* 1. 2027 주제 단계 : 텍스트 그룹은 화면 가운데, 그룹 안(타이틀·주제·영문·설명)은 왼쪽 정렬 */ #visual .visual-overlay-stage-theme .visual-overlay-content { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; /* 가장 넓은 자식(주제 락업 또는 설명문 최장 줄) 폭으로 shrink */ margin: 0 auto; text-align: left; } /* 1단계 체인지 소개 : 2단계 텍스트 그룹의 왼쪽 라인에 맞춰 왼쪽 정렬. margin-left 는 script.js alignIntroToTheme 가 2단계 그룹의 offsetLeft 로 세팅 (JS 전에는 기본 중앙 정렬) */ #visual .visual-overlay-stage-intro .visual-overlay-content { text-align: left; } /* 3. 주제 락업 : 이미지 3장 폭으로 shrink → 영문 부제(SVG textLength)가 이 폭에 맞춰짐. --theme-fs 는 이미지 크기 기준(95px @1920)으로 이미지·영문 여백이 공유 */ #visual .visual-overlay-lockup { --theme-fs: min(9.50rem, 4.95vw); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } /* 2027 주제 '소음과 공명' : 디자인 효과(소음 블러 · 과 반투명)가 들어간 PNG 3장(소음 / 과 / 공명, 원본 1x @1920). * 이미지 높이·간격을 font-size 기준 em 으로 잡아 PC/모바일은 font-size 스케일 규칙만 공유하면 됨 */ #visual .visual-overlay-theme { margin-top: min(2.00rem, 1.04vw); display: flex; justify-content: flex-start; align-items: center; /* 세 이미지 모두 글리프가 캔버스 세로 중앙에 있어 중앙 맞춤 = 글리프 중심 일치 */ font-size: var(--theme-fs); /* 이미지 크기 기준 */ line-height: 110%; } #visual .visual-overlay-theme img { display: block; width: auto; height: 0.99em; /* 과·공명 원본 94px */ } #visual .visual-overlay-theme .theme-soeum { height: 1.16em; /* 소음 원본 110px (블러 번짐 여백 포함, 글리프 크기는 동일) */ } /* 이미지 사이 간격 : 캔버스 안쪽 투명 여백을 감안해 글리프 간 거리가 이미지 내부 자간(≈32px @95px)과 같아지도록 */ #visual .visual-overlay-theme .theme-gwa { margin-left: 0.19em; } #visual .visual-overlay-theme .theme-gongmyeong { margin-left: 0.28em; } #visual .visual-overlay-theme-en { margin-top: min(1.20rem, 0.63vw); /* 락업 폭은 이미지 3장만 결정하도록 : width 0 으로 폭 계산에서 빠지고(svg 기본 고유 폭 300px 유입 방지), min-width 로 최종 락업 폭을 그대로 받음 */ box-sizing: border-box; width: 0; min-width: 100%; /* 소음 왼쪽(16/216)·공명 오른쪽(18/211) 캔버스 투명 여백만큼 안쪽으로 → 글리프 경계 기준으로 폭 맞춤 */ padding-left: calc(var(--theme-fs) * 0.169); padding-right: calc(var(--theme-fs) * 0.19); font-family: var(--lang-en); font-weight: 500; font-size: min(2.10rem, 1.09vw); line-height: 120%; color: var(--ir-color-white); } #visual .visual-overlay-theme-en svg { display: block; width: 100%; height: 1.2em; overflow: visible; } #visual .visual-overlay-theme-en text { fill: currentColor; letter-spacing: 0; /* 자간은 textLength="100%" 가 svg 폭에 맞춰 균등 분배 */ } #visual .visual-overlay-desc { margin-top: min(4.00rem, 2.08vw); font-weight: 500; font-size: min(2.20rem, 1.15vw); line-height: 165%; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.88); word-break: keep-all; } #visual .visual-overlay-desc p + p { margin-top: 1em; } /* 비주얼 영역을 지나면 마지막 단계 문구는 script.js(updateOverlayByScroll)가 스크롤 양에 맞춰 밀어 올리며 사라지게 하고, 전환된 배경은 유지 */ /* 오버레이가 켜지면 키 비주얼 타이틀/정보와 모바일 스크롤 화살표 숨김 */ #visual .visual-text-area, #visual .visual-arrow-area { transition: opacity 0.6s ease; } #visual.is-revealed .visual-text-area, #visual.is-revealed .visual-arrow-area { opacity: 0; } @media (prefers-reduced-motion: reduce) { #visual .visual-overlay-line, #visual .visual-overlay-content { transition-duration: 0.01ms; transition-delay: 0s; } #visual .visual-overlay-content { transform: none; } } #registration-button { width: 100%; position: fixed; bottom: 0; left: 0; background-color: var(--ir-color-red); padding: min(1.50rem, 0.78vw) 0; cursor: pointer; z-index: 50; } #registration-button .visual-button-inner { display: flex; flex-direction: row; gap: min(10.00rem, 5.21vw); } /* 마키 이동 : script.js initVisualButtonMarquee 가 --marquee-track(한 세트 폭 px)과 duration(60px/s)을 인라인으로 지정. 컴포지터 애니메이션이라 메인 스레드(키 비주얼 캔버스·스크롤)가 바빠도 끊기지 않는다 (이전 rAF 방식은 저사양에서 드드득거림) */ @keyframes kv-marquee { from { transform: translateX(calc(-1 * var(--marquee-track, 0px))); } to { transform: translateX(0); } } #registration-button .visual-button-text { display: inline-block; color: var(--ir-color-black); font-weight: 700; font-size: min(2.40rem, 1.25vw); letter-spacing: -0.01em; } @media screen and (min-width: 1000px) { #registration-button .visual-button-text { transition: color .8s; } #registration-button:hover .visual-button-text { color: var(--ir-color-white); } } /* 오픈신청 CTA (일반 접수 오픈 전 · 초대 아님) : 띠(#registration-button) 대신 하단 중앙 플로팅 알약 버튼. 리퀴드 글래스 — 반투명 유리(backdrop blur + 흰 테두리/상단 하이라이트) 위에 빨간 "Coming Soon" 태그. 정식 오픈 후의 빨간 전체 띠와 형태가 확실히 다르게 보이도록 한다 (blade $preapply_mode) */ #preapply-button { position: fixed; bottom: min(3.20rem, 1.67vw); left: 0; width: 100%; display: flex; justify-content: center; pointer-events: none; /* 래퍼는 클릭을 막지 않고 버튼만 받음 */ z-index: 50; } #preapply-button .preapply-button { pointer-events: auto; position: relative; isolation: isolate; /* ::before 하이라이트를 버튼 안에서만 합성 */ overflow: hidden; display: inline-flex; align-items: center; gap: min(1.40rem, 0.73vw); height: min(5.60rem, 2.92vw); padding: 0 min(2.40rem, 1.25vw) 0 min(0.80rem, 0.42vw); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.14) 100%); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: var(--ir-color-white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), /* 상단 유리 엣지 */ inset 0 -1px 0 rgba(255, 255, 255, 0.10), /* 하단 미세 반사 */ 0 min(0.80rem, 0.42vw) min(2.80rem, 1.46vw) rgba(0, 0, 0, 0.30); cursor: pointer; white-space: nowrap; transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; } /* 상단에서 흘러내리는 광택 (리퀴드 글래스 스펙큘러) */ #preapply-button .preapply-button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 90% at 18% -20%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%); pointer-events: none; z-index: -1; } #preapply-button .preapply-button-tag { display: inline-flex; align-items: center; height: min(4.00rem, 2.08vw); padding: 0 min(1.40rem, 0.73vw); border-radius: 999px; background-color: var(--ir-color-red); color: var(--ir-color-white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 2px 8px rgba(249, 17, 32, 0.35); font-family: var(--lang-en); font-weight: 700; font-size: min(1.20rem, 0.63vw); letter-spacing: 0.04em; text-transform: uppercase; transition: background-color .3s, color .3s; } #preapply-button .preapply-button-text { font-family: var(--change-lang-ko); font-weight: 700; font-size: min(1.80rem, 0.94vw); letter-spacing: -0.01em; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } #preapply-button .preapply-button-arrow { font-weight: 700; font-size: min(1.80rem, 0.94vw); line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform .3s; } @media screen and (min-width: 1000px) { #preapply-button .preapply-button:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.24) 100%); border-color: rgba(255, 255, 255, 0.60); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.14), 0 min(1.20rem, 0.63vw) min(3.60rem, 1.88vw) rgba(0, 0, 0, 0.36); transform: translateY(-2px); } #preapply-button .preapply-button:hover .preapply-button-arrow { transform: translateX(3px); } } /* backdrop-filter 미지원 브라우저: 유리 대신 진한 반투명으로 가독성 확보 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #preapply-button .preapply-button { background: rgba(21, 27, 28, 0.72); } } /* About */ #about .content-area { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: min(18.20rem, 9.48vw); } #about .intro-visual { width: 100%; aspect-ratio: 757/412.77; } #about .intro-content { width: 100%; /* max-width: min(57.10rem, 29.74vw); */ /* word-break: keep-all; */ } #about .intro-title { font-weight: 700; font-size: min(4.60rem, 2.40vw); line-height: 120%; letter-spacing: -0.02em; margin-bottom: min(8.00rem, 4.17vw); color: var(--ir-color-red); } #about .intro-title .intro-title-text { display: block; } #about .intro-description { font-weight: 600; font-size: min(1.80rem, 0.94vw); line-height: 150%; letter-spacing: -0.02em; word-break: keep-all; } #about .intro-description p + p { margin-top: min(2.00rem, 1.04vw); } /* 인트로 설명 애니메이션 */ #about .intro-description.m-only p { opacity: 0; transform: translateY(40px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #about .intro-description.m-only p.animate-in { opacity: 1; transform: translateY(0); } /* Time Table */ #time_table .content-area { width: 100%; } #time_table .time-table { width: 100%; list-style: none; margin: 0; padding: 0; } #time_table .tt-row { display: grid; grid-template-columns: min(18.70rem, 9.74vw) min(16.00rem, 8.33vw) 1fr; align-items: start; padding: min(3.50rem, 1.82vw) 0; word-break: keep-all; } #time_table .tt-row.simple-session { align-items: center; padding: min(5.00rem, 2.60vw) 0 min(3.50rem, 1.82vw); } #time_table .tt-group { position: relative; list-style: none; margin: 0; padding: min(5.00rem, 2.60vw) min(3.50rem, 1.82vw); } #time_table .tt-group::before { content: ''; position: absolute; inset: 0; border: 4px solid rgba(255, 255, 255, 0.85); border-radius: min(3.00rem, 1.56vw); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 min(1.00rem, 0.52vw), transparent min(3.00rem, 1.56vw), transparent calc(100% - min(3.00rem, 1.56vw)), #000 calc(100% - min(1.00rem, 0.52vw)), #000 100%); mask-image: linear-gradient(to bottom, #000 0, #000 min(1.00rem, 0.52vw), transparent min(3.00rem, 1.56vw), transparent calc(100% - min(3.00rem, 1.56vw)), #000 calc(100% - min(1.00rem, 0.52vw)), #000 100%); } #time_table .tt-row:first-child { padding-top: 0; } #time_table .tt-row:last-child { padding-bottom: 0; } #time_table .tt-left { grid-column: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-right: min(2.70rem, 1.41vw); } #time_table .tt-photo { grid-column: 2; } #time_table .tt-body { grid-column: 3; padding-left: min(4.80rem, 2.50vw); padding-right: min(2.00rem, 1.04vw); } #time_table .tt-time { display: block; font-weight: 700; font-size: min(1.80rem, 0.94vw); line-height: 140%; color: var(--ir-color-white); white-space: nowrap; } #time_table .full-session .tt-time { margin-top: min(2.60rem, 1.35vw); } #time_table .badge { display: inline-flex; align-items: center; justify-content: center; min-width: min(13.20rem, 6.88vw); height: min(2.80rem, 1.46vw); padding: 0 min(1.80rem, 0.94vw); border-radius: min(3.00rem, 1.56vw); font-weight: 700; font-size: min(1.50rem, 0.78vw); line-height: 1; text-transform: uppercase; white-space: nowrap; } #time_table .badge-session { background: var(--ir-color-red, #f91120); color: #fff; } #time_table .speaker-image { position: relative; width: min(16.00rem, 8.33vw); height: min(16.00rem, 8.33vw); border-radius: 50%; overflow: hidden; /* background: #d9d9d9; */ margin: 0; } #time_table .speaker-image img { display: block; width: 100%; height: 100%; object-fit: cover; /* filter: grayscale(100%); */ } #time_table .tt-title { font-weight: 700; font-size: min(1.80rem, 0.94vw); line-height: 140%; text-transform: capitalize; margin: 0; } #time_table .session-title { font-weight: 700; font-size: min(2.00rem, 1.04vw); line-height: 140%; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; } #time_table .session-description { font-weight: 400; font-size: min(1.60rem, 0.83vw); line-height: 160%; color: rgba(255, 255, 255, 0.8); margin-top: min(1.20rem, 0.63vw); } #time_table .speaker-info { display: flex; align-items: baseline; gap: min(0.80rem, 0.42vw); flex-wrap: wrap; margin-top: min(2.00rem, 1.04vw); font-size: min(1.60rem, 0.83vw); line-height: 140%; color: var(--ir-color-white); } #time_table .speaker-name { font-weight: 700; } #time_table .speaker-name::after { content: '/'; margin-left: min(0.80rem, 0.42vw); font-weight: 400; } #time_table .speaker-position { font-weight: 400; letter-spacing: -0.02em; } /* History */ #history .section-title { margin-bottom: min(1.50rem, 0.78vw); } #history .section-description { font-weight: 500; font-size: min(2.50rem, 1.30vw); line-height: 140%; letter-spacing: -0.02em; margin-bottom: min(8.00rem, 4.17vw); } #history .swiper { width: 100%; height: 100%; } #history .swiper-slide { width: 100%; display: flex; justify-content: center; align-items: center; } #history .swiper-slide img { display: block; width: 100%; object-fit: cover; } #history .swiper-horizontal>.swiper-pagination-bullets { width: fit-content; background: #151B1C80; border-radius: min(3.00rem, 1.56vw); padding: min(1.00rem, 0.52vw); left: 50%; transform: translateX(-50%); bottom: min(6.00rem, 3.13vw); } #history .swiper-pagination-bullet { width: min(1.00rem, 0.52vw); height: min(1.00rem, 0.52vw); margin: 0 min(0.50rem, 0.26vw); background: var(--ir-color-white); opacity: 1; } #history .swiper-pagination-bullet-active { background: var(--ir-color-red); } /* 슬라이드 아래 이전/다음 버튼 (허브 페이지 change/index 와 동일) */ #history .content-area { position: relative; margin-bottom: min(9.00rem, 4.69vw); } #history .swiper-button-next, #history .swiper-button-prev { top: auto; bottom: min(-7.00rem, -3.65vw); width: min(6.00rem, 3.13vw); background-size: 100% 100%; transform: translateX(-50%); } #history .swiper-button-next::after, #history .swiper-button-prev::after { content: unset; } #history .swiper-button-next { background-image: url(../../../image/icon/btn_e_arrow_right-g.svg); left: 54%; } #history .swiper-button-prev { background-image: url(../../../image/icon/btn_e_arrow_left-g.svg); left: 46%; } /* Review */ #review .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: min(1.73rem, 0.90vw); } @media (min-width: 1000px) { #review .grid { grid-template-columns: repeat(3, 1fr); } } #review .column { display: flex; flex-direction: column; gap: min(2.00rem, 1.04vw); } #review .card { box-sizing: border-box; display: flex; flex-direction: column; gap: min(1.50rem, 0.78vw); align-items: flex-start; padding: min(2.00rem, 1.04vw); border-radius: min(2.00rem, 1.04vw); color: var(--ir-color-black); width: 100%; word-break: keep-all; } #review .card-solid { background-color: var(--ir-color-light-gray); } #review .card-transparent { background-color: rgba(242, 242, 242, 0.8); } #review .card p { position: relative; flex-shrink: 0; width: 100%; margin: 0; } #review .card-title { font-weight: 700; font-size: min(1.80rem, 0.94vw); line-height: 140%; letter-spacing: -0.01em; } #review .card-title-alt { font-weight: 700; font-size: min(1.80rem, 0.94vw); letter-spacing: -0.36px; } #review .card-author { line-height: 140%; font-weight: 700; font-size: min(1.40rem, 0.73vw); text-transform: uppercase; } #review .card-author .role { font-weight: 400; } /* Q&A */ #qa .accordion-list { list-style: none; padding: 0; margin: 0; } #qa .accordion-item { color: var(--ir-color-white); border-width: 1px 0px 0px 0px; border-style: solid; border-color: var(--ir-color-dark-gray); } #qa .accordion-item:last-child { border-width: 1px 0px 1px 0px; } #qa .accordion-button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 20px; text-align: left; cursor: pointer; } #qa .accordion-question { color: var(--ir-color-white); font-size: min(2.20rem, 1.15vw); font-weight: 700; margin: 0; word-break: keep-all; line-height: 140%; letter-spacing: -0.01em; } #qa .accordion-icon { width: min(4.00rem, 2.08vw); aspect-ratio: 1/1; flex-shrink: 0; /* 질문이 길어도 아이콘이 눌리지 않게 */ } /* 아이콘: + → − 모핑. 원 전체가 180° 돌면서 세로선만 90° 더 접혀 가로선 위에 겹침 (display 토글 없이 연속 동작) overflow: visible — 원(r=20)이 viewBox(40) 가장자리에 딱 붙어 있어 svg 기본 클립이 소수점 크기·배율에서 오른쪽 가장자리를 한 열 잘라 보이게 함 */ #qa .accordion-icon svg { display: block; overflow: visible; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } #qa .accordion-item.active .accordion-icon svg { transform: rotate(180deg); } #qa .icon-circle { fill: var(--ir-color-medium-gray); fill-opacity: 0.2; transition: fill 0.35s ease, fill-opacity 0.35s ease; } #qa .accordion-item.active .accordion-icon svg .icon-circle { fill: var(--ir-color-red); fill-opacity: 1; } #qa .icon-vertical-line { transform-origin: 20px 20px; /* viewBox(0 0 40 40) 중심 = 선의 중점 */ transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } #qa .accordion-item.active .icon-vertical-line { transform: rotate(90deg); } /* 본문: max-height 는 script.js 가 실제 높이(px)로 지정. 하단 여백은 .accordion-answer 안쪽 padding 이라 높이와 함께 자연스럽게 열리고 닫힘 (.accordion-content 에 padding-bottom 을 주면 transition 대상이 아니라 20px 씩 튐) */ #qa .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 20px; } #qa .accordion-answer { font-size: min(2.20rem, 1.15vw); line-height: 140%; margin: 0; padding-bottom: 20px; color: var(--ir-color-white); font-weight: 400; word-break: keep-all; letter-spacing: -0.01em; opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.25s ease; } #qa .accordion-item.active .accordion-answer { opacity: 1; transform: none; transition: opacity 0.35s ease 0.08s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; } @media (prefers-reduced-motion: reduce) { #qa .accordion-content, #qa .accordion-answer, #qa .accordion-icon svg, #qa .icon-vertical-line, #qa .icon-circle { transition-duration: 0.01ms; transition-delay: 0s; } #qa .accordion-answer { transform: none; } } #qa .accordion-info { display: block; font-size: min(1.60rem, 0.83vw); line-height: 140%; letter-spacing: -0.01em; font-weight: 400; color: var(--ir-color-dark-gray); margin-top: min(3.50rem, 1.82vw); } /* Banner */ #banner { margin-top: min(10.00rem, 5.21vw); } #banner .content-area { background-color: var(--ir-color-red); color: var(--ir-color-black); border-radius: min(2.00rem, 1.04vw); padding: min(5.90rem, 3.07vw) 0 min(5.90rem, 3.07vw) min(6.70rem, 3.49vw); background-image: url('../../../image/change/2027/etc/banner_bg.png'); background-size: 100% 100%; background-position: right; background-repeat: no-repeat; } #banner .banner-header { margin-bottom: min(6.00rem, 3.13vw); color: var(--ir-color-white); } #banner .banner-title { font-weight: 800; font-size: min(4.60rem, 2.40vw); line-height: var(--lh-170); } #banner .banner-description { font-size: min(2.40rem, 1.25vw); font-weight: 500; line-height: var(--lh-170); } #banner .banner-btn { background-color: var(--ir-color-black); color: var(--ir-color-white); border-radius: min(10.00rem, 5.21vw); width: min(22.80rem, 11.88vw); aspect-ratio: 228/72; font-size: var(--font-size-20); font-weight: 700; } #banner .banner-btn .shere-icon { display: inline-block; vertical-align: middle; width: min(2.00rem, 1.04vw); height: min(2.00rem, 1.04vw); margin-left: min(1.00rem, 0.52vw); background-image: url('../../../image/change/2027/icon/banner_share_icon.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; } /* Registration * PC 수치는 1920 기준 원안의 67% (브라우저 67% 줌 시안 기준, 2026-09-16). 모바일(max-width:1000px)은 별도 블록 */ #registration { /* position: absolute; */ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; /* background-color: var(--ir-color-medium-gray); */ background-color: rgba(0, 0, 0, 0.8); color: var(--ir-color-black); z-index: 100; letter-spacing: -0.02rem; display: none; overflow-y: auto; } #registration.open { display: block; } /* 닫기 버튼 : 패널(.section-inner) 우상단. padding 0 → 60x60 아이콘이 버튼 박스를 꽉 채움 */ #registration .registration-close-btn { position: absolute; top: min(2.68rem, 1.40vw); right: min(2.68rem, 1.40vw); width: min(4.02rem, 2.09vw); height: min(4.02rem, 2.09vw); padding: 0; line-height: 0; background-color: transparent; cursor: pointer; } #registration .section-inner { position: relative; /* 닫기 버튼 absolute 기준 */ background-color: var(--ir-color-white); width: min(77.51rem, 40.37vw); padding: min(6.70rem, 3.49vw) min(4.84rem, 2.52vw); margin-top: min(9.38rem, 4.89vw); margin-bottom: min(9.38rem, 4.89vw); border-radius: min(1.34rem, 0.70vw); } #registration .header-section { padding: 0 0 min(1.61rem, 0.84vw) 0; border-bottom: 1px solid var(--ir-color-dark-gray); display: flex; flex-direction: column; gap: min(1.00rem, 0.52vw); } /* 초대 무효·정원 마감 안내 : 아래에 폼이 없으므로 헤더 하단 구분선 제거 */ #registration .header-section.is-blocked { padding-bottom: 0; border-bottom: none; } #registration .main-title { font-weight: 700; font-size: min(3.08rem, 1.60vw); line-height: 120%; } #registration .subtitle { font-weight: 500; font-size: min(1.68rem, 0.88vw); line-height: 120%; } /* 초대 전용 안내 : 알약형 뱃지 — 연한 빨강 배경 + 초대사명(빨강 강조). header-section(flex column) 안에서 내용 폭만큼만 차지 */ #registration .invite-notice { display: inline-block; align-self: flex-start; margin-top: min(0.80rem, 0.42vw); padding: min(0.90rem, 0.47vw) min(1.80rem, 0.94vw); background-color: #FFF1F2; border: 1px solid rgba(249, 17, 32, 0.25); border-radius: min(10.00rem, 5.21vw); font-weight: 500; font-size: min(1.61rem, 0.84vw); line-height: 120%; color: var(--ir-color-black); } #registration .invite-notice strong { font-weight: 700; color: var(--ir-color-red); } #registration .form-section { border-bottom: 1px solid var(--ir-color-dark-gray); display: flex; flex-direction: column; padding-bottom: min(5.36rem, 2.79vw); } #registration .form-article { display: none; } #registration .form-group { display: flex; flex-direction: column; margin-top: min(3.57rem, 1.86vw); /* 기존 5.36rem/2.79vw 의 2/3 */ } /* VIP 초대(?invite=) 진입 시 구분 : 초대 유형으로 정해지므로 화면에서만 숨김 (라디오는 script.js 가 자동 선택, 값은 그대로 전송) */ #registration .form-group.invite-locked { display: none; } /* 부서·직함 / 이름·휴대폰 : PC 한 줄 반반 배치 (구분 토글 버튼 gap 과 동일) */ #registration .form-row { display: flex; align-items: flex-end; /* 한쪽에만 에러 메시지가 붙어도 인풋 하단 라인 정렬 유지 */ gap: min(1.34rem, 0.70vw); } #registration .form-row .form-group { flex: 1 1 0; min-width: 0; } #registration .form-label { margin-bottom: min(1.34rem, 0.70vw); font-weight: 700; font-size: min(1.88rem, 0.98vw); line-height: 120%; } #registration .required { color: var(--ir-color-red); } #registration .button-group { display: flex; gap: min(1.34rem, 0.70vw); } #registration .toggle-button { display: flex; width: 100%; line-height: 0; } #registration .toggle-button label { display: block; background-color: #f2f2f2; border: none; border-radius: min(1.34rem, 0.70vw); padding: min(1.54rem, 0.80vw) min(2.01rem, 1.05vw); font-weight: 500; font-size: min(1.61rem, 0.84vw); line-height: 120%; cursor: pointer; flex: 1; white-space: nowrap; transition: all 0.3s ease; text-align: left; } #registration .toggle-button input[type="radio"]:checked ~ label { background-color: var(--ir-color-red); color: var(--ir-color-white); } @media screen and (min-width: 1000px) { #registration .toggle-button:hover { opacity: 0.9; } } /* Input Wrapper */ #registration .input-wrapper { background-color: #f2f2f2; border-radius: min(1.34rem, 0.70vw); padding: min(1.54rem, 0.80vw) min(2.01rem, 1.05vw); position: relative; } #registration .input-wrapper.error-border { border: 1px solid var(--ir-color-red); } #registration .form-input { /* font: initial !important; */ font-family: var(--change-lang-ko); border: none; background: transparent; outline: none; width: 100%; font-weight: 500; font-size: min(1.61rem, 0.84vw); line-height: 120%; } /* 클라이언트 초대 시 회사명 인풋 disabled : 비활성 느낌의 회색 글자(placeholder 와 같은 --ir-color-dark-gray), 브라우저별 반투명 처리는 막고 수정 불가 커서 표시 */ #registration .form-input:disabled { color: var(--ir-color-dark-gray); -webkit-text-fill-color: currentColor; /* iOS Safari 는 color 대신 text-fill-color 를 봄 */ opacity: 1; cursor: not-allowed; } #registration .form-input::placeholder { color: var(--ir-color-dark-gray); font-weight: 400; font-size: min(1.61rem, 0.84vw); line-height: 120%; } /* 의견 항목 (이메일 아래 구분선 포함) */ #registration .form-group-comment { margin-top: min(5.36rem, 2.79vw); padding-top: min(5.36rem, 2.79vw); border-top: 1px solid var(--ir-color-dark-gray); } /* Textarea (의견) */ #registration .input-wrapper-textarea { display: block; } #registration .form-textarea { display: block; resize: none; min-height: min(8.04rem, 4.19vw); line-height: 150%; -webkit-appearance: none; appearance: none; border-radius: 0; } #registration .form-textarea::placeholder { line-height: 150%; } /* Error Message */ #registration .error-message { display: flex; align-items: center; gap: min(0.34rem, 0.18vw); margin-bottom: min(0.67rem, 0.35vw); } #registration .error-icon { background-color: var(--ir-color-red); border-radius: min(1.14rem, 0.59vw); width: min(1.14rem, 0.59vw); height: min(1.14rem, 0.59vw); display: flex; align-items: center; justify-content: center; font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: min(0.94rem, 0.49vw); color: var(--ir-color-white); } #registration .error-text { display: inline-block; font-weight: 500; font-size: min(1.07rem, 0.56vw); line-height: 120%; color: var(--ir-color-red); } /* Footer Section */ #registration .footer-section { padding: min(4.02rem, 2.09vw) 0; display: flex; justify-content: space-between; align-items: flex-start; } #registration .privacy-group { display: flex; flex-direction: column; } /* 개인정보 동의 설명: 체크박스 왼쪽 라인에 맞춰 시작 (들여쓰기 없음), 라벨보다 한 단계 작은 본문 크기 */ #registration .privacy-desc { margin-top: min(1.40rem, 0.73vw); padding-left: 0; font-weight: 400; font-size: min(1.30rem, 0.68vw); line-height: 170%; color: var(--ir-color-dark-gray); } #registration .checkbox-group { display: flex; align-items: center; gap: min(1.20rem, 0.63vw); } #registration .checkbox-wrapper { flex-shrink: 0; cursor: pointer; } /* 둥근 네모 체크박스 (SVG rect + check path). 미체크: 연회색 박스만, 체크: 검정 채움 + 흰 체크 */ #registration .checkbox-icon { display: block; width: min(2.80rem, 1.46vw); height: min(2.80rem, 1.46vw); } #registration .checkbox-icon .checkbox-box { fill: #EFEFEF; stroke: #E2E2E2; transition: fill .2s, stroke .2s; } #registration .checkbox-icon .checkbox-check { stroke: transparent; transition: stroke .2s; } #registration input[type="checkbox"]:checked ~ .checkbox-icon .checkbox-box { fill: var(--ir-color-black); stroke: var(--ir-color-black); } #registration input[type="checkbox"]:checked ~ .checkbox-icon .checkbox-check { stroke: var(--ir-color-white); } #registration .privacy-text { font-weight: 700; font-size: min(1.60rem, 0.83vw); line-height: 1.2; color: var(--ir-color-black, #151B1C); cursor: pointer; } #registration .privacy-text .required { margin-left: 0.1em; } #registration .email-link { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: min(1.07rem, 0.56vw); line-height: 1.2; letter-spacing: -0.21px; color: #969696; text-decoration: none; white-space: nowrap; } @media screen and (min-width: 1000px) { #registration .email-link:hover { text-decoration: underline; } } /* Submit Section */ #registration .submit-section { margin: min(2.68rem, 1.40vw) 0 0; } #registration .submit-button { background-color: var(--ir-color-red); border: 1px solid var(--ir-color-red); border-radius: min(6.70rem, 3.49vw); padding: min(1.68rem, 0.88vw) min(2.68rem, 1.40vw); width: min(38.46rem, 20.03vw); height: min(6.70rem, 3.49vw); font-weight: 700; font-size: min(1.61rem, 0.84vw); line-height: 140%; text-transform: capitalize; color: var(--ir-color-white); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; margin: 0 auto; } @media screen and (min-width: 1000px) { #registration .submit-button:hover { opacity: 0.9; transform: translateY(-2px); } #registration .submit-button:active { transform: translateY(0); } } #registration .intro-hidden { display: none; } #footer { padding-bottom: min(6.40rem, 3.33vw); } #footer .footer-logo { width: min(12.80rem, 6.67vw); aspect-ratio: 128/21; display: inline-block; margin-bottom: min(8.00rem, 4.17vw); } #footer .company-info-description { color: var(--ir-color-dark-gray); font-size: min(1.40rem, 0.73vw); line-height: 120%; font-weight: 400; } #footer .company-description-item + .company-description-item { margin-top: min(1.00rem, 0.52vw); } #footer .social-link-group { display: flex; flex-direction: row; gap: min(1.20rem, 0.63vw); } #footer .social-link-group .social-link-item { width: min(3.20rem, 1.67vw); aspect-ratio: 1/1; background-color: var(--ir-color-dark-gray); background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 50%; } #footer .social-link-group .social-link-item.youtube { background-image: url('../../../image/icon/icon_sns_youtube.svg'); } #footer .social-link-group .social-link-item.instagram { background-image: url('../../../image/icon/icon_sns_instagram.svg'); } #footer .social-link-group .social-link-item.linkedin { background-image: url('../../../image/icon/icon_sns_linkedin.svg'); } /* Privacy Modal */ #modal { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(21, 27, 28, 0.5); z-index: 1100; color: var(--ir-color-black); letter-spacing: -0.02rem; } #modal .modal-inner { font-family: var(--change-lang-ko); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(67.00rem, 34.90vw); margin: 0 auto; background-color: var(--ir-color-white); padding: min(8.00rem, 4.17vw) min(5.00rem, 2.60vw) min(5.70rem, 2.97vw); border-radius: min(2.00rem, 1.04vw); overflow-y: auto; } #modal .btn-close-modal { position: absolute; top: min(3.00rem, 1.56vw); right: min(3.10rem, 1.61vw); width: min(4.80rem, 2.50vw); height: min(4.80rem, 2.50vw); } #modal .info-area > div { display: block; } #modal .info-area .title { font-size: min(3.20rem, 1.67vw); font-weight: 700; line-height: var(--lh-120); margin-bottom: min(1.50rem, 0.78vw); } #modal .privacy-box p { font-size: min(2.20rem, 1.15vw); font-weight: 500; line-height: var(--lh-120); margin-bottom: min(3.60rem, 1.88vw); } #modal .privacy-box li { font-size: min(1.40rem, 0.73vw); font-weight: 400; line-height: var(--lh-130); text-align: left; } #modal .privacy-box li + li { margin-top: 1rem; } @media screen and (max-width: 1000px) { .is-br { display: inline; } .is-br::after { content: ' '; } .m-only {display: block !important;} .pc-only {display: none !important;} .section:not(#visual, #banner, #registration) { padding: 0 max(2.40rem, 6.40vw); } .section-inner, .footer-inner { width: var(--max-inner-width-m); padding: var(--default-padding-m); } .section-title { font-size: max(2.40rem, 6.40vw); margin-bottom: max(2.50rem, 6.67vw); } #header { z-index: 200; padding: max(2.00rem, 5.33vw) max(1.50rem, 4.00vw); } #header .logo { width: max(8.70rem, 23.20vw); } #header .menu-button { position: relative; width: max(3.60rem, 9.60vw); height: max(3.60rem, 9.60vw); background: none; border: none; cursor: pointer; padding: 0; } /* #header .menu-button { display: none!important; } #header .menu-button.show { display: block!important; } */ #header .menu-button:focus { outline: none; } #header .menu-button svg { display: block; width: 100%; height: 100%; } #header .hamburger-path { opacity: 1; } #header .menu-button.open .hamburger-path { opacity: 0; } #header .x-group { opacity: 0; } #header .menu-button.open .x-group { opacity: 1; } #mobile-menu { display: none !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--ir-color-black); z-index: 100; } #mobile-menu.open { display: block !important; } .mobile-menu-list { width: 100%; font-family: var(--lang-en); font-variation-settings: 'wght' var(--weight-600); font-size: max(4.80rem, 12.80vw); line-height: 110%; margin-top: max(15.00rem, 40.00vw); padding-left: max(2.50rem, 6.67vw); } .mobile-menu-item + .mobile-menu-item { margin-top: max(1.00rem, 2.67vw); } #visual { aspect-ratio: unset; height: 100vh; /* height: 100dvh; */ } #visual .visual-text-area { padding: 0 max(2.00rem, 5.33vw); transform: translateY(-4vh); } #visual .visual-arrow-area { position: absolute; bottom: max(6.80rem, 18.13vw); right: max(1.87rem, 4.99vw); width: max(1.53rem, 4.08vw); animation: moveArrow 1s infinite; } @keyframes moveArrow { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } #visual .visual-title-en { width: max(24.00rem, 64.00vw); } #visual .visual-title-ko { margin-top: max(2.00rem, 5.33vw); font-size: max(2.20rem, 5.87vw); letter-spacing: 0.7em; margin-right: -0.7em; } #visual .visual-description { bottom: max(13.00rem, 34.67vw); flex-direction: column; font-size: max(1.40rem, 3.73vw); line-height: var(--lh-140); } #visual .visual-description-item + .visual-description-item { margin-left: 0; padding-left: 0; border-left: none; margin-top: max(0.60rem, 1.60vw); } #visual .visual-overlay { --overlay-rise: max(7.00rem, 18.67vw); /* 단계 콘텐츠 세로 이동 거리 (모바일) */ } #visual .visual-overlay-stage { width: calc(100% - 2 * max(2.00rem, 5.33vw)); /* 좌우 대칭 여백, 중앙 정렬 */ } #visual .visual-overlay-title { font-size: max(2.20rem, 5.87vw); } #visual .visual-overlay-lockup { --theme-fs: max(4.00rem, 10.67vw); /* 이미지 크기 기준 */ } #visual .visual-overlay-theme { margin-top: max(1.60rem, 4.27vw); } #visual .visual-overlay-theme-en { margin-top: max(0.80rem, 2.13vw); font-size: max(1.10rem, 2.93vw); } #visual .visual-overlay-desc { margin-top: max(2.40rem, 6.40vw); font-size: max(1.20rem, 3.20vw); line-height: 160%; } #registration-button { padding: max(1.40rem, 3.73vw) 0 ; } #registration-button .visual-button-inner { gap: max(7.00rem, 18.67vw); } #registration-button .visual-button-text { font-size: max(1.60rem, 4.27vw); } /* 오픈신청 플로팅 버튼 (모바일) */ /* 문구가 "오픈알림신청"으로 길어져 한 줄(nowrap) 폭이 화면을 넘지 않도록 여백·간격을 줄이고 글자 하한을 낮춤 (버튼은 overflow:hidden 이라 넘치면 화살표부터 잘림. 360px 에서도 약 10px 여유) */ #preapply-button { bottom: max(2.00rem, 5.33vw); padding: 0 max(1.20rem, 3.20vw); box-sizing: border-box; } #preapply-button .preapply-button { gap: max(0.80rem, 2.13vw); height: max(5.20rem, 13.87vw); padding: 0 max(1.60rem, 4.27vw) 0 max(0.70rem, 1.87vw); box-shadow: 0 max(0.60rem, 1.60vw) max(2.00rem, 5.33vw) rgba(0, 0, 0, 0.35); } #preapply-button .preapply-button-tag { flex-shrink: 0; height: max(3.80rem, 10.13vw); padding: 0 max(1.00rem, 2.67vw); font-size: max(1.00rem, 2.67vw); } #preapply-button .preapply-button-text, #preapply-button .preapply-button-arrow { font-size: max(1.40rem, 4.00vw); } /* 오픈신청 모드: 스크롤 화살표를 플로팅 버튼(bottom 5.33vw + 높이 13.87vw) 위로 올려 겹침 방지 (#main.preapply-mode 는 blade $preapply_mode) */ #main.preapply-mode #visual .visual-arrow-area { bottom: max(8.40rem, 22.40vw); } #about .section-inner { padding-top: max(6.80rem, 18.13vw); } #about .intro-visual { opacity: 0.4; aspect-ratio: 320.62/613; } #about .content-area { position: relative; display: block; } #about .intro-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #about .intro-title { font-size: max(3.20rem, 8.53vw); position: absolute; top: max(12.70rem, 33.87vw); left: 50%; transform: translateX(-50%); text-align: center; letter-spacing: -0.02em; } #about .intro-title-text { display: block; } #about .intro-description { font-size: max(1.20rem, 3.20vw); position: absolute; top: max(36.10rem, 96.27vw); left: 50%; transform: translateX(-50%); text-align: center; letter-spacing: -0.02em; font-weight: 500; width: 100%; } #about .intro-description p + p { margin-top: max(2.00rem, 5.33vw); } /* Time Table (mobile) */ #time_table .tt-row { display: flex; flex-wrap: wrap; align-items: center; padding: max(2.00rem, 5.33vw) 0; } #time_table .tt-row.simple-session { gap: max(0.40rem, 1.07vw) max(1.20rem, 3.20vw); padding: max(1.60rem, 4.27vw) max(0.40rem, 1.07vw); } #time_table .tt-row:first-child { padding-top: 0; } #time_table .tt-row:last-child { padding-bottom: 0; } #time_table .tt-group { padding: max(2.00rem, 5.33vw) max(2.00rem, 5.33vw); margin: max(0.40rem, 1.07vw) 0; } #time_table .tt-group::before { border-width: 3px; border-radius: max(2.00rem, 5.33vw); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 max(0.60rem, 1.60vw), transparent max(2.00rem, 5.33vw), transparent calc(100% - max(2.00rem, 5.33vw)), #000 calc(100% - max(0.60rem, 1.60vw)), #000 100%); mask-image: linear-gradient(to bottom, #000 0, #000 max(0.60rem, 1.60vw), transparent max(2.00rem, 5.33vw), transparent calc(100% - max(2.00rem, 5.33vw)), #000 calc(100% - max(0.60rem, 1.60vw)), #000 100%); } /* 연사 세션: 뱃지+시간 / 사진+연사 / 제목 / 설명 순 카드형 */ #time_table .tt-row.full-session { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; column-gap: max(1.20rem, 3.20vw); row-gap: 0; align-items: start; } #time_table .tt-row.full-session + .tt-row.full-session { border-top: 1px solid rgba(255, 255, 255, 0.15); } #time_table .full-session .tt-body { display: contents; } #time_table .tt-left { grid-area: 1 / 1 / 2 / 3; flex-direction: row; align-items: center; flex-wrap: wrap; text-align: left; padding-right: 0; gap: max(0.80rem, 2.13vw) max(1.20rem, 3.20vw); } #time_table .full-session .tt-left { width: 100%; margin-bottom: max(1.40rem, 3.73vw); } #time_table .full-session .tt-photo { grid-area: 2 / 1 / 3 / 2; } #time_table .full-session .speaker-info { grid-area: 2 / 2 / 3 / 3; align-self: center; } #time_table .full-session .session-title { grid-area: 3 / 1 / 4 / 3; margin-top: max(1.20rem, 3.20vw); } #time_table .full-session .session-description { grid-area: 4 / 1 / 5 / 3; margin-top: max(0.80rem, 2.13vw); } #time_table .tt-time, #time_table .full-session .tt-time { margin-top: 0; font-size: max(1.40rem, 3.73vw); line-height: 1.4; } #time_table .badge { min-width: 0; height: auto; border-radius: max(5.00rem, 13.33vw); padding: max(0.60rem, 1.60vw) max(1.40rem, 3.73vw); font-size: max(1.20rem, 3.20vw); } #time_table .tt-photo { width: max(4.80rem, 12.80vw); flex-shrink: 0; } #time_table .speaker-image { width: max(4.80rem, 12.80vw); height: max(4.80rem, 12.80vw); } #time_table .tt-body { flex: 1; min-width: 0; padding-left: 0; padding-right: 0; } #time_table .tt-title { font-size: max(1.50rem, 4.00vw); line-height: 1.4; } #time_table .session-title { font-size: max(1.70rem, 4.53vw); line-height: 1.4; } #time_table .session-description { font-size: max(1.40rem, 3.73vw); line-height: 1.6; margin-top: max(0.80rem, 2.13vw); } #time_table .speaker-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: max(0.40rem, 1.07vw) max(0.60rem, 1.60vw); margin-top: 0; font-size: max(1.40rem, 3.73vw); line-height: 1.4; } #time_table .speaker-position { font-size: max(1.30rem, 3.47vw); color: rgba(255, 255, 255, 0.8); } /* 오버레이 게이트가 이 섹션 상단을 뷰포트 맨 위에 맞춰 이동시키므로(script.js smoothScrollTo nextSectionTop), 기본 여백(12vw≈47px)으로는 타이틀이 고정 헤더(≈79px) 아래에 깔림 → 헤더 높이 + 여유만큼 상단 여백을 키움 */ #history .section-inner { padding-top: max(12.00rem, 32.00vw); } #history .section-title { margin-bottom: max(1.50rem, 4.00vw); } #history .section-description { font-weight: 400; font-size: max(1.40rem, 3.73vw); word-break: keep-all; margin-bottom: max(2.00rem, 5.33vw); } #history .swiper-pagination-bullet { display: none; } #history .content-area { margin-bottom: max(7.00rem, 18.67vw); } #history .swiper-button-next, #history .swiper-button-prev { bottom: max(-6.00rem, -16.00vw); width: max(3.00rem, 8.00vw); } #history .swiper-button-next { left: 58%; } #history .swiper-button-prev { left: 42%; } #review .grid { display: flex !important; flex-wrap: wrap; gap: max(0.80rem, 2.13vw); } #review .grid.pc-only { display: none !important; } #review .column { display: flex; flex-direction: column; gap: max(0.80rem, 2.13vw); flex: 0 0 calc(50% - max(0.40rem, 1.065vw)); width: calc(50% - max(0.40rem, 1.065vw)); } /* #review .card:not(.m-card) { display: none; } */ #review .card { gap: max(1.00rem, 2.67vw); padding: max(2.00rem, 5.33vw); word-break: normal; border-radius: max(1.00rem, 2.67vw); } #review .card.bg-light { background-color: var(--ir-color-light-gray); } #review .card.bg-dark { background-color: rgba(242, 242, 242, 0.8); } #review .card-title { font-size: max(1.20rem, 3.20vw); letter-spacing: -0.01em; } #review .card-author { font-size: max(1.20rem, 3.20vw); letter-spacing: -0.01em; } #qa .accordion-content { padding-left: 0; } #qa .accordion-button { padding: max(2.00rem, 5.33vw) 0; } #qa .accordion-question { font-size: max(1.60rem, 4.27vw); } #qa .accordion-icon { width: max(3.00rem, 8.00vw); } #qa .accordion-answer { font-size: max(1.20rem, 3.20vw); } #qa .accordion-info { font-size: max(1.00rem, 2.67vw); margin-top: max(2.00rem, 5.33vw); } /* 배너: PC 와 동일한 구성 (그라데이션 배경, 둥근 카드, 좌우 여백, 제목 전체 표시) */ #banner { padding: 0 max(2.40rem, 6.40vw); } #banner .content-area { border-radius: max(1.20rem, 3.20vw); padding: max(2.40rem, 6.40vw) max(2.00rem, 5.33vw) max(2.40rem, 6.40vw) max(2.40rem, 6.40vw); background-image: url('../../../image/change/2027/etc/banner_bg.png'); background-size: 100% 100%; background-position: right; } #banner .banner-header { margin-bottom: max(2.40rem, 6.40vw); } #banner .banner-title { font-size: max(2.20rem, 5.87vw); line-height: var(--lh-140); } #banner .banner-description { font-size: max(1.40rem, 3.73vw); line-height: 150%; margin-top: max(0.40rem, 1.07vw); } #banner .banner-description span { display: block; } #banner .banner-btn { border-radius: max(5.00rem, 13.33vw); width: max(15.00rem, 40.00vw); aspect-ratio: 150/45; font-size: max(1.60rem, 4.27vw); } #banner .banner-btn .shere-icon { width: max(1.60rem, 4.27vw); height: max(1.60rem, 4.27vw); margin-left: max(1.00rem, 2.67vw); } /* Registration */ #registration { z-index: 500; background-color: var(--ir-color-white); } /* 닫기 버튼 : 모바일은 스크롤과 무관하게 상단 우측 고정 (기존 상단 바의 버튼 위치와 동일) */ #registration .registration-close-btn { position: fixed; top: max(2.00rem, 5.33vw); right: max(1.50rem, 4.00vw); width: max(3.60rem, 9.60vw); height: max(3.60rem, 9.60vw); z-index: 200; } #registration .section-inner { width: 100%; padding: max(10.50rem, 28.00vw) max(2.40rem, 6.40vw) max(5.20rem, 13.87vw); margin-top: 0; margin-bottom: 0; border-radius: 0; word-break: keep-all; } /* Header Section */ #registration .header-section { padding: 0 0 max(5.00rem, 13.33vw) 0; border-bottom: 1px solid var(--ir-color-medium-gray); display: flex; flex-direction: column; gap: min(1.50rem, 0.78vw); } #registration .header-section.is-blocked { padding-bottom: 0; border-bottom: none; } #registration .main-title { font-size: max(3.20rem, 8.53vw); margin-bottom: max(1.50rem, 4.00vw); } #registration .main-title span { display: block; } #registration .subtitle { font-size: max(1.80rem, 4.80vw); line-height: 130%; letter-spacing: -0.02em; } /* 초대 전용 안내 뱃지 (모바일) */ #registration .invite-notice { margin-top: max(1.00rem, 2.67vw); padding: max(1.10rem, 2.93vw) max(2.20rem, 5.87vw); border-radius: max(10.00rem, 26.67vw); font-size: max(1.60rem, 4.27vw); line-height: 130%; letter-spacing: -0.02em; } /* Form Section */ #registration .form-section { /* padding: min(8.00rem, 4.17vw) 0; */ border-bottom: none; padding-bottom: 0; } #registration .form-article { display: none; } #registration .form-group { margin-top: max(2.40rem, 6.40vw); /* 기존 3.60rem/9.60vw 의 2/3 */ } /* 모바일 : 반반 배치 해제, 기존처럼 세로 나열 */ #registration .form-row { flex-direction: column; align-items: stretch; gap: 0; } #registration .form-label { margin-bottom: max(2.00rem, 5.33vw); font-size: max(2.40rem, 6.40vw); } /* Button Group */ #registration .button-group { flex-direction: column; gap: max(2.00rem, 5.33vw); } #registration .toggle-button { display: flex; width: 100%; line-height: 0; } #registration .toggle-button label { border-radius: max(2.00rem, 5.33vw); padding: max(2.00rem, 5.33vw) max(2.60rem, 6.93vw); font-size: max(2.00rem, 5.33vw); } #registration .toggle-button input[type="radio"]:checked ~ label { background-color: var(--ir-color-red); color: var(--ir-color-white); } #registration .toggle-button:hover { opacity: 0.9; } /* Input Wrapper */ #registration .input-wrapper { border-radius: max(2.00rem, 5.33vw); padding: max(2.00rem, 5.33vw) max(2.60rem, 6.93vw); } #registration .input-wrapper.error-border { border: 1px solid var(--ir-color-red); } #registration .form-input { /* font: initial !important; */ font-size: max(2.00rem, 5.33vw); } #registration .form-input::placeholder { font-weight: 500; font-size: max(2.00rem, 5.33vw); } /* 의견 항목 (이메일 아래 구분선 포함) */ #registration .form-group-comment { margin-top: max(3.60rem, 9.60vw); padding-top: max(3.60rem, 9.60vw); border-top: 1px solid var(--ir-color-medium-gray); } /* Textarea (의견) */ #registration .form-textarea { min-height: max(11.00rem, 29.33vw); line-height: 150%; } #registration .form-textarea::placeholder { font-weight: 400; line-height: 150%; } /* Error Message */ #registration .error-message { gap: max(0.30rem, 0.80vw); margin-bottom: max(2.00rem, 5.33vw); } #registration .error-icon { border-radius: 50%; width: max(1.70rem, 4.53vw); height: max(1.70rem, 4.53vw); font-size: max(1.40rem, 3.73vw); } #registration .error-text { font-size: max(1.40rem, 3.73vw); } /* Footer Section */ #registration .footer-section { padding: max(3.25rem, 8.67vw) 0 max(4.00rem, 10.67vw); } #registration .privacy-desc { margin-top: max(1.20rem, 3.20vw); padding-left: 0; font-size: max(1.30rem, 3.47vw); line-height: 170%; word-break: keep-all; } #registration .checkbox-group { gap: max(1.00rem, 2.67vw); } #registration .checkbox-icon { width: max(2.80rem, 7.47vw); height: max(2.80rem, 7.47vw); } #registration .privacy-text { font-weight: 700; font-size: max(1.60rem, 4.27vw); } #registration .email-link { display: none; } #registration .email-link:hover { text-decoration: underline; } /* Submit Section */ #registration .submit-section { margin: 0; } #registration .submit-button { width: 100%; height: max(5.50rem, 14.67vw); font-size: max(1.60rem, 4.27vw); border-radius: max(10.00rem, 26.67vw); font-weight: 500; } #registration .submit-button:hover { opacity: 0.9; transform: translateY(-2px); } #registration .submit-button:active { transform: translateY(0); } #registration .intro-hidden { display: none; } #registration .registration-email { font-family: var(--ir-lang-en); font-variation-settings: 'wght' 500; font-size: max(1.20rem, 3.20vw); line-height: 120%; color: var(--ir-color-dark-gray); margin-top: max(1.50rem, 4.00vw); } #modal .btn-close-modal { right: max(1.60rem, 4.27vw); top: max(1.60rem, 4.27vw); width: max(3.00rem, 8.00vw); height: max(3.00rem, 8.00vw); } #modal .modal-inner { padding: max(6.50rem, 17.33vw) max(2.30rem, 6.13vw) max(4.20rem, 11.20vw); width: calc(100% - max(4.00rem, 10.67vw)); border-radius: max(2.00rem, 5.33vw); overflow-y: auto; } #modal .privacy-box p { font-size: max(1.40rem, 3.73vw); margin-bottom: max(3.60rem, 9.60vw); } #modal .privacy-box li { font-size: max(1.20rem, 3.20vw); } #modal .privacy-box li + li { margin-top: max(1.00rem, 2.67vw); } #modal .info-area .title { font-size: max(2.40rem, 6.40vw); margin-bottom: max(1.20rem, 3.20vw); } #footer { padding-bottom: max(5.00rem, 13.33vw); } #footer .footer-inner { flex-direction: column; align-items: flex-start; justify-content: unset; padding: 0 max(2.40rem, 6.40vw) max(6.92rem, 18.45vw); } #footer .footer-logo { width: max(10.00rem, 26.67vw); aspect-ratio: 92/17; margin-bottom: max(1.30rem, 3.47vw); } #footer .company-info-description { font-size: max(1.00rem, 2.67vw); font-weight: 500; margin-bottom: max(3.00rem, 8.00vw); } #footer .social-link-group { gap: max(1.20rem, 3.20vw); } #footer .social-link-group .social-link-item { width: max(3.20rem, 8.53vw); } }