<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); body { min-width: 1440px; margin: 0; padding: 0; } body * { box-sizing: border-box; } .art-container-event { background: #000000; color: #ffffff; font-family: Pretendard, sans-serif !important; position: relative; width: 100%; max-width: 1920px; 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; } /* 에셋 애니메이션 */ .butterfly { animation: butterfly 4s ease-in-out infinite; } .butterfly img { animation: wing-flap 0.6s ease-in-out infinite; } @keyframes butterfly { 0% { transform: translateX(0) translateY(0) rotate(0deg); } 25% { transform: translateX(-8px) translateY(-10px) rotate(2deg); } 50% { transform: translateX(-5px) translateY(0) rotate(-1deg); } 75% { transform: translateX(-8px) translateY(-8px) rotate(2deg); } 100% { transform: translateX(0) translateY(0) rotate(0deg); } } @keyframes wing-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.92); } } @keyframes rotate5deg { 0% { rotate: 5deg; } 50% { rotate: 0deg; } 100% { rotate: 5deg; } } @keyframes rotate10deg { 0% { rotate: 10deg; } 50% { rotate: 0deg; } 100% { rotate: 10deg; } } /* content */ .mv_wrap { position: relative; } .mv { position: relative; width: 100%; overflow: hidden; } .mv_wrap p { position: absolute; left: 50%; transform: translateX(-50%); font-size: clamp(32px, 2.19vw, 42px); font-weight: 700; line-height: 120%; letter-spacing: -1.12px; color: #ffffff; } .mv_wrap p:nth-of-type(1) { display: flex; align-items: center; bottom: clamp(81px, 5.63vw, 108px); } .mv_wrap p:nth-of-type(1) span { display: flex; align-items: center; } .mv_wrap p:nth-of-type(1) span:nth-of-type(1)::after { content: ''; display: inline-block; width: clamp(1px, 0.1vw, 2px); height: clamp(26px, 1.82vw, 35px); margin: 0 clamp(8px, 0.57vw, 11px) 0 clamp(9px, 0.63vw, 12px); background-color: #ffffff; } .mv_wrap p:nth-of-type(2) { bottom: clamp(43px, 3.02vw, 58px); } .content_copy { display: flex; justify-content: center; align-items: center; gap: 76px; padding: 80px 0; background-color: #DDED9D; } .content_copy_ttl { font-size: 28px; font-weight: 600; line-height: 1; color: #000000; } .content_copy_txt { font-size: 16px; font-weight: 300; line-height: 1.6; letter-spacing: -0.96px; text-align: left; color: #000000; } .content_intro { padding: 64px 0; background-image: url(https://image.a-rt.com/art/editor/202603/1773377511998.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .content_intro_ttl { font-size: 32px; font-weight: 700; line-height: 1.32; letter-spacing: -1.12px; color: #000000; } .content_intro_middle_txt { margin: 10px auto 0 !important; font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.64px; color: #000000; } .content_intro_txt { margin: 18px auto 0 !important; font-size: 16px; font-weight: 300; line-height: 1.6; letter-spacing: -0.64px; color: #000000; } .content { position: relative; padding: 64px 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .content_sub_ttl { font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.8px; color: #000000; } .content_main_ttl { margin: 24px auto 0 !important; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -1px; color: #000000; } .content_txt { margin: 32px auto 0 !important; font-size: 16px; font-weight: 300; line-height: 1.6; letter-spacing: -0.64px; color: #000000; } /* content01 */ .content._01 { background-image: url(https://image.a-rt.com/art/editor/202603/1773377535571.jpg); } .content01_video_wrap { position: relative; max-width: 800px; margin: 48px auto 0 !important; } .content01_video { max-width: 800px; } .content01_video video { width: 800px; } .content01_badge { position: absolute; max-width: 126px; top: -34px; right: -34px; filter: drop-shadow(0 3.5px 3.5px rgba(0, 0, 0, 0.08)); } .content01_img_wrap { position: relative; display: flex; max-width: 1037px; margin: 32px auto 0 !important; } .content01_img01_wrap { position: relative; max-width: 483px; margin-top: 38px !important; margin-left: 0 !important; margin-right: auto !important; z-index: 2; } .content01_img01 { max-width: 483px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content01_img01_wrap .butterfly { position: absolute; max-width: 121px; bottom: 147px; left: -31px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); } .content01_img02_wrap { position: relative; max-width: 356px; margin-top: 0 !important; margin-left: -46px !important; margin-right: auto !important; z-index: 1; } .content01_img02 { position: relative; max-width: 356px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content01_img02_wrap .butterfly { position: absolute; max-width: 86px; top: 1px; right: -56px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); } .content01_img03_wrap { position: relative; max-width: 326px; margin-top: 227px !important; margin-right: 0 !important; margin-left: -82px !important; z-index: 2; } .content01_img03 { position: relative; max-width: 326px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content01_img03_wrap .flower { position: absolute; max-width: 118px; top: -136px; right: -16px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate5deg 3s ease-in-out infinite; transform-origin: bottom left; z-index: 1; } .content._01 .content_txt._02 { margin-top: 1px !important; } /* content02 */ .content._02 { background-image: url(https://image.a-rt.com/art/editor/202603/1773377609553.jpg); } .content02_video_wrap { position: relative; max-width: 800px; margin: 48px auto 0 !important; } .content02_video { max-width: 800px; } .content02_video video { width: 800px; } .content02_img_wrap { position: relative; display: flex; max-width: 1024px; margin: 32px auto 0 !important; } .content02_img01_wrap { position: relative; max-width: 326px; margin-top: 79px !important; margin-left: 0 !important; margin-right: auto !important; z-index: 3; } .content02_img01 { max-width: 326px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content02_img01_wrap .flower { position: absolute; max-width: 114px; top: 1px; left: -67px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate10deg 2s ease-in-out infinite; } .content02_img02_wrap { position: relative; max-width: 516px; margin-top: 37px !important; margin-left: -113px; margin-right: auto !important; z-index: 2; } .content02_img02 { position: relative; max-width: 516px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content02_img02_wrap .flower { position: absolute; max-width: 72px; bottom: 69px; right: 144px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate10deg 2s ease-in-out infinite; } .content02_img03_wrap { position: relative; max-width: 363px; margin-top: 0 !important; margin-left: -67px !important; margin-right: 0 !important; z-index: 1; } .content02_img03 { position: relative; max-width: 363px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content02_img03_wrap .flower { position: absolute; max-width: 100px; top: 67px; right: -40px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate10deg 2s ease-in-out infinite; } .content._02 .content_txt._02 { margin-top: 1px !important; } /* content03 */ .content._03 { background-image: url(https://image.a-rt.com/art/editor/202603/1773377688580.jpg); } .content03_video_wrap { position: relative; max-width: 800px; margin: 48px auto 0 !important; } .content03_video { max-width: 800px; } .content03_video video { width: 800px; } .content03_img_wrap { position: relative; display: flex; max-width: 910px; margin: 32px auto 0 !important; } .content03_img01_wrap { position: relative; max-width: 444px; margin-top: 0 !important; margin-left: 0 !important; margin-right: auto !important; z-index: 1; } .content03_img01 { max-width: 444px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content03_img01_wrap .butterfly { position: absolute; max-width: 122px; top: 35px; left: -50px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); } .content03_flex_wrap { display: flex; flex-direction: column; align-items: center; } .content03_img02_wrap { position: relative; max-width: 495px; margin-top: 19px !important; margin-left: -28px !important; margin-right: auto !important; z-index: 2; } .content03_img02 { position: relative; max-width: 495px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content03_img02_wrap .flower { position: absolute; max-width: 99px; top: 165px; right: -66px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate10deg 2s ease-in-out infinite; } .content03_img03_wrap { position: relative; max-width: 382px; margin-top: -46px !important; margin-left: 29px !important; margin-right: auto !important; z-index: 3; } .content03_img03 { position: relative; max-width: 382px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .content03_img03_wrap .flower { position: absolute; max-width: 88px; bottom: 25px; right: -43px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate10deg 2s ease-in-out infinite; } .content._03 .content_txt._02 { margin-top: 20px !important; } /* content04 */ .content._04 { background-image: url(https://image.a-rt.com/art/editor/202603/1773377756752.jpg); } .fade_img_wrap { position: relative; max-width: 762px; margin: 0 auto !important; } .fade_img { max-width: 762px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); } .fade_img_wrap .flower { position: absolute; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); animation: rotate10deg 2s ease-in-out infinite; } .fade_img_wrap .flower._01 { max-width: 87px; top: 33px; right: -38px; } .fade_img_wrap .flower._02 { max-width: 99px; bottom: 64px; left: -52px; } /* footer */ .footer { padding: 87px 0 106.4px; background-color: #000000; } .footer .btn { display: flex; justify-content: center; align-items: center; gap: 12px; width: 800px; height: 80px; margin: 0 auto; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.8px; text-align: center; text-decoration: none; color: #ffffff; background-color: #000000; border: 1px solid #ffffff; transition: .3s ease; box-sizing: border-box; } .footer .btn:hover { color: #000000; background: #ffffff; } .footer .btn .ico { display: inline-block; width: 32px; height: 32px; background: url(https://image.a-rt.com/art/editor/202511/1762486356070.png) center/cover no-repeat; transition: .3s ease; } .footer .btn:hover .ico { background: url(https://image.a-rt.com/art/editor/202511/1762486365218.png) center/cover no-repeat; } .footer .copy { margin-top: 31.6px !important; text-align: center; font-size: 18px; font-weight: 500; line-height: 1; color: #D3D3D3; } .footer .copy .attention { font-weight: 700; color: #ffffff; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner"> <div class="mv_wrap"> <div class="mv"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377802988.jpg" /></div> <p><span>휠라</span><span>아일릿</span></p> <p>봄 스타일 컬렉션</p> </div> <div class="content_copy"> <p class="content_copy_ttl">DISCOVER</p> <p class="content_copy_txt">잊고 있던 매력과 몰랐던 정보까지,<br /> 다시 발견하는 트렌디한 아이템 소개합니다.</p> </div> <div class="content_intro"> <p class="content_intro_ttl">아일릿이 추천하는<br /> 봄 스타일 스니커즈</p> <p class="content_intro_middle_txt">ONLY ABC-MART</p> <p class="content_intro_txt">레트로 러닝 디자인과 스포티한 실루엣.<br /> 편하게 신기 좋은 휠라 데일리 스니커즈.<br /> 신예 걸그룹 아일릿과 함께하는<br /> 봄 스타일 컬렉션을 만나보세요.</p> </div> <div class="content _01"> <p class="content_sub_ttl">PICK 01.</p> <p class="content_main_ttl">ALPHA RAY</p> <div class="ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="content01_video_wrap"> <div class="content01_video"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3Tfp6jaaVhHmuPTxuujowePMxzxNx4FQQuUuIsSH9LJJaOlAMRxSDdwieie.mp4" /></video> <div class="content01_badge"><img alt="ABC마트 단독 상품" src="https://image.a-rt.com/art/editor/202603/1773377526656.png" /></div> </div> </div> </div> <p class="content_txt _01">레트로 러닝 디자인과 볼륨감 있는 청키 실루엣.<br /> 가벼운 메쉬 어퍼로 통기성과 편안한 착화감, 트렌디한 러닝 무드로 봄 스타일을 완성합니다.</p> <div class="ani content01_img_wrap" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="content01_img01_wrap"> <div class="content01_img01"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377546606.png" /></div> <div class="butterfly"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377556848.png" /></div> </div> <div class="content01_img02_wrap"> <div class="content01_img02"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377567903.png" /></div> <div class="butterfly"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377579060.png" /></div> </div> <div class="content01_img03_wrap"> <div class="content01_img03"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377591801.png" /></div> <div class="flower"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377599527.png" /></div> </div> </div> <p class="content_txt _02">레트로 러닝 무드의 새로운 실루엣<br /> 휠라 알파레이</p> </div> <div class="content _02"> <p class="content_sub_ttl">PICK 02.</p> <p class="content_main_ttl">PRONTO V3</p> <div class="ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="content02_video_wrap"> <div class="content02_video"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3Tfp6jaaVhHkQGXrNhajIDPMxzxNx4FQQuUuIsSH9LJINVWMoisJEMWgieie.mp4" /></video> </div> </div> </div> <p class="content_txt _01">비대칭 사선 라인이 돋보이는 스니커즈.<br /> 푹신한 쿠셔닝과 부드러운 인솔로 편안한 착화감, 스포티한 무드로 봄 스타일에 포인트를 더해줍니다.</p> <div class="ani content02_img_wrap" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="content02_img01_wrap"> <div class="content02_img01"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377620928.png" /></div> <div class="flower"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377629674.png" /></div> </div> <div class="content02_img02_wrap"> <div class="content02_img02"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377639117.png" /></div> <div class="flower"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377647667.png" /></div> </div> <div class="content02_img03_wrap"> <div class="content02_img03"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377656601.png" /></div> <div class="flower"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377677428.png" /></div> </div> </div> <p class="content_txt _02">세련된 사선 라인의 스포티 스니커즈<br /> 휠라 프론토 V3</p> </div> <div class="content _03"> <p class="content_sub_ttl">PICK 03.</p> <p class="content_main_ttl">GLIO</p> <div class="ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="content03_video_wrap"> <div class="content03_video"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3Tfp6jaaVhHliscLWgzJFDzvMxzxNx4FQQuUuIsSH9LJKqaonx5Q4Ktwieie.mp4" /></video> </div> </div> </div> <p class="content_txt _01">1996년 러닝화에서 영감을 받은 모델.<br /> 발레 무드를 더한 날렵한 라인, 심플한 형태로 다양한 봄 데일리 룩에 가볍게 매치됩니다.</p> <div class="ani content03_img_wrap" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="content03_img01_wrap"> <div class="content03_img01"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377700146.png" /></div> <div class="butterfly"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377708463.png" /></div> </div> <div class="content03_flex_wrap"> <div class="content03_img02_wrap"> <div class="content03_img02"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377720881.png" /></div> <div class="flower"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377730278.png" /></div> </div> <div class="content03_img03_wrap"> <div class="content03_img03"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377739841.png" /></div> <div class="flower"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377748089.png" /></div> </div> </div> </div> <p class="content_txt _02">날렵한 라인이 돋보이는 깔끔한 디자인<br /> 휠라 글리오</p> </div> <div class="content _04"> <div class="ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y=""> <div class="fade_img_wrap"> <div class="fade_img"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377782553.png" /> <img alt="" src="https://image.a-rt.com/art/editor/202603/1773377791109.png" /></div> <div class="flower _01"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377765340.png" /></div> <div class="flower _02"><img alt="" src="https://image.a-rt.com/art/editor/202603/1773377773952.png" /></div> </div> </div> <p class="content_txt">매일 신어도 부담 없는 디테일과 컬러로<br /> 손쉽게 봄 스타일을 완성하세요.</p> </div> <div class="footer"><a class="btn" href="https://www.a-rt.com/display/webzine/magazine">더 많은 콘텐츠 보러가기<span class="ico"></span></a> <p class="copy">콘텐츠가 마음에 들었다면 <span class="attention">좋아요</span>를 눌러주세요.</p> </div> </div> </div> <!-- e : art-container-event --><!-- 애니메이션 --><script> (function () { 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.3; 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); }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initAni); } else { initAni(); } })(); </script><!-- 이미지 페이드 전환 --><script> (function () { function initFadeImg() { const targets = document.querySelectorAll(".fade_img"); targets.forEach((wrap, idx) => { const imgs = wrap.querySelectorAll("img"); const count = imgs.length; const gap = 3; const total = count * gap; const step = 100 / count; const fadeIn = step * 0.1; const stay = step; const fadeOut = step * 1.3; const name = "fade_img_" + idx; let key = ` @keyframes ${name}{ 0%{opacity:0;} ${fadeIn}%{opacity:1;} ${stay}%{opacity:1;} ${fadeOut}%{opacity:0;} 100%{opacity:0;} }`; const style = document.createElement("style"); style.textContent = ` .fade_img{ position:relative; } .fade_img img{ width:100%; opacity:0; animation-name:${name}; animation-timing-function:linear; animation-iteration-count:infinite; animation-play-state:paused; } .fade_img.on img{ animation-play-state:running; } .fade_img img:first-child{ position:relative; } .fade_img img:not(:first-child){ position:absolute; inset:0; } ` + key; document.head.appendChild(style); imgs.forEach((img, i) => { img.style.animationDuration = total + "s"; img.style.animationDelay = (i * gap) + "s"; }); }); const observer = new IntersectionObserver((entries, io) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("on"); io.unobserve(entry.target); } }); }, { threshold: 0.3 }); targets.forEach(el => observer.observe(el)); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initFadeImg); } else { initFadeImg(); } })(); </script><!-- 1920px 스크립트 --><script> function editorCalcWidth() { var width_size = $(window).width(); if (width_size > 1440) $('.editor-wrap').css({ width: width_size }); } $(document).ready(function () { editorCalcWidth(); }); $(window).on('scroll resize', function () { editorCalcWidth(); }); </script><!-- E : 이벤트 복사영역 여기까지 -->