<!-- S : 이벤트 복사영역 여기서부터 -->
<style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
body {
min-width: 1200px;
margin: 0;
padding: 0;
}
body * { box-sizing: border-box; }
.wrap .special-sub-wrap .sub-top .editor-wrap {
min-width: 1200px !important;
}
.art-container-event {
color: #ffffff;
font-family: Pretendard, sans-serif !important;
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.art-content-inner img {
display: block;
width: 100%;
}
.art-content-inner p,
.art-content-inner ul {
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; }
/* content */
@keyframes hover {
0% { transform: translateY(0); }
25% { transform: translateY(-5px); }
75% { transform: translateY(5px); }
100% { transform: translateY(0); }
}
.hover { display: block; }
.hover:hover { animation: hover 1s linear infinite; }
/* mv */
.mv {
position: relative;
width: 100%;
overflow: hidden;
}
/* content common */
.content {
padding: 64px 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content_sub_ttl {
font-size: 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.64px;
color: #2A2A2A;
}
.content_main_ttl {
margin: 24px auto 0 !important;
font-size: 32px;
font-weight: 700;
line-height: 100%;
letter-spacing: -1.12px;
color: #000000;
}
.content_txt {
margin: 12px auto 0 !important;
font-size: 20px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.8px;
color: #000000;
}
/* content _copy */
.content._copy {
display: flex;
align-items: center;
justify-content: center;
gap: 76px;
padding: 64px 0;
background-color: #7A3F3E;
}
.content._copy .ttl {
font-size: 28px;
font-weight: 700;
line-height: 100%;
letter-spacing: -1px;
color: #ffffff;
}
.content._copy .txt {
font-size: 20px;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.8px;
text-align: left;
color: #ffffff;
}
/* content _brand */
.content._brand {
background-image: url(https://image.a-rt.com/art/editor/202610/1791343086994.jpg);
}
.content._brand .ttl {
font-size: 26px;
font-weight: 500;
line-height: 132%;
letter-spacing: -1.12px;
color: #000000;
}
.content._brand .ttl span {
position: relative;
font-size: 32px;
font-weight: 700;
line-height: 132%;
z-index: 0;
}
.content._brand .ttl span::after {
content: '';
position: absolute;
display: block;
width: 168px;
height: 36px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #D8A89B;
z-index: -1;
}
.content._brand .txt {
margin: 18px auto 0 !important;
font-size: 20px;
font-weight: 300;
line-height: 150%;
letter-spacing: -0.8px;
color: #000000;
}
.content._brand .img {
max-width: 450px;
margin: 48px auto 0 !important;
}
/* content _discount */
.content._discount {
background: linear-gradient(180deg, #FFF8F1 13.02%, #F2E4D6 100%);
}
.content._discount .content_txt {
line-height: 160%;
}
.content._discount .content_txt span {
position: relative;
font-weight: 600;
color: #ffffff;
z-index: 0;
}
.content._discount .content_txt span::after {
content: '';
position: absolute;
width: 37px;
height: 22px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #7A3F3E;
z-index: -1;
}
.content._discount .img {
max-width: 450px;
margin: 40px auto 0 !important;
}
/* content _countdown */
.content._countdown {
display: flex;
flex-direction: column;
gap: 16px;
background-color: #34221F;
}
.content._countdown .ttl {
font-size: 20px;
font-weight: 600;
line-height: 114%;
letter-spacing: -0.6px;
color: #ffffff;
}
.countdown_box { margin: 0 auto !important; }
.countdown {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0 auto !important;
gap: 28px;
}
.countdown .time-box {
display: flex;
flex-direction: column;
align-items: center;
}
.countdown .num {
font-size: 60px;
font-weight: 700;
line-height: 100%;
letter-spacing: -1.8px;
color: #ffffff;
}
.countdown .label {
margin-top: 7.2px !important;
font-size: 22px;
font-weight: 300;
line-height: 100%;
letter-spacing: -0.44px;
color: #DCDCDC;
}
.countdown .colon {
font-size: 60px;
font-weight: 100;
line-height: 85%;
letter-spacing: -1.8px;
color: #DCDCDC;
}
</style>
<!-- s : art-container-event -->
<div class="art-container-event">
<div class="art-content-inner">
<div class="mv"><img alt="brand day homme 10. 27 - 10. 28" src="https://image.a-rt.com/art/editor/202610/1791343172417.jpg" /></div>
<div class="content _copy">
<p class="ttl ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">브랜드 데이는?</p>
<p class="txt ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">오늘의 브랜드와 함께<br />
브랜드 데이 특가 혜택을 만나볼 수 있는 날입니다.</p>
</div>
<div class="content _brand">
<p class="ttl ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">오늘의 브랜드<br />
<span>스테파노로시</span></p>
<p class="txt ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">스테파노로시는 높은 퀄리티를 추구하며<br />
트렌디하면서도 기본 디자인을 충족시켜주는<br />
캐주얼 브랜드입니다.</p>
<div class="img ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><img alt="" src="https://image.a-rt.com/art/editor/202610/1791343154870.png" /></div>
</div>
<!-- 브랜드 데이 혜택 1: 신상품 쿠폰 영역 전체 삭제 -->
<div class="content _discount">
<p class="content_sub_ttl ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">브랜드 데이 혜택</p>
<p class="content_main_ttl ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">브랜드 데이 추가 할인</p>
<p class="content_txt ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">지금 가장 필요한 상품,<br />
단 이틀 더 높아지는 <span>최대</span> 할인 혜택</p>
<div class="img ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><img alt="" src="https://image.a-rt.com/art/editor/202610/1791343163969.png" /></div>
</div>
<div class="content _countdown">
<p class="ttl ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">브랜드 데이 종료까지</p>
<div class="countdown_box ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%">
<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>
</div>
<!-- e : art-container-event --><!-- 타이머 스크립트 --><script>
const targetDate = new Date("2026-10-29T00:00:00").getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = targetDate - now;
if (distance <= 0) {
clearInterval(timerInterval);
document.getElementById("days").textContent = "00";
document.getElementById("hours").textContent = "00";
document.getElementById("minutes").textContent = "00";
document.getElementById("seconds").textContent = "00";
return;
}
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');
}
const timerInterval = setInterval(updateCountdown, 1000);
updateCountdown();
</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 });
io.observe(el);
});
}
const container = document.querySelector('.art-container-event');
if (!container) return;
waitImagesLoaded(container, initAni);
})();
</script><!-- E : 이벤트 복사영역 여기까지 -->