<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">/* font */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); /* root */ :root { --head: 80px !important; } /* common */ body { min-width: 1200px; margin: 0; padding: 0; } body * { box-sizing: border-box; } .wrap .special-sub-wrap .sub-top .editor-wrap { min-width: 1200px; } .art-container-event { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; text-align: center; font-family: Pretendard, sans-serif !important; } .art-content-inner { position: relative; margin: 0 auto; overflow: hidden; } .art-container-event ul { margin: 0; padding: 0; list-style: none; } .art-container-event p { margin: 0; padding: 0; } .art-container-event a, .art-container-event button { text-decoration: none; -webkit-tap-highlight-color: transparent; } .art-container-event a:focus, .art-container-event button:focus { outline: none; } .art-content-inner img { display: block; width: 100%; } /* mv */ .mv_wrap { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 1200px; height: 605px; padding-bottom: 40px !important; overflow: hidden; } .mv_wrap .mv { position: absolute; width: 100%; height: 100%; inset: 0; overflow: hidden; } .mv_wrap .txt_wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; z-index: 2; } .mv_wrap .txt_wrap ._txt { color: #ffffff; } .mv_wrap .txt_wrap ._txt._01 { font-size: 28px; font-weight: 500; line-height: 100%; letter-spacing: -1px; } .mv_wrap .txt_wrap ._txt._02 { font-size: 42px; font-weight: 700; line-height: 100%; letter-spacing: -1px; } /* content _copy */ .content._copy { padding: 50px 0 !important; background-color: #F6F6F6; } .content._copy .txt_wrap { display: flex; flex-direction: column; align-items: center; } .content._copy ._txt { color: #000000; } .content._copy ._txt._01 { font-size: 32px; font-weight: 700; line-height: 132%; letter-spacing: -1.12px; } .content._copy ._txt._02 { margin-top: 16px !important; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: -0.64px; } .content._copy ._txt._03 { margin-top: 12px !important; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; } /* content _countdown */ .content._countdown { padding: 50px 0 !important; background-color: #ffffff; } .content._countdown .countdown_box { display: flex; flex-direction: column; gap: 16px; } .content._countdown .ttl { font-size: 20px; font-weight: 500; line-height: 100%; letter-spacing: -0.8px; color: #000000; } .content._countdown .countdown_box { margin: 0 auto !important; } .content._countdown .countdown { display: flex; justify-content: center; align-items: flex-start; margin: 0 auto !important; gap: 20px; } .content._countdown .countdown .time-box { display: flex; flex-direction: column; align-items: center; } .content._countdown .countdown .num { font-size: 56px; font-weight: 700; line-height: 100%; letter-spacing: -1.68px; color: #000000; } .content._countdown .countdown .label { margin-top: 7px !important; font-size: 18px; font-weight: 300; line-height: 100%; letter-spacing: -0.36px; color: rgba(0, 0, 0, 0.4); } .content._countdown .countdown .colon { font-size: 60px; font-weight: 100; line-height: 85%; letter-spacing: -1.8px; color: #000000; } /* banner_img */ .banner_img { position: relative; width: 100%; overflow: hidden; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner"><!-- mv --> <div class="mv_wrap"> <div class="mv"><img alt="" src="https://image.a-rt.com/art/editor/202611/1794372729304.jpg" /></div> <div class="txt_wrap"> <p class="_txt _01">블랙ABC데이</p> <p class="_txt _02">퍼포먼스 스포츠 슈즈 대전</p> </div> </div> <!-- content _copy --> <div class="content _copy"> <div class="txt_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"> <p class="_txt _01">블랙ABC데이<br /> 스포츠 슈즈 특가 모음전</p> <p class="_txt _02">취향에 맞는 아이템을, 더 쉽고 빠르게!<br /> 카테고리별로 만나보세요</p> <p class="_txt _03">11. 13 - 12. 10</p> </div> </div> <!-- content _countdown --> <div class="content _countdown"> <div class="countdown_box ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"> <p class="ttl">이번주 특가 종료까지 남은 시간</p> <div class="countdown_box"> <div class="countdown" id="countdown"> <div class="time-box"><span class="num" id="days">00</span> <span class="label">Days</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="hours">00</span> <span class="label">Hours</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="minutes">00</span> <span class="label">Minutes</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="seconds">00</span> <span class="label">Seconds</span></div> </div> </div> </div> </div> <!-- banner_img --><!-- <a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000007226" class="banner_img" target="_blank"> <img src="https://image.a-rt.com/art/editor/202611/1794304152294.jpg" alt="ABC-MART 혜택 보러가기"> </a> --></div> </div> <!-- e : art-container-event --><!-- 타이머 스크립트 --><script> (function () { const settings = { startDate: '2026-11-13T00:00:00', endDate: '2026-12-11T00:00:00', testDate: null, }; const testStartTime = settings.testDate ? new Date(settings.testDate).getTime() : null; const realStartTime = Date.now(); const startTime = new Date(settings.startDate).getTime(); const endTime = new Date(settings.endDate).getTime(); function getNow() { return testStartTime !== null ? testStartTime + (Date.now() - realStartTime) : Date.now(); } function updateCountdown() { const now = getNow(); let distance = 0; if (now >= startTime && now < endTime) { const currentDate = new Date(now); const targetDate = new Date(now); const day = currentDate.getDay(); const daysUntilFriday = (5 - day + 7) % 7; targetDate.setDate(currentDate.getDate() + daysUntilFriday); targetDate.setHours(0, 0, 0, 0); if (targetDate.getTime() <= now) { targetDate.setDate(targetDate.getDate() + 7); } distance = Math.max(0, Math.min(targetDate.getTime(), endTime) - now); } const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById('days').textContent = String(days).padStart(2, '0'); document.getElementById('hours').textContent = String(hours).padStart(2, '0'); document.getElementById('minutes').textContent = String(minutes).padStart(2, '0'); document.getElementById('seconds').textContent = String(seconds).padStart(2, '0'); } function init() { if (!document.getElementById('days')) return; if (!document.getElementById('hours')) return; if (!document.getElementById('minutes')) return; if (!document.getElementById('seconds')) return; updateCountdown(); setInterval(updateCountdown, 1000); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); </script><!-- 애니메이션 --><script> (function () { function waitImagesLoaded(container, callback) { const imgs = Array.from(container.querySelectorAll('img')); if (!imgs.length) return callback(); let loaded = 0; function check() { loaded++; if (loaded === imgs.length) callback(); } imgs.forEach(img => { if (img.complete) { check(); } else { img.addEventListener('load', check, { once: true }); img.addEventListener('error', check, { once: true }); } }); } function initAni() { const style = document.createElement("style"); style.textContent = ` .ani{ --ani-x:0; --ani-y:0; --ani-speed:.7s; --ani-delay:0s; opacity:0; transform:translate(var(--ani-x),var(--ani-y)); transition: opacity var(--ani-speed) var(--ani-delay), transform var(--ani-speed) var(--ani-delay); } .ani.on{ opacity:1; transform:translate(0,0); } .ani.z_index1{position:relative;z-index:1;} .ani.z_index2{position:relative;z-index:2;} .ani.z_index3{position:relative;z-index:3;} @keyframes aniMove{ from{ opacity:0; transform:translate(var(--ani-x),var(--ani-y)); } to{ opacity:1; transform:translate(0,0); } }`; document.head.appendChild(style); document.querySelectorAll(".ani").forEach(el => { if (el.dataset.x) el.style.setProperty("--ani-x", el.dataset.x); if (el.dataset.y) el.style.setProperty("--ani-y", el.dataset.y); if (el.dataset.speed) el.style.setProperty("--ani-speed", el.dataset.speed); if (el.dataset.delay) el.style.setProperty("--ani-delay", el.dataset.delay); const threshold = parseFloat(el.dataset.threshold) || 0; const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("on"); io.unobserve(e.target); } }); }, { threshold: threshold }); io.observe(el); }); } const container = document.querySelector('.art-container-event'); if (!container) return; waitImagesLoaded(container, initAni); })(); </script><!-- E : 이벤트 복사영역 여기까지 -->