/* ============================================================ * MAX SUMMIT 2026 Design Renewal * * 이 파일은 기존 main.css를 override합니다. * HTML 에서 main.css 뒤에 로드되어 cascade로 우선 적용됩니다. * * 작업 완료 시: * 1. 모든 selector가 이 파일에 override되었는지 확인 * 2. 기존 main.css 삭제 * 3. 이 파일을 main.css로 rename * 4. HTML link 정리 * ============================================================ */ /* ============================================================ * Design Tokens * ============================================================ */ :root { /* === Brand Gradient === */ --ms-color-primary-start: #ef5788; --ms-color-primary-mid: #fc4750; --ms-color-primary-end: #ff803d; --ms-gradient: linear-gradient( 90deg, var(--ms-color-primary-start) 0%, var(--ms-color-primary-mid) 51.442%, var(--ms-color-primary-end) 100% ); /* === Text Colors === */ --ms-color-text-strong: #111; --ms-color-text-base: #222; --ms-color-text-secondary: #333; --ms-color-text-muted: #444; --ms-color-white-70: rgba(255, 255, 255, 0.7); /* === Backgrounds === */ --ms-color-bg-light: #f8f8f8; --ms-color-bg-white: #fff; --ms-color-bg-dark: #111; /* === Typography (clamp로 781~1600 사이에서 자동 축소) === */ --ms-font-primary: "Pretendard", sans-serif; --ms-font-display: "GMarketSans", "Gmarket Sans", sans-serif; --ms-fs-display: clamp(40px, 3.75vw, 60px); /* 섹션 메가 타이틀 60→40 */ --ms-fs-heading-1: clamp(28px, 2.5vw, 40px); /* 큰 헤드라인 40→28 */ --ms-fs-heading-2: clamp(24px, 2.25vw, 36px); /* 서브 헤드라인 36→24 */ --ms-fs-body-lg: clamp(20px, 1.75vw, 28px); /* 큰 본문 28→20 */ --ms-fs-body: clamp(18px, 1.6vw, 26px); /* 본문 26→18 */ --ms-fs-body-sm: clamp(18px, 1.5vw, 24px); /* 작은 본문 24→18 */ --ms-fs-caption: clamp(16px, 1.25vw, 20px); /* 캡션 20→16 */ --ms-fs-meta: clamp(14px, 1vw, 16px); /* 메타 16→14 */ /* === Layout === */ --ms-container-width: 1540px; --ms-section-padding-y: 100px; --ms-radius-card: 8px; --ms-radius-ticket: 16px; } /* ============================================================ * Utility Classes * ============================================================ */ .ms-gradient-text { background: var(--ms-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; } .ms-gradient-bg { background: var(--ms-gradient); } /* ============================================================ * Layout primitives * ============================================================ */ .ms-section { width: 100%; padding: var(--ms-section-padding-y) 0; text-align: center; font-family: var(--ms-font-primary); } .ms-container { width: 100%; max-width: var(--ms-container-width); margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .ms-section__title { font-family: var(--ms-font-primary); font-size: var(--ms-fs-display); font-weight: 700; letter-spacing: -1.2px; line-height: 1.2; margin: 0 0 48px; color: var(--ms-color-text-base); display: inline-block; position: relative; } /* 기존 main.css의 #main h2:not(.no-dot)::before 점 제거 */ .ms-section__title::before { display: none !important; content: none !important; } .ms-section__title--gradient { font-weight: 800; background: var(--ms-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 42px; } /* ============================================================ * #con02 — 소개글 (Intro) * ============================================================ */ #con02 { position: relative; background-color: var(--ms-color-bg-light); padding: var(--ms-section-padding-y) 0; background-image: none; color: var(--ms-color-text-strong); overflow: hidden; } #con02::before { content: ""; position: absolute; left: -268px; bottom: -40px; width: 881px; height: 791px; background-image: url(../images/2026/renewal/intro-bg-left.svg); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } #con02::after { content: ""; position: absolute; right: -345px; top: -245px; width: 758px; height: 726px; background-image: url(../images/2026/renewal/intro-bg-right.svg); background-repeat: no-repeat; background-size: contain; transform: rotate(30deg); transform-origin: center; pointer-events: none; z-index: 0; } #con02 .ms-container { position: relative; z-index: 1; } #con02 .ms-intro { display: flex; flex-direction: column; gap: 34px; align-items: center; } #con02 .ms-intro__lead { width: 100%; text-align: center; } #con02 .ms-intro__headline { font-family: var(--ms-font-primary); font-size: var(--ms-fs-heading-1); font-weight: 600; letter-spacing: -0.8px; line-height: 1.2; color: var(--ms-color-text-strong); margin: 0 0 20px; } #con02 .ms-intro__subhead { font-family: var(--ms-font-primary); font-size: var(--ms-fs-body-lg); font-weight: 400; line-height: 1.5; color: var(--ms-color-text-muted); margin: 0; letter-spacing: -0.5px; } #con02 .ms-intro__body { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 24px; text-align: center; } #con02 .ms-intro__body p.ms-intro__tagline, #con02 .ms-intro__tagline { font-family: var(--ms-font-primary); font-size: var(--ms-fs-heading-2) !important; font-weight: 500; line-height: 1.3; margin: 0; background: var(--ms-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; align-self: center; } /* #main p:not(.banner-txt)와 동일한 반응형 사이즈 적용 */ #con02 .ms-intro__body p.ms-intro__text, #con02 .ms-intro__text { font-family: var(--ms-font-primary); font-size: 26px !important; font-weight: 400; line-height: 1.6; color: var(--ms-color-text-muted); margin: 0; letter-spacing: -2px; } @media screen and (min-width: 781px) and (max-width: 1600px) { #con02 .ms-intro__body p.ms-intro__text, #con02 .ms-intro__text { font-size: 20px !important; letter-spacing: -1px; } } #con02 .ms-intro__text b { font-weight: 700; color: var(--ms-color-text-secondary); } #con02 .ms-intro__caption { font-family: var(--ms-font-primary); font-size: var(--ms-fs-caption); line-height: 1.5; color: var(--ms-color-text-secondary); margin: 12px 0 0; font-weight: 400; } #con02 .ms-intro__caption b { font-weight: 700; } /* Mobile */ @media screen and (max-width: 780px) { #con02 { padding: 15vw 0; } #con02::before, #con02::after { display: none; } #con02 .ms-section__title { font-size: 9vw; margin-bottom: 6vw; letter-spacing: -0.3vw; } #con02 .ms-intro { gap: 6vw; } #con02 .ms-intro__headline { font-size: 6vw; letter-spacing: -0.15vw; margin-bottom: 3vw; } #con02 .ms-intro__subhead { font-size: 4vw; line-height: 1.5; } #con02 .ms-intro__tagline { font-size: 5.5vw; line-height: 1.2; } #con02 .ms-intro__body p.ms-intro__text, #con02 .ms-intro__text { font-size: 4vw !important; letter-spacing: -1px; line-height: 1.6; } #con02 .ms-intro__caption { font-size: 3.5vw; } } /* ============================================================ * #con03 — REGISTRATION (Tickets) * ============================================================ */ #con03 { background-color: var(--ms-color-bg-white); padding: var(--ms-section-padding-y) 0; background-image: none; } #con03 .ms-registration__lead { max-width: 1200px; margin: 0 auto 48px; font-family: var(--ms-font-primary); font-size: var(--ms-fs-body); font-weight: 500; line-height: 1.5; color: var(--ms-color-text-base); letter-spacing: -0.52px; } #con03 .ms-ticket-list { list-style: none; margin: 0 auto !important; padding: 0 !important; display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; width: 924px; max-width: 100%; text-align: center; } #con03 .ms-ticket { width: 446px; list-style: none; filter: drop-shadow(0 6px 24px rgba(252, 71, 80, 0.18)); } #con03 .ms-ticket img { display: block; width: 100%; height: auto; margin: 0; } #con03 .ms-ticket__discount { display: flex; align-items: flex-end; gap: 4px; } #con03 .ms-ticket__vat { font-family: var(--ms-font-primary); font-weight: 500; font-size: var(--ms-fs-meta); color: var(--ms-color-white-70); margin-bottom: 6px; } #con03 .ms-ticket__amount { font-family: var(--ms-font-display); font-weight: 700; font-size: 48px; color: #fff; line-height: 1; letter-spacing: -1px; } #con03 .ms-ticket__amount em { font-style: normal; font-weight: 300; margin-left: 2px; } #con03 .ms-registration__note { margin: 48px auto 0; font-family: var(--ms-font-primary); font-size: var(--ms-fs-body); font-weight: 600; line-height: 40px; color: var(--ms-color-text-base); } #con03 .ms-registration__cta { margin-top: 32px; } /* ============================================================ * Buttons * ============================================================ */ .ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: clamp(12px, 1.25vw, 20px); height: clamp(60px, 5.25vw, 84px); min-width: clamp(280px, 24.6vw, 394px); padding: 0 clamp(20px, 2vw, 32px); border-radius: var(--ms-radius-card); font-family: var(--ms-font-primary); font-size: var(--ms-fs-body-sm); font-weight: 600; letter-spacing: -1.44px; text-decoration: none; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; box-sizing: border-box; } .ms-btn span { font-size: inherit; } .ms-btn--outline { border: 1px solid var(--ms-color-primary-start); background-color: #fff; } .ms-btn--outline .ms-btn__label { background: var(--ms-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ms-btn__arrow { display: inline-block; width: 10px; height: 20px; background-image: url(../images/2026/renewal/btn-arrow.svg); background-repeat: no-repeat; background-size: 100% 100%; font-size: 0; line-height: 0; text-indent: -9999px; } .ms-btn--outline:hover { filter: brightness(1.02); box-shadow: 0 6px 24px rgba(252, 71, 80, 0.18); transform: translateY(-1px); } .ms-btn--solid { background: var(--ms-gradient); color: #fff; border: none; box-shadow: 0 4px 20px rgba(252, 71, 80, 0.25); } .ms-btn--solid:hover { filter: brightness(1.08); box-shadow: 0 6px 28px rgba(252, 71, 80, 0.4); transform: translateY(-1px); } /* ============================================================ * #con04 — SPONSOR / AFFILIATE (Logo grids) * ============================================================ */ #con04 { background-color: var(--ms-color-bg-white); padding: 184px 0 0; background-image: none; text-align: center; } #con04 .ms-section__title { font-size: var(--ms-fs-display); margin-bottom: 60px; } /* SPONSOR/AFFILIATE 블록 사이 간격 (CTA 배너가 사이에 있어서 0) */ #con04 .ms-affiliate-block { margin-top: 0; text-align: left; } #con04 .ms-affiliate-block .ms-section__title { display: block; text-align: center; } .ms-logo-grid { list-style: none; margin: 0 auto; padding: 0; width: 1280px; max-width: 100%; display: flex; align-items: center; flex-wrap: nowrap; } .ms-logo-grid li { display: flex; align-items: center; justify-content: center; height: clamp(80px, 7vw, 120px); } .ms-logo-grid a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: opacity 0.2s ease; width: 100%; } .ms-logo-grid a:hover { opacity: 0.7; } .ms-logo-grid img { max-height: clamp(70px, 6vw, 100px); width: auto; max-width: 100%; object-fit: contain; } /* SPONSOR — 한 줄 5개 균등 배치 */ .ms-logo-grid--sponsor { justify-content: space-between; gap: 24px; } .ms-logo-grid--sponsor li { flex: 1 1 0; min-width: 0; } .ms-logo-grid--sponsor li:first-of-type img { width: 25% !important; } /* AFFILIATE — 좌측 정렬, SPONSOR와 동일한 로고 크기 */ .ms-logo-grid--affiliate { justify-content: flex-start; gap: 72px; } .ms-logo-grid--affiliate li { height: clamp(80px, 7vw, 120px); flex: 0 0 auto; } .ms-logo-grid--affiliate img { max-height: clamp(70px, 6vw, 100px); } .ms-logo-grid--affiliate li:first-of-type img { width: 80% !important; } /* AFFILIATE notice — 텍스트는 중앙, 로고만 좌측 (별도) */ .ms-affiliate__notice { width: 100%; max-width: none; margin: 80px auto 0 !important; text-align: center !important; font-family: var(--ms-font-primary); font-size: var(--ms-fs-caption); line-height: 1.6; color: var(--ms-color-text-base); } .ms-affiliate__notice strong { display: block; margin-bottom: 20px; font-weight: 700; font-size: var(--ms-fs-body); color: var(--ms-color-text-strong); line-height: 1.4; letter-spacing: -0.5px; } .ms-affiliate__cta { margin-top: 48px; display: flex; justify-content: center; } /* ============================================================ * #con04 — SPONSOR/AFFILIATE 모집 그라디언트 CTA 배너 * ============================================================ */ .ms-sponsor-cta { position: relative; margin: 80px 0 100px; padding: 120px 20px 96px; background: var(--ms-gradient); text-align: center; overflow: hidden; isolation: isolate; font-family: var(--ms-font-primary); } .ms-sponsor-cta::before { content: ""; position: absolute; inset: 0; background-image: url(../images/2026/renewal/sponsor-cta-bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; mix-blend-mode: color-dodge; opacity: 0.55; pointer-events: none; z-index: 0; } .ms-sponsor-cta__inner { position: relative; z-index: 1; width: 100%; max-width: var(--ms-container-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; } .ms-sponsor-cta__title { margin: 0; color: #fff; font-family: var(--ms-font-primary); font-weight: 700; font-size: clamp(28px, 3vw, 48px); line-height: 1.25; letter-spacing: -0.96px; word-break: keep-all; } .ms-sponsor-cta__desc { margin: 0; color: #fff !important; font-family: var(--ms-font-primary); font-weight: 600; font-size: clamp(16px, 1.7vw, 26px); line-height: 1.5; letter-spacing: -0.3px; word-break: keep-all; } .ms-sponsor-cta__btn { margin-top: 0; display: flex; justify-content: center; } /* White button with gradient text (for use over gradient backgrounds) */ .ms-btn--white { background-color: #fff; border: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .ms-btn--white .ms-btn__label { background: var(--ms-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; } .ms-btn--white:hover { filter: brightness(1.02); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } /* #con04 하단 여백 (banner fixed 가림 방지) */ #con04 { /* padding-bottom: 320px; */ } /* ============================================================ * #con01 — z-index 최상위 (banner보다 위) * ============================================================ */ #con01 { position: relative; z-index: 200; } #con01 .con01-wrap { position: relative; z-index: 200; } /* ============================================================ * .banner — 그라디언트 + z-index 높임 + 양옆 배치 * ============================================================ */ .banner { background: var(--ms-color-bg-dark); background-image: none; z-index: 100; opacity: 1; transition: opacity 0.35s ease, visibility 0.35s ease; visibility: visible; } .banner.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } .banner > div { justify-content: space-between !important; padding: 0 40px; box-sizing: border-box; width: 100%; max-width: var(--ms-container-width); } /* banner가 페이지 하단에 fixed로 붙어있어 마지막 섹션 가림 방지를 위한 여백 */ footer.ms-footer { padding-bottom: 60px; } /* ============================================================ * Top Button — 단색 #d50462 (시안 톤) * ============================================================ */ .page_top { width: 52px !important; height: 52px !important; right: 30px !important; bottom: 170px !important; background: #d50462 !important; background-image: none !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(213, 4, 98, 0.25) !important; text-align: center !important; /* 깜빡임 효과 영원히 금지 — opacity 항상 1로 강제 (display는 JS hide/show가 제어) */ opacity: 1 !important; transition: none !important; animation: none !important; } .page_top i { font-size: 28px !important; color: #fff !important; line-height: 52px !important; margin: 0 !important; padding: 0 !important; } .page_top:hover { background: #d50462 !important; background-image: none !important; box-shadow: 0 4px 12px rgba(213, 4, 98, 0.25) !important; } .page_top:hover i { color: #fff !important; } /* Header 페이스북 버튼 컬러도 동일하게 */ .header.fix .bt_fb { background: #d50462 !important; } /* Mobile — #con04 / banner */ @media screen and (max-width: 780px) { #con04 { padding: 15vw 0 0; } #con04 .ms-section__title { font-size: 9vw; margin-bottom: 6vw; letter-spacing: -0.3vw; } #con04 .ms-affiliate-block { margin-top: 0; margin-bottom: 20vw; } .ms-sponsor-cta { margin: 15vw 0; padding: 18vw 6vw 14vw; } .ms-sponsor-cta__inner { gap: 6vw; } .ms-sponsor-cta__title { font-size: 6vw; letter-spacing: -0.2vw; line-height: 1.3; } .ms-sponsor-cta__desc { font-size: 3.8vw; line-height: 1.5; } .ms-logo-grid { gap: 5vw 8vw; padding: 0 4vw; } .ms-logo-grid li { height: 16vw; } .ms-logo-grid img { max-height: 14vw; } /* 모바일에서 SPONSOR — 한 줄 4개 + 다음 줄 1개 */ .ms-logo-grid--sponsor { flex-wrap: wrap; justify-content: flex-start; gap: 4vw 0; padding: 0; } .ms-logo-grid--sponsor li { flex: 0 0 25%; width: 25%; } /* 첫 번째(X코리아) 정방형 로고만 크기 축소 */ .ms-logo-grid--sponsor li:first-child img { max-height: 9vw; max-width: 60%; } .ms-logo-grid--sponsor li:first-of-type img { width: 30% !important; } .ms-logo-grid--affiliate li:first-of-type img { width: 100% !important; } /* 모바일 화살표 더 작게 */ .ms-btn__arrow { width: 7px; height: 14px; } /* #con01 .pdf — 모바일에서 더 통통하게 + 아이콘 작게 */ #con01 .pdf { padding: 4vw 0 !important; } #con01 .pdf::after { width: 3.5vw !important; height: 5.5vw !important; margin: -1vw -2vw 0 3vw !important; } .ms-logo-grid--affiliate li { height: 18vw; max-width: 36vw; } .ms-logo-grid--affiliate img { max-height: 16vw; } .ms-affiliate__notice { font-size: 3.6vw !important; margin: 10vw auto 0 !important; padding: 0 4vw; text-align: center !important; width: 90% !important; } .ms-affiliate__notice strong { font-size: 4.5vw; } .ms-affiliate__cta { margin-top: 8vw !important; margin-bottom: 6vw; } footer.ms-footer { padding-bottom: 12vw; } .page_top { width: 11vw !important; height: 11vw !important; right: 4vw !important; bottom: 10vw !important; } .page_top i { font-size: 7vw !important; line-height: 1.5 !important; } } /* ============================================================ * #con05 — MAX SUMMIT MOMENTS (slider) * ============================================================ */ #con05 { background-color: var(--ms-color-bg-light); padding: 140px 0 100px; background-image: none; } #con05 .ms-section__title { font-size: 60px; font-weight: 700; color: var(--ms-color-text-base); letter-spacing: -1.2px; margin: 0 0 16px; background: none; -webkit-text-fill-color: initial; } #con05 .ms-section__title::before { display: none !important; content: none !important; } .ms-section__subtitle { font-family: var(--ms-font-primary); font-size: var(--ms-fs-caption); font-weight: 400; color: var(--ms-color-text-secondary); line-height: 30px; margin: 0 0 40px; } /* Slick — 화살표/dot 컬러 시안 톤앤매너로 */ #con05 .img-wrap .slick-prev::after, #con05 .img-wrap .slick-next::after { color: var(--ms-color-primary-mid); } #con05 .img-wrap .slick-dots button { background-color: #fbd4dd; } #con05 .img-wrap .slick-active button { background: var(--ms-gradient); background-color: var(--ms-color-primary-mid); } /* Mobile — #con05 */ @media screen and (max-width: 780px) { #con05 { padding: 15vw 0 12vw; } #con05 .ms-section__title { font-size: 9vw; letter-spacing: -0.3vw; margin-bottom: 2vw; } .ms-section__subtitle { font-size: 3.6vw; line-height: 1.5; margin-bottom: 6vw; } #con05 .img-wrap img { border-radius: 2vw !important; } } /* ============================================================ * AWARD page — overrides for legacy main.css (intro/process only) * - #award01 (Hero) is NOT touched; keep existing design * ============================================================ */ #award #award02 { padding: var(--ms-section-padding-y) 0; background-color: #fff; text-align: left; } #award #award05 { padding-top: var(--ms-section-padding-y); padding-bottom: var(--ms-section-padding-y); background-color: var(--ms-color-bg-light); } /* Neutralize legacy #award05 inner styling that would leak through */ #award #award05 ul li { display: block; border-top: 0; border-bottom: 0; margin-bottom: 0; } #award #award05 ul li:not(:last-child) { margin-bottom: 0; } #award #award05 ul li b { display: inline-block; width: auto; padding: 0; margin: 0; border: 0; font-size: inherit; font-weight: inherit; color: inherit; text-align: inherit; } #award #award05 ul li b span { width: auto; padding: 0; margin: 0; border: 0; border-radius: 0; font-size: inherit; color: inherit; text-align: inherit; } #award #award05 ul li > div { width: auto; padding-left: 0; } #award #award05 ul li:not(:last-child)::after, #award #award05 ul p::before, #award #award05 > p span::before { content: none !important; display: none !important; background: none !important; } #award #award05 ul p { padding-left: 0; text-align: inherit; font-size: inherit; } #award #award05 > p { width: auto; margin: 0; text-align-last: left; } #award #award05 > p span { display: inline; padding-left: 0; font-size: inherit; color: inherit; } #award #award02 > h2, #award #award05 > h2 { margin: 0 0 48px; color: var(--ms-color-text-base); font-size: var(--ms-fs-display); font-weight: 700; letter-spacing: -1.2px; line-height: 1.2; text-align: center; text-transform: none; } #award #award02 > h2::before, #award #award05 > h2::before { display: none !important; content: none !important; } /* legacy #award p has font-size:24px; reset only inside the new sections */ #award #award02 p, #award #award05 p { font-size: inherit; color: inherit; line-height: inherit; } /* ============================================================ * AWARD page — Intro (#award02) * ============================================================ */ .ms-award-intro { background-color: #fff; padding: var(--ms-section-padding-y) 0; text-align: left; } .ms-award-intro__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; } .ms-award-intro__title { flex: 0 0 auto; width: 38%; max-width: 524px; text-align: left; margin: 0; font-family: var(--ms-font-primary); font-weight: 800; font-size: clamp(40px, 4.5vw, 72px); line-height: 1.15; letter-spacing: -1.5px; background: var(--ms-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: block; } .ms-award-intro__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; font-family: var(--ms-font-primary); font-size: var(--ms-fs-body); line-height: 1.7; color: var(--ms-color-text-base); letter-spacing: -0.5px; } .ms-award-intro__body p { margin: 0; text-align: left; word-break: keep-all; } /* ============================================================ * AWARD page — Process (#award05) * ============================================================ */ .ms-award-process { background-color: var(--ms-color-bg-light); padding: var(--ms-section-padding-y) 0; } .ms-award-process .ms-section__title { margin-bottom: 64px; } .ms-award-steps { list-style: none; margin: 0 auto 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ms-award-step { background-color: #fffefa; border-radius: var(--ms-radius-card); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06); padding: 24px; text-align: left; display: flex; flex-direction: column; gap: 12px; min-height: 300px; box-sizing: border-box; position: relative; } /* STEP pill + title stacked vertically (pill on top, title below) */ .ms-award-step__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 20px; } .ms-award-step__num { display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: 999px; font-family: var(--ms-font-primary); font-weight: 700; font-size: 14px; letter-spacing: -0.3px; color: #fff; background: var(--ms-gradient); white-space: nowrap; line-height: 1; } #award #award05 .ms-award-step__title { margin: 0; font-family: var(--ms-font-primary); font-weight: 600; font-size: clamp(22px, 1.95vw, 30px); line-height: 1.25; color: var(--ms-color-text-base); letter-spacing: -0.5px; } #award #award05 .ms-award-step__desc { margin: 0; padding: 8px 0 0; font-family: var(--ms-font-primary); font-weight: 400; font-size: clamp(15px, 1.3vw, 20px); line-height: 1.6; color: var(--ms-color-text-secondary); letter-spacing: -0.3px; word-break: keep-all; } /* Suppress legacy ::after chevron-down indicator on every step card */ #award #award05 ul li.ms-award-step::after { content: none !important; display: none !important; } .ms-award-notice { list-style: none; margin: 8px 0 40px; padding: 24px 0 0; text-align: left; /* border-top: 1px solid #e5e5e5; */ } .ms-award-notice li { position: relative; padding-left: 18px; font-family: var(--ms-font-primary); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.7; color: #555; letter-spacing: -0.3px; margin-bottom: 4px; word-break: keep-all; } .ms-award-notice li::before { content: ""; position: absolute; top: 0.85em; left: 4px; width: 4px; height: 4px; border-radius: 50%; background-color: #555; } .ms-award-process__cta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 150px; } .ms-award-process__cta .ms-btn--solid .ms-btn__label { color: #fff; } .ms-award-process__cta .ms-btn__arrow { background-image: url(../images/2026/renewal/btn-arrow.svg); } .ms-award-process__cta .ms-btn--solid .ms-btn__arrow { filter: brightness(0) invert(1); } /* ============================================================ * AWARD page — Tablet (781px ~ 1600px) * 4-column row is too cramped, switch to 2x2 grid. * Visual order: STEP1 → STEP2 * ↓ * STEP4 ← STEP3 * DOM is 1,2,3,4 — use `order` to reposition 3 and 4. * ============================================================ */ @media screen and (min-width: 781px) and (max-width: 1600px) { .ms-award-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 80px; } .ms-award-step { min-height: 220px; } /* Reorder: STEP3 (3rd DOM) → bottom-right (slot 4), STEP4 (4th DOM) → bottom-left (slot 3) */ #award #award05 .ms-award-step:nth-child(3) { order: 4; } #award #award05 .ms-award-step:nth-child(4) { order: 3; } /* Arrows — chevron, light pink (#FFC4C4) STEP1 → right, STEP2 → down, STEP3 → left Use double-class for specificity to beat legacy ::after rule. */ #award #award05 ul li.ms-award-step.ms-award-step:nth-child(1)::after, #award #award05 ul li.ms-award-step.ms-award-step:nth-child(2)::after, #award #award05 ul li.ms-award-step.ms-award-step:nth-child(3)::after { content: "" !important; display: block !important; position: absolute !important; background-image: url(../images/2026/renewal/award-arrow.svg) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; background-color: transparent !important; pointer-events: none; margin: 0 !important; border: 0 !important; border-radius: 0 !important; } /* STEP 1 → STEP 2 : right arrow */ #award #award05 ul li.ms-award-step.ms-award-step:nth-child(1)::after { top: 50% !important; left: auto !important; right: -48px !important; bottom: auto !important; width: 16px !important; height: 24px !important; transform: translateY(-50%) rotate(180deg) !important; } /* STEP 2 → STEP 3 : down arrow under top-right card Box dims match SVG aspect (16×24) and rotated -90deg to point down. transform-origin: center to keep arrow centered after rotation. */ #award #award05 ul li.ms-award-step.ms-award-step:nth-child(2)::after { top: auto !important; right: auto !important; bottom: -36px !important; left: 50% !important; width: 16px !important; height: 24px !important; margin-left: -8px !important; transform: rotate(-90deg) !important; transform-origin: center !important; } /* STEP 3 → STEP 4 : left arrow between bottom cards (STEP3 is bottom-right after reorder) */ #award #award05 ul li.ms-award-step.ms-award-step:nth-child(3)::after { top: 50% !important; right: auto !important; bottom: auto !important; left: -48px !important; width: 16px !important; height: 24px !important; transform: translateY(-50%) !important; } } /* ============================================================ * AWARD page — Mobile responsive * ============================================================ */ @media screen and (max-width: 780px) { /* Intro */ .ms-award-intro { padding: 15vw 0; } .ms-award-intro__inner { flex-direction: column; align-items: flex-start; gap: 6vw; padding: 0 4vw; } .ms-award-intro__title { width: 100%; max-width: none; font-size: 9vw; line-height: 1.15; letter-spacing: -0.3vw; text-align: left; } .ms-award-intro__body { gap: 4vw; font-size: 4vw; line-height: 1.7; } /* Process */ .ms-award-process { padding: 15vw 0; } .ms-award-process .ms-section__title { font-size: 9vw; letter-spacing: -0.3vw; margin-bottom: 8vw; } .ms-award-steps { grid-template-columns: 1fr; gap: 10vw 4vw; padding: 0 4vw; } .ms-award-step { padding: 6vw 5vw; min-height: auto; gap: 3vw; border: 0 !important; /* box-shadow: none; */ } .ms-award-step__head { gap: 3vw; padding: 0 2vw; } .ms-award-step__num { padding: 1.5vw 5vw; font-size: 3.4vw; } .ms-award-step__title { font-size: 5vw; } .ms-award-step__desc { padding: 2vw 2vw 0; font-size: 3.8vw; line-height: 1.6; } /* Down arrows between cards (1→2, 2→3, 3→4). Last card (STEP 4) has no arrow. */ #award #award05 ul li.ms-award-step.ms-award-step:nth-child(1)::after, #award #award05 ul li.ms-award-step.ms-award-step:nth-child(2)::after, #award #award05 ul li.ms-award-step.ms-award-step:nth-child(3)::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; bottom: -7.5vw !important; width: 4vw !important; height: 6vw !important; margin-left: -2vw !important; background-image: url(../images/2026/renewal/award-arrow.svg) !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; background-color: transparent !important; pointer-events: none; border: 0 !important; border-radius: 0 !important; transform: rotate(-90deg) !important; transform-origin: center !important; } .ms-award-notice { margin: 6vw auto 8vw; padding: 4vw 4vw 0; border: none; } .ms-award-notice li { font-size: 3.4vw; padding: 0 0 0 3vw !important; border: none !important; } .ms-award-notice li::before { top: 2.4vw; left: 0.5vw; width: 1vw; height: 1vw; } .ms-award-process__cta { flex-direction: column; align-items: center; gap: 3vw; padding: 0 4vw; margin-top: 10vw; } } /* ============================================================ * Footer * ============================================================ */ .ms-footer { background-color: var(--ms-color-bg-dark); padding: 60px 0; color: #fff; font-family: var(--ms-font-primary); } .ms-footer__inner { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; text-align: left; } .ms-footer__title { font-family: var(--ms-font-primary); font-weight: 700; font-size: 32px; line-height: 1.3; color: #fff; letter-spacing: -0.5px; margin: 0; } .ms-footer__links { display: flex; align-items: center; gap: 20px; font-size: var(--ms-fs-caption); color: rgba(255, 255, 255, 0.85); flex-wrap: wrap; } .ms-footer__links a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s ease; } .ms-footer__links a:hover { color: #fff; } .ms-footer__sep { color: rgba(255, 255, 255, 0.3); } /* Mobile — Footer */ @media screen and (max-width: 780px) { .ms-footer { padding: 10vw 0; text-align: center; } .ms-footer__inner { padding: 0 4vw; gap: 3vw; align-items: center; text-align: center; } .ms-footer__title { font-size: 6vw; } .ms-footer__links { font-size: 3.6vw; gap: 3vw; justify-content: center; } } /* Mobile — #con03 */ @media screen and (max-width: 780px) { #con03 { padding: 15vw 0; } #con03 .ms-section__title { font-size: 9vw; margin-bottom: 6vw; letter-spacing: -0.3vw; } #con03 .ms-registration__lead { font-size: 4vw; line-height: 1.6; padding: 0 4vw; margin-bottom: 8vw; } #con03 .ms-ticket-list { flex-direction: column; align-items: center; gap: 4vw; padding: 0 4vw; width: 100% !important; max-width: 100% !important; } #con03 .ms-ticket { width: 70vw; max-width: 340px; } #con03 .ms-registration__note { font-size: 4vw; line-height: 1.5; margin-top: 8vw; padding: 0 4vw; } .ms-btn { height: 14vw; min-width: 70vw; font-size: 4.5vw; letter-spacing: -0.5vw; gap: 4vw; } } /* ============================================================ * SPEAKERS page — Compact page hero + speaker card grid * - Keeps existing `ul.speakers > li > img + div > strong + p` markup * - Adds .ms-page-hero + .ms-speaker-grid wrappers * - Restyles via legacy class selectors * ============================================================ */ /* Page bg: legacy #speakers has #c70935 + bg image — neutralize to white */ #speakers { background-color: #fff !important; background-image: none !important; } /* Legacy `#speakers p:not(.banner-txt) { font-size:26px; color:#000; letter-spacing:-1px; text-transform:uppercase }` would mangle our text */ #speakers .ms-page-hero p:not(.banner-txt), #speakers .ms-speakers p:not(.banner-txt) { font-size: inherit; color: inherit; letter-spacing: inherit; text-transform: none; } /* ---- Compact page hero (dark photo banner) ---- */ /* Override legacy `#con01 h1` (text-indent:-99999px + bg image). Re-apply white text in the same rule to win specificity. */ #speakers #con01.ms-page-hero .ms-page-hero__title { width: auto; height: auto; margin: 0; text-indent: 0; background: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #fff; color: #fff; text-transform: uppercase; } /* Override legacy #speakers #con01 (display:flex + 50vh + 200px padding) */ #speakers #con01.ms-page-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; height: 320px; padding: 0 20px; background-color: #1a1a1a; background-image: url(../images/2026/sub/bg.png); background-repeat: no-repeat; background-position: center 80%; background-size: cover; text-align: center; overflow: hidden; isolation: isolate; font-family: var(--ms-font-primary); } /* Dark overlay to ensure title legibility on top of photo */ #speakers #con01.ms-page-hero::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 0; } .ms-page-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .ms-page-hero__title { margin: 0; font-family: var(--ms-font-primary); font-weight: 800; font-size: clamp(48px, 5vw, 80px); line-height: 1; letter-spacing: -1px; color: #fff; text-transform: uppercase; } /* ---- Speakers section + grid (overrides legacy #speakers #con02 / ul.speakers) ---- */ /* #con02 에는 메인 페이지에서 정의된 ::before/::after 인트로 SVG 데코가 살아있음. speakers 페이지에서도 그대로 보이도록 두되, overflow:hidden 으로 푸터 침범 방지. */ #speakers #con02.ms-speakers { position: relative; width: 100%; margin: 0; padding: 80px 0 120px; background: #fff; background-image: none; overflow: hidden; } #speakers #con02.ms-speakers > .ms-container { text-align: left; } /* Override legacy `#speakers ul.speakers` (display:flex; 1445px wide; bg-color:#fff; padding:20px) */ #speakers ul.speakers.ms-speaker-grid { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; background: transparent; } /* Override legacy `#speakers ul.speakers li` (width:350px; margin-right:15px; padding-bottom:50px) */ #speakers ul.speakers.ms-speaker-grid > li { width: auto; margin: 0; padding: 0; background: transparent; border-radius: 0; overflow: visible; text-align: center; display: flex; flex-direction: column; align-items: center; } /* Circular photo with B&W → color on hover (image-only, no card lift) */ #speakers ul.speakers.ms-speaker-grid > li > img { display: block; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; object-fit: cover; object-position: center top; background-color: #f0f0f0; filter: grayscale(1); transition: filter 0.4s ease; } #speakers ul.speakers.ms-speaker-grid > li > img:hover { filter: grayscale(0); } /* 원형 프레임 안에서 이미지만 확대 (민형필 등). 래퍼가 원형 클립을 담당. */ #speakers ul.speakers.ms-speaker-grid > li > .ms-photo-zoom { display: block; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #f0f0f0; overflow: hidden; position: relative; } #speakers ul.speakers.ms-speaker-grid > li > .ms-photo-zoom > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); transition: filter 0.4s ease; transform: scale(1.15); transform-origin: center 30%; } #speakers ul.speakers.ms-speaker-grid > li > .ms-photo-zoom:hover > img { filter: grayscale(0); } /* speakers10(김성미) — 더 확대 + 이미지 위/우측으로 이동 */ #speakers ul.speakers.ms-speaker-grid > li > .ms-photo-zoom > img[src$="speakers10.png"] { transform: scale(1.15); transform-origin: 15% 25%; object-position: 60% 15%; } /* Info body */ #speakers ul.speakers.ms-speaker-grid > li > div { padding: 20px 8px 0; width: 100%; text-align: center; } /* Name container — centered, LinkedIn icon inline after name */ #speakers ul.speakers.ms-speaker-grid > li strong { position: relative; display: block; padding: 0; margin: 0 0 6px; font-family: var(--ms-font-primary); font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; color: var(--ms-color-text-strong); text-align: center; } /* LinkedIn icon — inline after the name */ #speakers ul.speakers.ms-speaker-grid > li strong > a { position: static; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: middle; opacity: 0.7; transition: opacity 0.2s ease; } #speakers ul.speakers.ms-speaker-grid > li strong > a:hover { opacity: 1; } #speakers ul.speakers.ms-speaker-grid > li strong > a img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Role */ #speakers ul.speakers.ms-speaker-grid > li strong > span { display: block; padding: 0; margin-top: 8px; font-family: var(--ms-font-primary); font-size: clamp(14px, 1.05vw, 17px); font-weight: 500; line-height: 1.4; color: var(--ms-color-text-secondary); letter-spacing: -0.2px; text-align: center; } /* Company — solid pink */ #speakers ul.speakers.ms-speaker-grid > li strong > .corporation { display: block; width: auto; padding: 0; margin: 4px 0 0; font-family: var(--ms-font-primary); font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; line-height: 1.4; letter-spacing: -0.3px; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #d60460; color: #d60460; text-align: center; text-transform: none; border: 0; border-radius: 0; } /* Bio */ #speakers ul.speakers.ms-speaker-grid > li > div > p { padding: 8px 0 0; margin: 0; font-family: var(--ms-font-primary); font-size: clamp(13px, 0.95vw, 15px); font-weight: 400; line-height: 1.55; color: var(--ms-color-text-muted); letter-spacing: -0.2px; word-break: keep-all; text-transform: none; text-align: center; } /* ---- Coming Soon 카드 (그리드 마지막 placeholder) ---- */ #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming { background: transparent; text-align: center; display: flex; flex-direction: column; align-items: center; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__photo { position: relative; z-index: 1; width: 100%; max-width: 280px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #f0f0f0; border: 1px dashed #d0d0d0; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-sizing: border-box; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__photo-label { font-family: var(--ms-font-primary); font-weight: 600; font-size: clamp(14px, 1.1vw, 18px); letter-spacing: 0.08em; color: #999; text-transform: uppercase; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__body { width: 100%; padding: 20px 8px 0; text-align: center; display: flex; flex-direction: column; gap: 6px; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__title { font-family: var(--ms-font-primary); font-weight: 700; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.2; letter-spacing: -0.3px; color: #d60460; margin: 0 0 8px; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__desc { font-family: var(--ms-font-primary); font-weight: 400; font-size: clamp(13px, 0.95vw, 15px); line-height: 1.6; color: var(--ms-color-text-muted); letter-spacing: -0.2px; margin: 0; word-break: keep-all; } /* Tablet — 3 columns */ @media screen and (min-width: 781px) and (max-width: 1200px) { #speakers ul.speakers.ms-speaker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Mobile — 1-column 가로 카드 (사진 왼쪽, 정보 오른쪽) + 무한 스크롤 */ @media screen and (max-width: 780px) { #speakers #con01.ms-page-hero { height: 50vw; padding: 0; } .ms-page-hero__title { font-size: 10vw; letter-spacing: -0.4vw; } .ms-page-hero__inner { margin-top: 5vw; } #speakers #con02.ms-speakers { padding: 8vw 0 18vw; } /* 1-column 카드 (가로 레이아웃) */ #speakers ul.speakers.ms-speaker-grid { grid-template-columns: 1fr; gap: 0; } #speakers ul.speakers.ms-speaker-grid > li { flex-direction: row; align-items: center; gap: 5vw; text-align: left; /* max-width: 560px; */ width: 100%; margin: 0 auto; padding: 6vw 0; border-bottom: 1px solid #e5e5e5; } #speakers ul.speakers.ms-speaker-grid > li:last-child { border-bottom: none; } #speakers ul.speakers.ms-speaker-grid > li > img, #speakers ul.speakers.ms-speaker-grid > li > .ms-photo-zoom { max-width: 28vw; flex: 0 0 28vw; width: 28vw; } #speakers ul.speakers.ms-speaker-grid > li > div { flex: 1 1 0; min-width: 0; padding: 0; text-align: left; } #speakers ul.speakers.ms-speaker-grid > li strong { text-align: left; font-size: 5vw; margin: 0 0 1.5vw; padding: 0; word-break: keep-all; display: block; border-bottom: 0; } #speakers ul.speakers.ms-speaker-grid > li strong > a { width: 3.6vw; height: 3.6vw; margin-left: 1.5vw; vertical-align: middle; position: relative; top: -0.4vw; } #speakers ul.speakers.ms-speaker-grid > li strong > span { display: block; text-align: left; font-size: 3.6vw; font-weight: 500; color: #555; margin-top: 2vw; line-height: 1.45; } #speakers ul.speakers.ms-speaker-grid > li strong > .corporation { display: block; text-align: left; font-size: 4vw; margin-top: 1vw; } #speakers ul.speakers.ms-speaker-grid > li > div > p { text-align: left; font-size: 3.4vw; line-height: 1.6; padding-top: 3vw; color: #555; word-break: keep-all; } /* Coming Soon 카드 — 모바일 가로 레이아웃 매칭 */ #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming { flex-direction: row; align-items: center; gap: 5vw; text-align: left; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__photo { max-width: 28vw; width: 28vw; flex: 0 0 28vw; margin: 0; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__photo-label { font-size: 3vw; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__body { flex: 1 1 0; min-width: 0; padding: 0; text-align: left; align-items: flex-start; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__title { text-align: left; font-size: 5vw; margin-bottom: 2vw; } #speakers ul.speakers.ms-speaker-grid > li.ms-speaker-coming .ms-speaker-coming__desc { text-align: left; font-size: 3.4vw; line-height: 1.6; } /* 스크롤 진입 페이드인 + 슬라이드업 (모바일 한정). JS observer가 .is-revealed 부착. 기본은 페이드 시작 상태. */ #speakers ul.speakers.ms-speaker-grid > li { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } #speakers ul.speakers.ms-speaker-grid > li.is-revealed { opacity: 1; transform: translateY(0); } }