/* BASIC css start */
/* ==========================================================================
2026 SSF 이벤트 타임세일 (이 파일 하나로 관리. 동작은 shared/js/event-timesale.js 한 파일)
· 카드 마크업은 event-timesale.js 가 TIMESALE_DAYS 설정으로 만들어 #timesaleList 에 넣음 (HTML엔 컨테이너만 있음)
· 색·여백·글자 크기 토큰(--ssf*)은 main-event26.css 의 :root 에 있음 → main-event26.css 다음에 로드할 것
· 구성: 1 섹션·카드 틀 → 2 필름 릴 → 3 날짜 → 4 커튼콜(특별 카드) → 5 카운트다운·상태 → 6 키프레임·모션 줄이기
========================================================================== */
/* ---------- 1. 섹션·카드 틀 검은 극장 배경 + 필름 카드. 호버하면 일자별 티저 상품이 보임 ---------- */
#contentWrapper5 {
text-align: center;
background:
radial-gradient(
ellipse 60% 55% at 50% 78%,
rgba(120, 8, 20, 0.5),
transparent 70%
),
linear-gradient(#000 0%, #0b0102 70%, #000 100%);
}
#contentWrapper5 .content5ul {
width: 100%;
max-width: var(--content-max-width);
display: flex;
align-items: center;
justify-content: center;
gap: var(--ssfSp5);
padding: 0 var(--ssfSp4);
}
#contentWrapper5 .content5listWrapper {
width: 18%;
display: flex;
flex-flow: column nowrap;
align-items: center;
text-align: center;
gap: var(--ssfSp3);
}
/* 커튼콜 같은 특별 카드의 위치는 JS 설정(TIMESALE_DAYS)의 배열 순서가 정함 */
#contentWrapper5 .content5list {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
text-align: center;
overflow: visible;
border-radius: 0;
container-type: inline-size; /* 카드 폭 기준(cqw)으로 글자 크기를 맞춤 */
/* 카드 안의 z-index(날짜 4, 위아래 그림자 띠 3 등)가 카드 밖으로 새지 않게 가둠
안 그러면 sticky 헤더(z-index 3)보다 위로 그려져서 스크롤할 때 헤더를 덮음 */
isolation: isolate;
}
/* ---------- 2. 필름 릴 ---------- */
/* 필름 릴 고속 영사 연출.
평소: 필름은 사실 엄청 빠르게 돌아가고 있어서 사람 눈엔 프레임이 멈춰 있는 것처럼(검은 줄이 안 보임) 보이고, 이미지만 TV 노이즈로
자글거림 → CSS에선 릴을 첫 칸에 세워 두고, 이미지·날짜 글씨만 떨리게 + 회색 노이즈로 덮음.
호버: 사실은 돌고 있었던 것처럼 필름(프레임 + 수영복 이미지)이 순식간에 엄청 빠르게 translateY 하다가 점점 느려지며 패턴이 드러남
→ 속도(재생 속도)·블러·노이즈를 event-timesale.js 가 서서히 줄임.
필름(검은 띠 + 양옆 스프로킷 구멍 + 둥근 창)은 CSS로 그리고, 창마다 티저 이미지를 끼워 세로로 이어 붙인 띠(.timesaleReel) 하나가
통째로 움직임. 이미지 목록은 한 바퀴(--cycle칸) 뒤에 앞쪽 칸이 그대로 이어져 끊김 없이 반복됨.
한 칸 = 폭 100cqw × 높이 95.36cqw, 창은 x 8.98 / 폭 81.7 / y 3.715 / 높이 88.85 (모두 카드 폭 기준 cqw) */
#contentWrapper5 .content5list {
--jit: 1; /* 자글거림 세기(1 = 최대, 0 = 없음). 호버 중 JS가 속도에 맞춰 줄임 */
}
#contentWrapper5 .content5media {
width: 100%;
--pitch: 95.36cqw; /* 한 칸 높이 */
--off: 0cqw;
--pad: 4cqw; /* 이미지를 창보다 사방으로 이만큼 크게 두고 .timesaleFrame 틀로 창 모양만 남김(블러 번짐이 창 안으로 안 들어오게) */
--cycle: 3; /* 한 바퀴에 지나가는 칸 수 카드마다 JS(event-timesale.js)가 이미지 수에 맞춰 인라인으로 덮어씀 */
--step: 1.2s; /* 한 칸 지나가는 시간 = 호버 후 최종적으로 천천히 돌아가는 속도. 클수록 느림 */
--step-fast: 0.03s; /* 호버 직후 "엄청 빠르게" 돌 때의 한 칸 시간(0.03s = 초당 33칸). 이보다 작으면 60Hz 화면에서 한 프레임에 한 칸 가까이 건너뛰어 오히려 멈춘 것처럼 보임. JS가 이 속도에서 --step 속도까지 서서히 줄임 */
--blur: 8px; /* 평소: 수영복 패턴이 거의 노이즈로만 보이게 */
--grain: 1; /* 1 = 회색 TV 노이즈로 완전히 덮음 */
aspect-ratio: 1292 / 1232; /* 필름 한 칸이 딱 들어가는 비율 평소엔 한 칸만 보임 */
background: none;
overflow: hidden;
}
/* JS가 없을 때를 위한 호버 대체 연출: 그냥 블러·노이즈가 걷힘 (JS가 돌면 인라인 값이 이걸 덮어씀) */
#contentWrapper5 .content5list:hover .content5media {
--blur: 2.4px; /* 걷힌 뒤에도 필름 느낌이 남도록 약간 흐리게 */
--grain: 0;
}
/* 필름 띠: 검은 바탕 + 양옆 스프로킷 구멍(한 칸에 6개). 구멍은 뚫려(투명) 있어서 뒤가 비쳐 보임.
평소엔 정지(paused) 호버하면 JS가 재생 */
#contentWrapper5 .timesaleReel {
position: relative;
display: flex; /* 칸(.timesaleFrame)을 세로로 쌓음 칸 사이 여백이 겹치지 않게 */
flex-direction: column;
margin-top: var(--off);
background: url("data:image/svg+xml,")
0 0 / 100% calc(var(--pitch) / 6) repeat-y;
will-change: transform;
animation: tsReel calc(var(--cycle) * var(--step)) linear infinite;
animation-play-state: paused;
}
#contentWrapper5 .content5media::before {
content: "";
position: absolute;
inset: 0;
background: #ffffff10;
/* animation: tsLamp 0.22s steps(1) infinite; */
}
/* 티저 이미지의 창 창 자리·크기·둥근 모서리는 이 틀(.timesaleFrame)이 고정으로 잘라 냄.
(성능: 예전에는 이미지 자체를 clip-path 로 자르고 떨림에 맞춰 clip-path 까지 같이 움직여서,
블러가 걸린 이미지가 매 프레임 다시 그려졌음. 이제 틀은 가만히 있고 안의 이미지는 translate 만
움직이므로 GPU가 이미 그려 둔 이미지를 옮기기만 함 모양은 똑같음) */
#contentWrapper5 .timesaleReel .timesaleFrame {
position: relative;
flex: none; /* 릴이 세로 flex 라서 위아래 여백이 서로 겹쳐 합쳐지지 않음 → 한 칸이 정확히 --pitch */
display: block;
width: 81.7cqw;
height: 88.85cqw;
margin: 3.715cqw 0 2.79cqw 8.98cqw; /* 한 칸 = 3.715 + 88.85 + 2.79 = 95.355cqw(--pitch) */
overflow: hidden;
border-radius: 5.5cqw;
}
/* 이미지는 창보다 사방으로 --pad 만큼 크게 두고 틀이 잘라 냄(블러 번짐이 창 안으로 안 들어오게).
이미지만 자글거리게 떨림 */
#contentWrapper5 .timesaleReel .timesaleItem {
position: absolute;
top: calc(var(--pad) * -1);
left: calc(var(--pad) * -1);
display: block;
width: calc(81.7cqw + var(--pad) * 2);
height: calc(88.85cqw + var(--pad) * 2);
object-fit: cover;
border-radius: 0;
transform: none;
animation: tsJitter 0.09s steps(1) infinite;
filter: blur(var(--blur)) contrast(1.15) saturate(0.85) brightness(0.9);
}
/* 필름 노이즈(그레인) 이미지 창 영역에만 */
#contentWrapper5 .timesaleReel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* 안쪽은 timesale-texture.jpg(붉은 리더 텍스처: 원 두 겹 + 십자선) 그대로 쓰고, 그 위에 필름 그레인만 얹음.
텍스처는 정사각형 그대로(찌그러짐 없이) 한 칸 높이(--pitch)에 맞춰 창 가운데에 오도록 놓고 좌우는 마스크가 잘라 냄.
필름과 같이 움직이며, 그레인은 자글거리고 둘 다 opacity(--grain)로 함께 걷힘 */
background:
url("data:image/svg+xml,")
0 0 / 200px,
url("https://ai.esmplus.com/sentimall/etc/event/timesale-texture.jpg")
2.15cqw 0.455cqw / var(--pitch) var(--pitch) repeat-y;
-webkit-mask: linear-gradient(#000 0 88.85cqw, transparent 0) 8.98cqw
3.715cqw / 81.7cqw var(--pitch) repeat-y;
mask: linear-gradient(#000 0 88.85cqw, transparent 0) 8.98cqw 3.715cqw /
81.7cqw var(--pitch) repeat-y;
background-blend-mode:
multiply, normal; /* 그레인(위)을 텍스처(아래)에 곱함 흰/회색으로 덮지 않아 붉은색이 그대로 살아 있음 */
/* 텍스처 커버를 그대로 덮음(블렌드 없음) opacity(--grain)가 내려가면 걷히면서 수영복 패턴이 드러남 */
opacity: var(--grain);
animation: tsGrain 0.16s steps(1) infinite; /* TV 노이즈처럼 빠르게 자글거림 */
}
/* 더스트·스크래치 필름 띠 안에 "그려 둔" 것이라 이미지와 함께 롤링되고, 마스크로 수영복 이미지 창에만 입혀짐 */
#contentWrapper5 .timesaleReel::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* 더스트: 아주 작은 먼지 알갱이를 크기별로 성기게 따뜻한 크림색, 큰 것일수록 옅고 드묾 */
radial-gradient(
circle,
rgba(255, 238, 218, 0.75) 0 0.5px,
transparent 1px
)
0 0 / 53px 61px,
radial-gradient(
circle,
rgba(255, 230, 205, 0.6) 0 0.7px,
transparent 1.3px
)
23px 31px / 97px 113px,
radial-gradient(
circle,
rgba(255, 245, 230, 0.5) 0 1px,
transparent 1.7px
)
71px 53px / 181px 211px,
radial-gradient(
circle,
rgba(255, 225, 200, 0.35) 0 1.4px,
transparent 2.4px
)
133px 97px / 307px 251px,
/* 스크래치: 필름 길이 방향으로 길게 긁힌 가는 선 하나 */
linear-gradient(
90deg,
transparent 0 58%,
rgba(255, 240, 225, 0.16) 58% 58.3%,
transparent 58.3% 100%
)
0 0 / 100% 100% no-repeat,
/* 필름 그레인: 이미지 위에 항상 깔리는 밝은 크림색 입자(호버로 노이즈 커버가 걷힌 뒤에도 남음) */
url("data:image/svg+xml,")
0 0 / 160px;
-webkit-mask: linear-gradient(#000 0 88.85cqw, transparent 0) 8.98cqw
3.715cqw / 81.7cqw var(--pitch) repeat-y;
mask: linear-gradient(#000 0 88.85cqw, transparent 0) 8.98cqw 3.715cqw /
81.7cqw var(--pitch) repeat-y;
mix-blend-mode: screen;
animation: tsFilmGrain 0.12s steps(1) infinite; /* 칸마다 입자 위치가 바뀌는 필름 그레인 */
}
/* 영사기 빛 필름 칸마다 있는 게 아니라 컨테이너(카드) 가운데에 고정. 필름이 흘러도 제자리에서 깜빡이며 비춤 */
#contentWrapper5 .content5media::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(
ellipse 55% 48% at 50% 50%,
rgba(255, 236, 205, 0.3) 0%,
rgba(255, 190, 140, 0.12) 50%,
rgba(255, 170, 110, 0) 80%
);
-webkit-mask: linear-gradient(#000, #000) 8.98cqw 3.715cqw / 81.7cqw
88.85cqw no-repeat;
mask: linear-gradient(#000, #000) 8.98cqw 3.715cqw / 81.7cqw 88.85cqw
no-repeat; /* 창 안에만 테두리·구멍에는 안 번짐 */
mix-blend-mode: screen;
animation: tsFlicker 0.31s steps(1) infinite;
}
/* 카드 위아래의 검은 그림자 호버 전(노이즈 커버)에도 보이도록 창 안쪽까지 충분히 내려오고, 고속으로 돌 때 이웃 칸이 들어오고 나가는 경계도 눌러 줌. 날짜 글씨(z 4)와 커버(띠 안) 위에 놓임 */
#contentWrapper5 .content5box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: none;
border-radius: 0;
overflow: visible;
pointer-events: none;
z-index: 3;
background: linear-gradient(
#000 0%,
rgba(0, 0, 0, 0.6) 7%,
rgba(0, 0, 0, 0) 20%,
rgba(0, 0, 0, 0) 80%,
rgba(0, 0, 0, 0.6) 93%,
#000 100%
);
}
/* ---------- 3. 날짜 ---------- */
#contentWrapper5 .content5date {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
pointer-events: none;
overflow: hidden; /* 날짜가 필름 칸을 따라 위아래로 흐를 때 카드(컨테이너) 밖으로 삐져나오지 않게 */
}
/* 기본: 호버하면 날짜가 사라짐(티저 상품이 보이도록) */
#contentWrapper5 .content5list:hover .content5date {
transition: 0.35s;
opacity: 0;
}
/* 필름이 도는 동안(event-timesale.js가 .is-reeling 을 붙임)엔 날짜도 필름 칸과 같이 흘러야 하니 위의 "호버하면 날짜 숨김"을 끄고,
날짜 세기(--dateA)는 JS가 속도에 맞춰 줄임 */
#contentWrapper5 .content5list.is-reeling .content5date {
opacity: 1;
transition: none;
}
#contentWrapper5 .timesaleDate {
font-size: 29cqw;
font-style: italic;
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em; /* 큼직한 숫자도 타이틀과 같은 장평·자간 */
transform: translateY(var(--dy, 0px)) scaleX(var(--ssfTitleScaleX)); /* --dy: 필름 칸을 따라 흐르는 위치(JS) */
opacity: var(--dateA, 1);
animation: tsJitterSoft 0.2s steps(1) infinite; /* 이미지보다 훨씬 약하고 느리게 숫자가 너무 부산스럽지 않게 */
color: #f0cfcf;
text-shadow:
0 0 0.6rem rgba(0, 0, 0, 0.85),
0 0 1.6rem rgba(0, 0, 0, 0.6);
}
/* 날짜 복제본(JS가 만듦) 필름 칸이 넘어갈 때 다음 칸의 날짜가 아래에서 올라오도록 쓰는 두 번째 날짜. 평소엔 숨김 */
#contentWrapper5 .timesaleDateClone {
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
opacity: 0;
}
#contentWrapper5 .content5list.is-reeling .timesaleDateClone {
opacity: var(--dateA, 1);
}
/* ---------- 4. 커튼콜(특별 카드) ---------- */
/* 커튼콜도 다른 카드와 같은 필름 릴(JS 도 같이 돌림)이지만 두 가지가 다름:
① 글씨(.curtaincall)가 필름 위에 그대로 유지됨(호버해도 안 사라지고 필름 칸을 따라 흐르지도 않음)
② 호버 직후의 고속("촤라락") 도입부 없이 바로 한 칸씩 넘어감(event-timesale.js 의 intro: false)
그래서 이미지는 글씨가 읽히도록 조금 더 어둡게, 노이즈 커버·블러는 바로 걷히므로 짧게 부드럽게 바뀌게 함 */
#contentWrapper5 .is-special .timesaleReel .timesaleItem {
filter: blur(var(--blur)) contrast(1.15) saturate(0.85) brightness(0.62);
transition: filter 0.3s;
}
#contentWrapper5 .is-special .timesaleReel::after {
transition: opacity 0.3s;
}
/* 커튼콜은 보여줄 티저가 없으니 글씨를 계속 유지 */
#contentWrapper5 .content5list:hover .content5date.curtaincall {
opacity: 1;
}
#contentWrapper5 .curtaincall {
flex-flow: column nowrap;
gap: 2.5cqw;
padding: 0 18cqw;
}
/* 이미지 위에 올라가는 글씨 아이보리 + 그림자 */
#contentWrapper5 .curtaincall h2,
#contentWrapper5 .curtaincall p,
#contentWrapper5 .curtaincall h3 {
color: var(--ssfIvory);
text-shadow:
0 0 0.5rem rgba(0, 0, 0, 0.85),
0 0 1.4rem rgba(0, 0, 0, 0.6);
}
#contentWrapper5 .curtaincall h2 {
font-size: 11cqw;
font-style: italic;
font-weight: 600;
line-height: 1.15;
}
#contentWrapper5 .curtaincall p {
font-family: var(--ssfFont);
font-size: 3.8cqw;
font-weight: 500;
line-height: 1.5;
}
#contentWrapper5 .curtaincall h3 {
font-size: 8cqw;
font-style: italic;
font-weight: 600;
}
/* ---------- 5. 카운트다운·상태 ---------- */
/* 카드 밑 카운트다운 */
#contentWrapper5 .timerWrapper {
width: 100%;
padding: 0;
background: none;
}
#contentWrapper5 .timerWrapper h5 {
font-family: var(--ssfFont);
font-size: var(--ssfFsBody);
font-weight: 500;
}
#contentWrapper5 .timerWrapper h4 {
font-size: var(--ssfFsHead);
font-weight: 600;
letter-spacing: 0.12em;
font-variant-numeric: tabular-nums;
color: var(--ssfRed);
}
/* 상태 클래스(saleBefore / saleStart / saleEnd)는 JS가 카드(.content5listWrapper)에 붙임.
색으로 한눈에 구분: 대기 = 회색기 없는 또렷한 흰색, 진행 중 = 밝고 선명한 붉은색(+빛번짐), 종료 = 어두운 회색.
(대기를 붉은색에서 빼서 회색으로 둬야, 진행 중의 선명한 붉은색이 확 눈에 띔. 노란색은 쓰지 않음) */
#contentWrapper5 {
--ssfWait: #ece9e9; /* 대기 안내 문구: 회색 기운을 빼서 검은 배경 위 대비 15:1 이상 */
--ssfLive: #ff5a60; /* 진행 중: 검은 배경 위 대비 6:1 이상의 선명한 붉은색 */
}
#contentWrapper5 .saleBefore h5::after {
content: "세일 시작까지";
color: var(--ssfWait);
}
#contentWrapper5 .saleBefore .timerWrapper h4 {
color: #fff; /* 남은 시간 숫자는 순백 */
}
#contentWrapper5 .saleStart h5::after {
content: "* ! 세일 진행 중, 종료까지 ! *";
color: var(--ssfLive);
}
#contentWrapper5 .saleStart .timerWrapper h4 {
color: var(--ssfLive);
text-shadow: 0 0 0.75rem rgba(255, 90, 96, 0.55);
animation: bounceAni2 1s infinite;
}
/* 세일 진행 중인 카드의 큰 날짜만 빛남: 안쪽 흰 빛 + 바깥 붉은 빛, 그 아래에 어두운 번짐(이미지 위에서 글자가 묻히지 않게) */
#contentWrapper5 .saleStart .timesaleDate {
color: #fff1f1;
text-shadow:
0 0 0.4rem rgba(255, 238, 238, 0.8),
0 0 1.1rem rgba(255, 125, 130, 0.7),
0 0 0.6rem rgba(0, 0, 0, 0.85),
0 0 1.6rem rgba(0, 0, 0, 0.6);
}
#contentWrapper5 .saleStart .content5list {
animation: bounceAni1 2.5s infinite;
}
#contentWrapper5 .saleEnd h5::after {
content: "세일 종료";
color: #4a2a2c;
}
#contentWrapper5 .saleEnd * {
color: #333 !important;
}
#contentWrapper5 .saleEnd .content5list {
opacity: 0.5;
}
/* 세일 진행 중인 카드는 테두리 바깥으로 붉은 빛이 번지며 숨 쉬듯 일렁임.
카드(.content5list, isolation 으로 층이 갇혀 있음) 뒤에 깔리는 ::before 의 box-shadow 를 opacity 로만 움직여서(GPU 합성) 가벼움 */
#contentWrapper5 .saleStart .content5list::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
box-shadow:
0 0 1.25rem 0.25rem rgba(255, 90, 96, 0.6),
0 0 3.5rem 0.75rem rgba(255, 70, 80, 0.45),
0 0 7rem 1.5rem rgba(255, 60, 70, 0.25);
animation: tsLiveGlow 2.2s ease-in-out infinite;
}
/* 세일이 끝난 카드는 호버 전(평소)에 떨림·노이즈·깜빡임을 전부 끔 호버하면(.is-reeling) 원래 연출 그대로 */
#contentWrapper5 .saleEnd .content5list:not(.is-reeling) .timesaleItem,
#contentWrapper5 .saleEnd .content5list:not(.is-reeling) .timesaleDate,
#contentWrapper5 .saleEnd .content5list:not(.is-reeling) .timesaleReel::before,
#contentWrapper5 .saleEnd .content5list:not(.is-reeling) .timesaleReel::after,
#contentWrapper5 .saleEnd .content5list:not(.is-reeling) .content5media::after {
animation: none;
}
/* ---------- 성능: 안 보이는 애니메이션은 멈춤 ---------- */
/* 평소(호버 전)엔 첫 칸만 보이므로 나머지 칸 이미지의 자글거림은 멈춰 둠 필름이 돌기 시작(.is-reeling)하면 다시 움직임 */
#contentWrapper5
.content5list:not(.is-reeling)
.timesaleFrame:not(:first-child)
.timesaleItem {
animation-play-state: paused;
}
/* 화면 밖 카드(JS가 .is-offscreen 을 붙임)는 장식 애니메이션 전부 정지 */
#contentWrapper5 .content5list.is-offscreen .timesaleItem,
#contentWrapper5 .content5list.is-offscreen .timesaleDate,
#contentWrapper5 .content5list.is-offscreen .timesaleReel::before,
#contentWrapper5 .content5list.is-offscreen .timesaleReel::after,
#contentWrapper5 .content5list.is-offscreen .content5media::after,
#contentWrapper5 .saleStart .content5list.is-offscreen::before {
animation-play-state: paused;
}
/* ---------- 6. 키프레임·모션 줄이기 ---------- */
@keyframes tsReel {
to {
transform: translateY(calc(var(--cycle) * var(--pitch) * -1));
}
}
/* 이미지·날짜 글씨의 자글거림 칸이 고속으로 지나가며 눈에 번져 보이는 떨림. 세기는 --jit.
(translate 만 바꿈: 창은 .timesaleFrame 이 고정으로 잘라 주므로 clip-path 를 같이 움직일 필요가 없음) */
@keyframes tsJitter {
0% {
translate: calc(var(--jit) * 0.5cqw) calc(var(--jit) * -0.35cqw);
}
20% {
translate: calc(var(--jit) * -0.45cqw) calc(var(--jit) * 0.4cqw);
}
40% {
translate: calc(var(--jit) * 0.3cqw) calc(var(--jit) * 0.55cqw);
}
60% {
translate: calc(var(--jit) * -0.55cqw) calc(var(--jit) * -0.25cqw);
}
80% {
translate: calc(var(--jit) * 0.2cqw) calc(var(--jit) * -0.5cqw);
}
}
@keyframes tsJitterSoft {
0% {
translate: calc(var(--jit) * 0.1cqw) calc(var(--jit) * -0.08cqw);
}
33% {
translate: calc(var(--jit) * -0.09cqw) calc(var(--jit) * 0.07cqw);
}
66% {
translate: calc(var(--jit) * 0.05cqw) calc(var(--jit) * 0.1cqw);
}
}
@keyframes tsFlicker {
0% {
opacity: 1;
}
35% {
opacity: 0.8;
}
60% {
opacity: 0.95;
}
85% {
opacity: 0.72;
}
}
@keyframes tsFilmGrain {
0% {
background-position:
0 0,
23px 31px,
71px 53px,
133px 97px,
0 0,
0 0;
}
25% {
background-position:
0 0,
23px 31px,
71px 53px,
133px 97px,
0 0,
-37px 22px;
}
50% {
background-position:
0 0,
23px 31px,
71px 53px,
133px 97px,
0 0,
29px -41px;
}
75% {
background-position:
0 0,
23px 31px,
71px 53px,
133px 97px,
0 0,
-53px -17px;
}
}
@keyframes tsGrain {
0% {
background-position:
0 0,
2.15cqw 0.455cqw;
}
25% {
background-position:
-40px 30px,
2.15cqw 0.455cqw;
}
50% {
background-position:
30px -50px,
2.15cqw 0.455cqw;
}
75% {
background-position:
-60px -20px,
2.15cqw 0.455cqw;
}
}
@keyframes tsLiveGlow {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
#contentWrapper5 .saleStart .content5list::before,
#contentWrapper5 .timesaleReel,
#contentWrapper5 .timesaleReel::before,
#contentWrapper5 .timesaleReel::after,
#contentWrapper5 .content5media::after,
#contentWrapper5 .timesaleReel .timesaleItem,
#contentWrapper5 .timesaleDate {
animation: none;
}
}
@keyframes bounceAni1 {
0% {
transform: translateY(0);
}
30% {
transform: translateY(-5px);
}
40% {
transform: translateY(0);
}
60% {
transform: translateY(-12px);
}
70% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@keyframes bounceAni2 {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
/* ---------- 7. 모바일·태블릿 (1023px 이하) 한 줄에 카드 하나. 글씨·여백 단계는 main-event26.css 모바일 블록 참고 ----------
카드 사이 세로 32, 화면 좌우 20, 카드 ↔ 라벨 12, 라벨(Small) ↔ 숫자(Head) 4 */
@media (max-width: 1023px) {
#contentWrapper5 .content5ul {
flex-flow: column nowrap;
align-items: center;
gap: var(--ssfSp5);
padding: 0 var(--ssfGutter);
}
#contentWrapper5 .content5listWrapper {
width: min(72vw, 18rem);
gap: var(--ssfSp2);
}
#contentWrapper5 .timerWrapper {
display: flex;
flex-flow: column nowrap;
align-items: center;
gap: 0.25rem;
}
#contentWrapper5 .timerWrapper h5 {
font-size: var(--ssfFsSmall);
line-height: var(--ssfLhSmall);
word-break: keep-all;
}
#contentWrapper5 .timerWrapper h4 {
font-size: var(--ssfFsHead);
line-height: var(--ssfLhHead);
letter-spacing: 0.04em;
}
}
/* ---------- 8. 태블릿 (600~1023px) 카드를 세로로 쌓으면 양옆이 텅 빔 → 세 장을 가로 한 줄로 ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
#contentWrapper5 .content5ul {
flex-flow: row nowrap;
align-items: flex-start;
justify-content: center;
gap: var(--ssfSp4);
}
#contentWrapper5 .content5listWrapper {
flex: 0 1 15rem;
width: auto;
min-width: 0;
}
}
/* ---------- 9. 폰·태블릿(1023px 이하): 카드 검은 그림자를 옅게 ----------
실제 폰 화면에서 날짜 글씨 뒤의 검은 번짐과 카드 위아래 검은 띠가 PC 의 모바일 뷰보다 훨씬 진하게 보여서,
폰에서만 불투명도를 낮춤(PC 는 그대로). 더 옅게/진하게 하려면 아래 rgba 의 마지막 숫자만 바꿀 것 */
@media (max-width: 1023px) {
#contentWrapper5 .timesaleDate {
text-shadow:
0 0 0.35rem rgba(0, 0, 0, 0.55),
0 0 0.9rem rgba(0, 0, 0, 0.3);
}
#contentWrapper5 .saleStart .timesaleDate {
text-shadow:
0 0 0.4rem rgba(255, 238, 238, 0.8),
0 0 1.1rem rgba(255, 125, 130, 0.7),
0 0 0.35rem rgba(0, 0, 0, 0.55),
0 0 0.9rem rgba(0, 0, 0, 0.3);
}
#contentWrapper5 .content5box {
background: linear-gradient(
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.45) 7%,
rgba(0, 0, 0, 0) 20%,
rgba(0, 0, 0, 0) 80%,
rgba(0, 0, 0, 0.45) 93%,
rgba(0, 0, 0, 0.85) 100%
);
}
}
/* BASIC css end */