/* 메인 히어로 01 슬라이드 electronica 2026 전용 스타일 (2026-10-20, kr·en·jpn·chn main.php. 문구는 모든 언어 영어 하나, 글꼴만 언어별)
- 기존 아코디언 히어로(#visual_wrap, {lang}/css/style*.css)는 그대로 두고 이 슬라이드에 필요한 규칙만 더한다.
띠(.bar) = 슬라이드 이름 electronica 2026, 펼친 본문(.txt_area) = 아래 .e26_hero
- 슬라이드가 4 → 5개가 되어 PC 히어로 높이 620 → 650px (띠 30px x 5 + 본문 500px).
태블릿 650px(띠 30 x 5 + 500), 모바일 500px(띠 25 x 5 + 375)은 기존 높이에 그대로 맞는다
- 구성: 배경 사진(main_bg_electronica-2026_20261020e.svg, 1920x500, 왼쪽 흰 패널 + 오른쪽 끝에 붙인 전시장 사진 — 윗부분 정리, 현수막에 공식 흰 로고, B5 안내판 Hall(안내판 오른쪽 끝에서 사진을 자름)) /
문구(HTML 영어 하나. 맨 위는 행사 공식 로고 PNG main_logo_electronica-2026-year-title_568px.png) /
D-day(뮌헨 날짜 기준. 첫 값은 main.php, 1분마다 electronica2026_20261020d.js 가 다시 계산. 행사 중 NOW ON, 끝나면 없음) · 부스 번호 줄(배치도가 숨는 1179px 이하에서만) /
가운데 홀 배치도(main_img_electronica-2026-map_20261020d.svg, PC 1180px 이상만. 핀·고리·B5·동선 움직임은 SVG 안 CSS, 생성기 /var/www/_deploy/build_hero_map_20261020d.py) /
버튼 두 개: 왼쪽 BOOTH DETAILS(전시회 부스 페이지, 새 창) · 오른쪽 ABOV NEWSLETTER(뉴스레터 기사)
- 2026-09-24~27 개발본(css/main-visual-ctrl_20260927.css 의 .hu_banner)을 옮겨 이름만 e26_ 로 바꿨다.
글자 크기는 --u(= 문구 상자 높이 / 390, 1920 화면에서 1px) 배수라 본문 높이에 비례해 줄어든다
- [2026-10-20e] 배경 e판(현수막 공식 로고, 사진 40px 오른쪽), D-day 살짝 위로. 이전 판 electronica2026_20261020d.css
- [2026-10-20d] 배경·배치도 새 판, D-day 는 글자만 강조, 버튼 두 개를 따로(둘 다 화살표·빛 효과). 이전 판 electronica2026_20261020.css
- 운영 CloudFront 는 ?v= 를 무시한다 → 이 파일을 고칠 때는 날짜가 다른 새 파일명으로 복사해서 고칠 것 */
/* 띠 5개가 들어가도록 PC 히어로 높이만 늘린다 (태블릿·모바일은 기존 값과 같음) */
@media screen and (min-width: 1025px) {
#visual_wrap {height: 650px;}
}
/* 이미지 쪽(.visual_img) — 배경은 본문 안 ![]()
가 그리므로 여기는 밝은 바탕색만 */
#visual_wrap .visual_img > li.e26_slide .e26_bg {display: block; height: 100%; margin: 0; background: #f7fafd;}
/* 펼친 본문 전체 */
#visual_wrap .e26_hero {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
--e26-h: 500px; --e26-gap: clamp(24px, 5vw, 96px); --e26-th: calc(var(--e26-h) * .78); --e26-tw: calc(var(--e26-th) * 460 / 390);
--e26-mgap: clamp(20px, 2.3vw, 44px);}
#visual_wrap .e26_hero .e26_bgimg {position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
object-fit: cover; object-position: right center;} /* 20261020d 배경은 사진을 오른쪽 끝에 붙여 그렸다(배치도와 덜 겹치고 B5 안내판도 보임) */
/* 문구 */
#visual_wrap .e26_hero .e26_txt {position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
left: var(--e26-gap); width: var(--e26-tw); min-height: var(--e26-th); --u: calc(var(--e26-th) / 390);
display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; color: #0b3b8c;
font-family: 'Pretendard', 'Noto Sans KR', sans-serif; text-shadow: none;}
/* 언어별 글꼴(각 언어 페이지에 이미 선언된 것, 굵기 400·600): kr/en Pretendard · jpn Pretendard JP · chn Sarasa Gothic SC */
#visual_wrap .e26_hero.e26_lang_jpn .e26_txt {font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif;}
#visual_wrap .e26_hero.e26_lang_chn .e26_txt {font-family: 'Sarasa Gothic SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;}
#visual_wrap .e26_hero .e26_txt * {margin: 0; padding: 0; box-sizing: border-box;}
#visual_wrap .e26_hero .e26_txt > * {flex-shrink: 0;} /* 좁은 화면에서 버튼이 찌그러지지 않게 */
/* 공식 로고(로고·연도·행사 설명) 568x98 — 원본 크기 이하로만 쓴다(더 키우면 흐려진다) */
#visual_wrap .e26_hero .e26_logo {display: block; width: min(calc(442 * var(--u)), 568px); max-width: 100%; height: auto; margin-bottom: calc(26 * var(--u));}
#visual_wrap .e26_hero .e26_title {font-size: calc(38 * var(--u)); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: #0b3b8c;}
#visual_wrap .e26_hero .e26_sub {font-size: calc(19 * var(--u)); font-weight: 400; line-height: 1.35; color: #0b3b8c; margin-top: calc(6 * var(--u));}
#visual_wrap .e26_hero .e26_line {display: block; width: calc(74 * var(--u)); height: 2px; background: #8cc63f;
margin: calc(22 * var(--u)) 0 calc(18 * var(--u));}
#visual_wrap .e26_hero .e26_info {list-style: none;} /* 줄은 div.e26_i — li 를 쓰면 기존 슬라이드 스크립트(.visual_txt li)의 순번이 밀린다 */
#visual_wrap .e26_hero .e26_info .e26_i {display: flex; align-items: center; gap: calc(12 * var(--u));
font-size: calc(18 * var(--u)); font-weight: 600; line-height: 1.25; color: #0b3b8c;}
#visual_wrap .e26_hero .e26_info .e26_i + .e26_i {margin-top: calc(11 * var(--u));}
#visual_wrap .e26_hero .e26_info svg {flex: 0 0 auto; width: calc(25 * var(--u)); height: calc(25 * var(--u));
fill: none; stroke: #3d7fe0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}
#visual_wrap .e26_hero .e26_info svg .dot {stroke-width: 2.2;}
/* 버튼 두 개 (2026-10-20d): 따로 떨어진 알약 두 개. 왼쪽(흰) 전시회 부스 페이지 · 오른쪽(남색) ABOV 뉴스레터.
글자 크기·굵기는 둘이 같다. 둘 다 화살표가 살짝 밀리고 빛이 지나간다. 기존 a 규칙을 이기도록 a.클래스 */
#visual_wrap .e26_hero .e26_btns {display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(38 * var(--u));}
#visual_wrap .e26_hero .e26_btns a {position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: calc(12 * var(--u));
height: calc(48 * var(--u)); padding: 0 calc(24 * var(--u)) 0 calc(28 * var(--u)); border: 1.5px solid #0b3b8c; border-radius: 999px;
font-size: calc(14.5 * var(--u)); font-weight: 600; letter-spacing: .05em; text-decoration: none; outline: none;
transition: background .15s, color .15s, box-shadow .15s;}
#visual_wrap .e26_hero .e26_btns a.e26_btn_l {background: #fff; color: #0b3b8c;}
#visual_wrap .e26_hero .e26_btns a.e26_btn_r {background: #0b3b8c; color: #fff;}
#visual_wrap .e26_hero .e26_btns a svg {flex: 0 0 auto; width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
#visual_wrap .e26_hero .e26_btns a:hover {box-shadow: 0 4px 14px rgba(10, 40, 110, .28);}
#visual_wrap .e26_hero .e26_btns a.e26_btn_l:hover {background: #eef4fc; color: #1f5fae;}
#visual_wrap .e26_hero .e26_btns a.e26_btn_r:hover {background: #1f5fae; border-color: #1f5fae;}
#visual_wrap .e26_hero .e26_btns a:focus-visible {box-shadow: 0 0 0 3px rgba(31, 91, 170, .45);}
/* ── 모션 (2026-10-20) ─────────────────────────────────────────────
이 슬라이드가 열릴 때(li.on)마다 처음부터 다시 재생: 로고 → 회사명 → 문구 → 연두 선 긋기 → 일정 줄 → 버튼 순으로 아래에서 떠오름.
계속 움직이는 것은 세 가지만(초록 점 맥박, 파란 버튼 빛 지나감, 화살표 살짝 밀기). 움직임 줄이기 설정이면 모두 끈다 */
@keyframes e26_up {from {opacity: 0; transform: translateY(14px);} to {opacity: 1; transform: none;}}
@keyframes e26_draw {from {transform: scaleX(0);} to {transform: scaleX(1);}}
@keyframes e26_mapin {from {opacity: 0; transform: translateY(-50%) scale(.96);} to {opacity: 1; transform: translateY(-50%);}}
@keyframes e26_pulse {0% {box-shadow: 0 0 0 0 rgba(140, 198, 63, .65);} 100% {box-shadow: 0 0 0 calc(10 * var(--u)) rgba(140, 198, 63, 0);}}
@keyframes e26_shine {0%, 55% {transform: translateX(-140%) skewX(-20deg);} 100% {transform: translateX(320%) skewX(-20deg);}}
@keyframes e26_nudge {0%, 70%, 100% {transform: translateX(0);} 80% {transform: translateX(4px);} 90% {transform: translateX(0);}}
#visual_wrap .visual_txt > li.on .e26_logo {animation: e26_up .6s cubic-bezier(.2, .7, .2, 1) .15s both;}
#visual_wrap .visual_txt > li.on .e26_title {animation: e26_up .6s cubic-bezier(.2, .7, .2, 1) .28s both;}
#visual_wrap .visual_txt > li.on .e26_sub {animation: e26_up .6s cubic-bezier(.2, .7, .2, 1) .40s both;}
#visual_wrap .visual_txt > li.on .e26_line {transform-origin: left center; animation: e26_draw .7s cubic-bezier(.6, 0, .2, 1) .55s both;}
#visual_wrap .visual_txt > li.on .e26_info .e26_i:nth-child(1) {animation: e26_up .55s cubic-bezier(.2, .7, .2, 1) .65s both;}
#visual_wrap .visual_txt > li.on .e26_info .e26_i:nth-child(2) {animation: e26_up .55s cubic-bezier(.2, .7, .2, 1) .75s both;}
#visual_wrap .visual_txt > li.on .e26_info .e26_i:nth-child(3) {animation: e26_up .55s cubic-bezier(.2, .7, .2, 1) .85s both;}
#visual_wrap .visual_txt > li.on .e26_btns {animation: e26_up .6s cubic-bezier(.2, .7, .2, 1) .95s both;}
#visual_wrap .visual_txt > li.on .e26_map {animation: e26_mapin .8s cubic-bezier(.2, .7, .2, 1) .45s both;}
/* "is exhibiting" 앞 초록 점 (참가 중 표시) */
#visual_wrap .e26_hero .e26_live {display: inline-block; position: relative; top: -.12em; width: calc(9 * var(--u)); height: calc(9 * var(--u));
margin-right: calc(10 * var(--u)); border-radius: 50%; background: #8cc63f; vertical-align: middle; animation: e26_pulse 1.8s ease-out infinite;}
/* D-day (2026-10-20d): 배경 없이 글자만. 굵고 크게 + 글자 위를 연두 빛이 지나가며 시간이 흐르는 느낌.
날짜 수는 뮌헨 날짜 기준 — main.php 가 그리고 electronica2026_20261020d.js 가 1분마다 다시 계산(뮌헨 자정에 바뀜). 행사 중(.is_on)은 NOW ON */
/* 배경 위치는 100% → 0% 범위에서만 움직인다(음수로 가면 글자 일부가 덮이지 않아 사라진다). 빛이 한 번 지나간 뒤 잠깐 쉰다 */
@keyframes e26_ddshine {0% {background-position: 100% 0;} 70%, 100% {background-position: 0 0;}}
#visual_wrap .e26_hero .e26_dday {position: relative; top: calc(-2 * var(--u)); display: inline-flex; align-items: center; margin-left: calc(4 * var(--u)); line-height: 1; font-variant-numeric: tabular-nums;} /* 20261020e 살짝 위로 */
#visual_wrap .e26_hero .e26_dday .e26_dd {font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: .01em; color: #4f9a14;
background: linear-gradient(100deg, #4f9a14 0, #4f9a14 40%, #8fd84a 50%, #4f9a14 60%, #4f9a14 100%) 100% 0 / 300% 100% no-repeat;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: e26_ddshine 3s ease-in-out infinite;}
/* 일·중문 글꼴은 600 까지만 있다(700 은 가짜 굵게로 번짐) */
#visual_wrap .e26_hero.e26_lang_jpn .e26_dday .e26_dd, #visual_wrap .e26_hero.e26_lang_chn .e26_dday .e26_dd {font-weight: 600;}
/* 부스 번호 줄은 배치도가 보이는 폭(1180px~)에서는 숨김 */
@media screen and (min-width: 1180px) { #visual_wrap .e26_hero .e26_info .e26_i.e26_info_booth {display: none;} }
/* 두 버튼: 빛이 3.6초마다 한 번 지나가고(두 버튼이 0.4초 차이), 화살표가 살짝 밀린다 */
#visual_wrap .e26_hero .e26_btns a::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; transform: translateX(-140%) skewX(-20deg); /* 움직임이 없을 때는 버튼 밖에 */
animation: e26_shine 3.6s ease-in-out 1.6s infinite both;}
#visual_wrap .e26_hero .e26_btns a.e26_btn_r::after {background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)); animation-delay: 2s;}
#visual_wrap .e26_hero .e26_btns a.e26_btn_l::after {background: linear-gradient(90deg, rgba(31, 95, 174, 0), rgba(31, 95, 174, .16), rgba(31, 95, 174, 0));}
#visual_wrap .e26_hero .e26_btns a svg {animation: e26_nudge 2.4s ease-in-out 1.6s infinite;}
#visual_wrap .e26_hero .e26_btns a.e26_btn_r svg {animation-delay: 2s;}
@media (prefers-reduced-motion: reduce) {
#visual_wrap .e26_hero *, #visual_wrap .e26_hero *::before, #visual_wrap .e26_hero *::after {animation: none !important;}
}
/* 가운데 홀 배치도 (2026-10-20b·c·d): 본문 높이의 74% 로 키우고 화면 가운데 쪽에. 뒤는 테두리 없는 흰 안개(::before).
왼쪽은 문구 끝 + 간격보다 안쪽으로 들어오지 않고, 오른쪽에는 사진이 최소 240px 보이도록 줄어든다 */
#visual_wrap .e26_hero .e26_map {position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); max-width: none;
--e26-mh: min(calc(var(--e26-h) * .74), calc((100vw - var(--e26-gap) - var(--e26-tw) - var(--e26-mgap) - 240px) * 307.4 / 475.5));
height: var(--e26-mh); width: calc(var(--e26-mh) * 475.5 / 307.4);
left: max(calc(var(--e26-gap) + var(--e26-tw) + var(--e26-mgap)), calc(50% - var(--e26-mh) * 237.75 / 307.4));
isolation: isolate;}
/* 카드 테두리 없이 뒤쪽만 흐리고 밝게: 가운데는 진하고 가장자리로 갈수록 사라지는 타원 안개(2026-10-20c) */
#visual_wrap .e26_hero .e26_map::before {content: ""; position: absolute; z-index: -1; inset: -14% -10%; pointer-events: none;
background: radial-gradient(closest-side, rgba(247, 250, 253, .92) 0, rgba(247, 250, 253, .82) 55%, rgba(247, 250, 253, 0) 100%);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);}
#visual_wrap .e26_hero .e26_map img {display: block; width: 100%; height: 100%; max-width: none;}
/* B5 홀(핀 포함)과 B5.501 말풍선 클릭 → 부스 페이지 (배치도 SVG viewBox -0.4 62.4 475.5 307.4 기준 %, 말풍선 x295.5 y68.4 146x59) */
#visual_wrap .e26_hero a.e26_maplink {position: absolute; display: block; border-radius: 12px; cursor: pointer; outline: none; transition: box-shadow .15s;}
#visual_wrap .e26_hero a.e26_maplink_b5 {left: 66.8%; top: 34.4%; width: 9.8%; height: 30.8%;}
#visual_wrap .e26_hero a.e26_maplink_card {left: 62.2%; top: 2%; width: 30.7%; height: 19.2%;}
#visual_wrap .e26_hero a.e26_maplink:hover,
#visual_wrap .e26_hero a.e26_maplink:focus-visible {box-shadow: 0 0 0 2px rgba(31, 95, 174, .55);}
@media screen and (max-width: 1179px) {
#visual_wrap .e26_hero .e26_map {display: none;}
}
/* 1440px 이하: 배경이 오른쪽 기준으로 잘려 사진이 문구 뒤까지 들어오므로 흰 그라데이션을 문구 뒤에 */
@media screen and (max-width: 1440px) {
#visual_wrap .e26_hero::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;
width: calc(var(--e26-gap) + var(--e26-tw) + 90px);
background: linear-gradient(90deg, rgba(247,250,253,.95) 0, rgba(247,250,253,.95) calc(100% - 90px), rgba(247,250,253,0) 100%);}
}
/* 태블릿(768~1024): 본문 500px. 문구 상자를 조금 줄이고 로고 위로 이동을 푼다 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
#visual_wrap .e26_hero {--e26-th: calc(var(--e26-h) * .70);}
}
/* 모바일(~767): 본문 375px. 배경 SVG 왼쪽 57% 는 빈 흰 패널이라 위쪽 띠에 사진 부분만 보이게(이미지 폭 280%, 오른쪽 기준),
문구는 그 아래 가운데 정렬. 연두 선은 뺀다 */
@media screen and (max-width: 767px) {
#visual_wrap .e26_hero {--e26-h: 375px; --e26-ph: clamp(108px, 30vw, 130px);}
#visual_wrap .e26_hero .e26_bgimg {left: auto; right: 0; width: 280%; height: var(--e26-ph); object-fit: cover; object-position: right center;}
#visual_wrap .e26_hero::before {content: ""; display: block; position: absolute; z-index: 1; pointer-events: none;
left: 0; right: 0; top: 0; width: auto; height: var(--e26-ph); bottom: auto;
background: linear-gradient(180deg, rgba(247,250,253,0) 45%, rgba(247,250,253,.85) 85%, #f7fafd 100%);}
#visual_wrap .e26_hero .e26_txt {top: calc(var(--e26-ph) - 8px); bottom: 10px; left: 16px; right: 16px; width: auto;
min-height: 0; transform: none; justify-content: center; align-items: center; text-align: center;}
#visual_wrap .e26_hero .e26_logo {width: min(300px, 80vw); margin-bottom: 10px;}
#visual_wrap .e26_hero .e26_line {display: none;}
#visual_wrap .e26_hero .e26_title {font-size: 23px;}
#visual_wrap .e26_hero .e26_sub {font-size: 14px; margin-top: 4px;}
#visual_wrap .e26_hero .e26_info {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px;}
#visual_wrap .e26_hero .e26_info .e26_i {gap: 6px; font-size: 13px;}
#visual_wrap .e26_hero .e26_live {width: 8px; height: 8px; margin-right: 7px;}
#visual_wrap .e26_hero .e26_dday .e26_dd {font-size: 16px;}
#visual_wrap .e26_hero .e26_info .e26_i + .e26_i {margin-top: 0;}
#visual_wrap .e26_hero .e26_info svg {width: 16px; height: 16px;}
#visual_wrap .e26_hero .e26_btns {justify-content: center; gap: 8px; margin-top: 12px;}
#visual_wrap .e26_hero .e26_btns a {height: 36px; gap: 6px; padding: 0 12px 0 14px; font-size: 12px; letter-spacing: .03em;}
#visual_wrap .e26_hero .e26_btns a svg {width: 15px; height: 15px;}
}