<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">/* webfont */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); /* default */ .art-container-event { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; overflow: hidden; } .art-content-inner { position: relative; width: 100%; margin: 0 auto; overflow: hidden; } .art-content-inner img { display: block; width: 100%; } /* keyframes */ @keyframes scale-in { 0% { scale: 1.2; } 100% { scale: 1; } } @keyframes dark-in { 0% { background-color: rgba(0, 0, 0, 0.4); } 100% { background-color: rgba(0, 0, 0, 0); } } @keyframes fade-in { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fade-out { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes move-in { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes move-out { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10%); } } @keyframes right-in { 0% { opacity: 0; transform: translateX(50%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes right-out { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(50%); } } @keyframes left-in { 0% { opacity: 0; transform: translateX(-25%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes left-out { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-25%); } } /* common */ .art-content-inner .ani { opacity: 0; } .art-content-inner .ani:not(.fix) { animation: move-out 0.6s ease-in-out forwards; } .art-content-inner .ani.active { animation: move-in 0.6s ease-in-out forwards; } .art-content-inner .ani.active.delay { animation-delay: 0.4s; } .art-content-inner [class*='txt'] { font-family: Pretendard, sans-serif !important; word-break: keep-all; } .art-content-inner .main-txt { font-size: 50px; font-weight: 800; line-height: 60px; } .art-content-inner .sub-txt { font-size: 20px; font-weight: 500; line-height: 30px; } .art-content-inner[class*='cnt'] { margin-bottom: 300px; } .art-content-inner .blind { width: 1px; height: 1px; overflow: hidden; border: none; position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); } /* main */ .art-content-inner.main { margin-bottom: 150px; } .art-content-inner.main .img-wrap { position: relative; overflow: hidden; } .art-content-inner.main .img-wrap img { animation: scale-in 1s ease-out forwards; } .art-content-inner.main .img-wrap::after { content: ''; position: absolute; top: 0; left: 0; animation: dark-in 1s ease-in-out forwards; width: 100%; height: 100%; } .art-content-inner.main .txt-wrap { margin-top: 150px; } .art-content-inner.main .main-txt { padding-bottom: 60px; } .art-content-inner.main .sub-txt:first-child { padding-bottom: 20px; } .art-content-inner.main .txt-wrap.ani.active .fade-in { animation: fade-in 0.8s ease-in-out forwards; } .art-content-inner.main .txt-wrap.ani.active .fade-out { animation: fade-out 0.8s ease-in-out forwards; } /* cnt1 */ .art-content-inner.cnt1 { max-width: 640px; } .art-content-inner.cnt1 .video-wrap { position: relative; width: 100%; margin-bottom: 50px; } .art-content-inner.cnt1 .video-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; } .art-content-inner.cnt1 .btn-sound { position: absolute; bottom: 30px; left: 30px; width: 60px; height: 60px; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; background-image: url('https://www.a-rt.com/static/images/showcase/showcase_btn_music_bg.png'); background-repeat: no-repeat; background-position: -60px 0; background-size: cover; z-index: 1; } .art-content-inner.cnt1 .btn-sound.active { background-position: 0 0; } .art-content-inner.cnt1 .sub-txt { padding-top: 100px; } /* cnt2 */ .art-content-inner.cnt2 { display: flex; justify-content: space-between; gap: 20px; max-width: 1300px; margin-bottom: 200px; } /* cnt3 */ .art-content-inner.cnt3 { max-width: 640px; } .art-content-inner.cnt3 .swiper { width: 100%; padding-bottom: 108px; overflow: hidden; cursor: pointer; } .art-content-inner.cnt3 .swiper .swiper-pagination { bottom: 0; height: 8px; } .art-content-inner.cnt3 .swiper .swiper-pagination .swiper-pagination-bullet { background: #000; border-radius: unset; width: 100px; height: 8px; margin: 0; transition: all 0.5s; } /* cnt4 */ .art-content-inner.cnt4 [class*='img-wrap'] { position: relative; max-width: 960px; } .art-content-inner.cnt4 .img-wrap-1 { margin-left: auto; margin-bottom: 300px; } .art-content-inner.cnt4 .img-wrap-1 [class*='caption'] { position: absolute; left: -40px; font-size: 20px; font-weight: 500; line-height: 1; writing-mode: vertical-rl; } .art-content-inner.cnt4 .img-wrap-1 .caption-1 { top: 0; } .art-content-inner.cnt4 .img-wrap-1 .caption-2 { bottom: 0; } .art-content-inner.cnt4 .img-wrap-1.ani { animation: right-out 0.8s ease-in-out forwards; } .art-content-inner.cnt4 .img-wrap-1.ani.active { animation: right-in 0.8s ease-in-out forwards; } .art-content-inner.cnt4 .flex-wrap { display: flex; align-items: center; } .art-content-inner.cnt4 .flex-wrap.ani { animation: left-out 0.8s ease-in-out forwards; } .art-content-inner.cnt4 .flex-wrap.ani.active { animation: left-in 0.8s ease-in-out forwards; } .art-content-inner.cnt4 .flex-wrap .sub-txt { flex-grow: 1; } /* cnt5 */ .art-content-inner.cnt5 { display: flex; align-items: center; justify-content: space-evenly; } .art-content-inner.cnt5 .img-wrap { max-width: 640px; } .art-content-inner.cnt5 .flex-wrap { display: flex; flex-direction: column; gap: 20px; } .art-content-inner.cnt4 .flex-wrap.ani { animation: left-out 0.8s ease-in-out forwards; } .art-content-inner.cnt4 .flex-wrap.ani.active { animation: left-in 0.8s ease-in-out forwards; } .art-content-inner.cnt4 .flex-wrap .sub-txt { flex-grow: 1; } /* cnt6 */ .art-content-inner.cnt6 { max-width: 960px; margin-bottom: 100px; } /* credit */ .art-content-inner.credit { margin-bottom: 200px; } .art-content-inner.credit .sub-txt { font-size: 20px; line-height: 30px; letter-spacing: -0.02em; } /* banner */ .art-content-inner.banner .banner-wrap { display: grid; grid-template-columns: repeat(4, 1fr); } .art-content-inner.banner .banner-wrap .banner-trend { grid-column: 1 / span 4; } .art-content-inner.banner .banner-wrap [class*='banner'] { position: relative; cursor: pointer; overflow: hidden; } .art-content-inner.banner .banner-wrap [class*='banner'] img { transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .art-content-inner.banner .banner-wrap [class*='banner']:hover img { transform: scale(1.1); } .art-content-inner.banner .banner-wrap [class*='banner']::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1; } .art-content-inner.banner .banner-wrap [class*='banner']:hover::before { background: rgba(0, 0, 0, 0.6); } .art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap { position: absolute; top: 50%; left: 50px; transform: translateY(-50%); color: #fff; text-align: left; z-index: 2; } .art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap .caption { font-size: 20px; font-weight: 300; margin-bottom: 46px; } .art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap .main { font-size: 40px; font-weight: 800; line-height: 50px; } .art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap .sub { font-size: 20px; font-weight: 400; margin-top: 30px; } .art-content-inner.banner .banner-wrap .banner-trend .txt-wrap { left: 50%; transform: translate(-50%, -50%); text-align: center; } .art-content-inner.banner .banner-wrap .banner-trend .txt-wrap .main { font-size: 48px; line-height: 70px; } .art-content-inner.banner .banner-wrap .banner-trend .txt-wrap .sub { font-size: 20px; line-height: 45px; margin: 0; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner main"> <div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726799649920.jpg" /></div> <div class="txt-wrap ani fix"> <div class="fade-in"> <p class="sub-txt">DISCOVER&nbsp;</p> <p class="main-txt">뉴발란스 408의 매력<br /> 스타일과 기능, 균형의 미학</p> </div> <p class="sub-txt fade-out">일상부터 운동까지, 다양한 활동을 소화하는<br /> 스니커즈를 찾고 있다면 뉴발란스 408이 정답.<br /> 이 만능 스니커즈는 우수한 쿠셔닝과 지지력을 자랑하며,<br /> 러닝과 헬스는 물론 일상의 모든 순간에 함께할 수 있습니다.<br /> <br /> 유행을 타지 않는 클래식함으로 어떤 스타일의 옷에도<br /> 구애받지 않아 꾸준히 사랑받는 스니커즈로<br /> 신발장에 하나쯤 꼭 있어야 할 필수템입니다.</p> </div> </div> <div class="art-content-inner cnt1"> <div class="img-wrap ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726734395398.jpg" /></div> <p class="sub-txt ani">남녀노소 모두가 편안하게 즐길 수 있는 이 스니커즈는<br /> 본래 러닝화로 탄생해 탁월한 기능성을 탑재하고 있습니다.<br /> 뉴발란스 하면 모두가 아는 ABZORB 기술력을 적용한 미드솔과<br /> 튼튼한 아웃솔이 결합되어 뛰어난 충격 흡수 기능을 선사하며<br /> 온종일 발에 가해지는 부담을 최소화합니다.</p> </div> <div class="art-content-inner cnt2"> <div class="img-wrap ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733709508.jpg" /></div> <div class="img-wrap ani delay"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733709492.jpg" /></div> </div> <div class="art-content-inner cnt3"> <div class="swiper swiper1 ani"> <div class="swiper-wrapper"> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733756296.jpg" /></div> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733770367.jpg" /></div> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733782363.jpg" /></div> </div> <div class="swiper-pagination">&nbsp;</div> </div> </div> <div class="art-content-inner cnt4"> <div class="img-wrap-1 ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733800691.jpg" /> <span class="caption-1 txt"></span> <span class="caption-2 txt"></span></div> <div class="flex-wrap ani"> <div class="img-wrap-2"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733814865.jpg" /></div> <p class="sub-txt">패션 아이템으로서 스타일리시한 디자인은<br /> 이미 많은 사랑을 받고 있습니다.<br /> <br /> 클래식한 헤리티지 감성의 캐주얼 룩부터<br /> 스포티한 애슬래저 룩 까지 다양한 카테고리의<br /> 패션 키워드를 소화할 수 있으며,<br /> <br /> 최근 입지가 탄탄히 다져진 만큼 젊은 세대의 취향을<br /> 만족시키고자 트렌디한 소재와 색상, 디테일을 적용한<br /> 모델이 출시되며 나날이 더 큰 인기를 얻고 있습니다.</p> </div> </div> <div class="art-content-inner cnt5"> <p class="sub-txt ani">느리게 다가오는 가을 앞에서,<br /> 캐주얼한 감성을 추구한다면 트렌디한 레더 아이템이나<br /> 가벼운 가디건과 함께 가벼운 데일리 룩을 완성할 수 있으며<br /> 심플한 니트나 맨투맨과 클래식 핏 데님 팬츠와의 매치는<br /> 부드러우면서도 세련된 느낌을 연출합니다.<br /> <br /> 계절이 변해도 뉴발란스 408은 어떤 스타일링에도<br /> 완성도를 더해줄 스니커즈로 새로운 감각을 불어넣어 보세요.</p> <div class="flex-wrap ani"> <div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733832512.jpg" /></div> <div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733846727.jpg" /></div> </div> </div> <div class="art-content-inner cnt6"> <div class="img-wrap ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733862490.jpg" /></div> </div> <div class="art-content-inner credit"> <p class="sub-txt ani">콘텐츠가 마음에 들었다면 &hearts;를 눌러주세요.<br /> 이번 콘텐츠에서 소개된 브랜드의 더 많은 상품을 만나보세요.</p> </div> <div class="art-content-inner banner"> <div class="banner-wrap"> <div class="banner-trend" onclick="window.open('https://www.a-rt.com/display/webzine/trend');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733878590.jpg" /> <div class="txt-wrap"> <p class="main">TREND</p> <p class="sub">매거진 바로가기</p> </div> </div> <div class="banner-editorial" onclick="window.open('https://abcmart.a-rt.com/product/brand/page/main?brandNo=000048&amp;page=1');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733892555.jpg" /> <div class="txt-wrap">&nbsp; <p class="caption">BRAND</p> <p class="main">편안함과 균형감을 선사하는 뉴발란스</p> <p class="sub">불균형한 발에 새로운 균형을</p> </div> </div> <div class="banner-launching" onclick="window.open('https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000005262');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733908339.jpg" /> <div class="txt-wrap"> <p class="caption">PROMOTION</p> <p class="main">뉴발란스의<br /> 다양한 라인업</p> <p class="sub">계절의 완성은 뉴발란스와 함께</p> </div> </div> <div class="banner-style" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1604&amp;wbznType=L');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733944589.jpg" /> <div class="txt-wrap"> <p class="caption">RECOMMEND</p> <p class="main">뉴발란스<br /> 860 v2 컬렉션</p> <p class="sub">가치, 클래식, 그 자체를 담아낸 근본</p> </div> </div> <div class="banner-news" onclick="window.open('https://grandstage.a-rt.com/promotion/planning-display?page=1&amp;pagingSortType=recent');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202409/1726733924761.jpg" /> <div class="txt-wrap"> <p class="caption">MORE</p> <p class="main">더 많은<br /> 기획전 보러가기</p> <p class="sub">가을 신발부터 의류까지</p> </div> </div> </div> </div> </div> <!-- e : art-container-event --><!-- 이미지맵 반응형 스크립트 --><script> function fixImageMaps(force) { var imgs = document.querySelectorAll('img[usemap]'); [].forEach.call(imgs, function (img) { if (!img.naturalHeight) { return; } var h = img.height / img.naturalHeight; var w = img.width / img.naturalWidth; var map = document.getElementsByName(img.useMap.slice(1))[0]; if (!map) { return; } for (var i = 0; i < map.children.length; i++) { var area = map.children[i]; if (!area.coords) { continue; } var coords = area.coords; if (!area.originalCoords) { area.originalCoords = coords; } else { coords = area.originalCoords; } var split = coords.split(','); var fixed = ''; split.forEach(function (coord, n) { if (n != 0) { fixed += ','; } fixed += n % 2 == 0 ? Number(coord) * w : Number(coord) * h; }); area.coords = fixed; } }); } window.onresize = fixImageMaps; window.onload = fixImageMaps; </script><!-- 스크롤 이벤트 스크립트 --><script> $(function () { $(window).on('scroll', function () { const scrollY = $(this).scrollTop() + $(this).height() * 0.7; $('.ani').each(function () { if (scrollY > $(this).offset().top) $(this).addClass('active'); else $(this).removeClass('active'); }); }); }); <!-- 버튼 슬라이드 스크립트 --><script> $(function () { $('.swiper').each(function (i) { $(this) .find('.swiper-pagination') .addClass('type' + i); const mySwiper = new Swiper($(this), { slidesPerView: 1, speed: 1500, allowTouchMove: true, loop: $('.swiper-slide').length > 1, watchOverflow: true, autoplay: { delay: 2000, disableOnInteraction: false, }, pagination: { el: $(this).find('.swiper-pagination.type' + i), clickable: true, }, }); }); }); </script><!-- E : 이벤트 복사영역 여기까지 --><img alt="" src="https://image.a-rt.com/art/editor/202406/1720054159226.jpg" style="width: 1920px; height: 50px;" />