<!-- 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; } /* content */ .mv { position: relative; width: 100%; overflow: hidden; } .mv::before { content: ""; display: block; padding-top: 41.4%; } .mv img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fade 16s infinite; } .mv img:nth-child(1) { opacity: 1; animation-delay: 0s; } .mv img:nth-child(2) { animation-delay: 4s; } .mv img:nth-child(3) { animation-delay: 8s; } .mv img:nth-child(4) { animation-delay: 12s; } @keyframes fade { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } .content_intro { padding: 84px 0; background-color: #000000; } .content_intro_logo { max-width: 121px; margin: 0 auto !important; } .content_intro_ttl { margin-top: 64px !important; font-size: 42px; font-weight: 700; line-height: 1.33; letter-spacing: -0.84px; } .content_intro_txt { margin-top: 31px !important; font-size: 20px; font-weight: 300; line-height: 1.58; letter-spacing: -0.8px; } .content_gift { padding: 100px 0; } .content_gift_sub_ttl { font-size: 25px; font-weight: 400; line-height: 1; } .content_gift_main_ttl { margin: 16px auto 0 !important; font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -0.84px; } .content_gift_wrap { display: flex; gap: 50px; width: 905px; height: 358px; margin: 44px auto 0 !important; padding: 65px 0 65px 65px; background-image: url(https://image.a-rt.com/art/editor/202511/1762913856926.png); background-repeat: no-repeat; background-size: cover; } .content_gift_wrap_img { position: relative; max-width: 310px; } .content_gift_wrap_img::after { content: ''; position: absolute; width: 106px; height: 106px; top: -41px; left: -41px; background-image: url(https://image.a-rt.com/art/editor/202511/1763428925740.png); background-repeat: no-repeat; background-size: cover; } .content_gift_txt_wrap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; text-align: left; } .content_gift_wrap_ttl { font-size: 28px; font-weight: 700; line-height: 1.43; letter-spacing: -1.12px; } .content_gift_wrap_txt { font-size: 20px; font-weight: 300; line-height: 1.65; letter-spacing: -0.8px; } .content_gift_flex_col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 443px; margin: 50px auto 0 !important; } .content_gift_flex_row { display: flex; align-items: center; gap: 18px; } .content_gift_info_ttl { display: flex; justify-content: center; align-items: center; width: 180px; height: 46px; border-radius: 6px; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.48px; color: #ffffff; background-color: #222222; } .content_gift_info_txt { font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: -1.04px; } .btn-md { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 40px auto 0 !important; color: #929292; text-decoration: none; } .content_gift_caution_ico { max-width: 22px; } .content_gift_caution_txt { font-size: 23px; font-weight: 600; line-height: 1; } .content_video { padding: 100px 0; background-color: #000000; } .content_video_wrap { max-width: 480px; margin: 0 auto !important; line-height: 0; } .content_video_wrap video { width: 480px; } .content_wrap { padding: 100px 0; } .content_sub_ttl { font-size: 20px; font-weight: 300; line-height: 1.58; letter-spacing: -0.8px; } .content_main_ttl { margin-top: 5px !important; font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -1px; } .content_flex_row { display: flex; gap: 24px; justify-content: space-between; max-width: 840px; margin: 55px auto 0 !important; } .content_flex_col { display: flex; flex-direction: column; gap: 24px; max-width: 408px; } .content_flex_col._02 { padding-top: 120px; gap: 146px; } .content_txt { font-size: 20px; font-weight: 300; line-height: 1.58; letter-spacing: -0.8px; } .content_txt._01 { margin-left: 41px; margin-right: 0; } .content_txt._02 { margin-right: 41px; margin-left: 0; } .content_txt.ta_l { text-align: left; } .content_txt.ta_r { text-align: right; } /* 애니메이션 */ .animationSection.animation01 { position: relative; width: 480px; height: 600px; margin: 0 auto; } .animationSection.animation02 { position: relative; width: 480px; height: 600px; margin: 0 auto; } /* footer */ .footer { padding: 120px 0; background-color: #000000; } .footer .btn { display: flex; justify-content: center; align-items: center; gap: 12px; width: 800px; height: 98px; font-size: 20px; font-weight: bold; box-sizing: border-box; text-align: center; border: 2px solid #ffffff; transition: .3s ease; text-decoration: none; color: #ffffff; background-color: #000000; margin: 0 auto; } .footer .btn:hover { color: #000000; background: #ffffff; } .footer .btn .ico { display: inline-block; width: 28px; height: 28px; 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: 60px !important; text-align: center; font-size: 22px; color: #D3D3D3; } .footer .copy .attention { font-weight: bold; color: #ffffff; } /* modal */ .md-cnt.notice { visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Pretendard', sans-serif !important; color: #000000; background-color: #fff; padding: 30px; width: 800px; height: auto; z-index: 1000; } .md-cnt.notice .md-tit .main { font-size: 28px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; border-bottom: 2px solid #000; padding-bottom: 30px; } .md-cnt.notice .md-txt { font-size: 18px; letter-spacing: -0.05em; line-height: 1.8; text-align: left; padding-top: 30px; } .md-cnt.notice .md-txt ul { list-style: inside; list-style-type: '- '; text-indent: -12px; padding-left: 12px; } .md-cnt.notice .md-txt li .spot { font-weight: 600; background-color: #D0FFDB; color: #000; } .md-cnt.notice .btn-close { position: absolute; top: 30px; right: 30px; background: url('https://image.a-rt.com/art/managing/event/20230302_NIKE_AIR_MAX_DAY_CAMPAIGN/pc/md/btn2.png') no-repeat center/contain; width: 27px; height: 27px; text-indent: 100%; white-space: nowrap; overflow: hidden; } #dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; cursor: pointer; } .md-open { overflow-y: hidden; padding-right: 17px; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner"> <div class="mv"><img alt="과감함과 절제가 공존 나이키 샥스 Z 네 가지 스타일 완성" src="https://image.a-rt.com/art/editor/202511/1762486376057.jpg" /> <img alt="과감함과 절제가 공존 나이키 샥스 Z 네 가지 스타일 완성" src="https://image.a-rt.com/art/editor/202511/1762492783350.png" /> <img alt="과감함과 절제가 공존 나이키 샥스 Z 네 가지 스타일 완성" src="https://image.a-rt.com/art/editor/202511/1762492800566.png" /> <img alt="과감함과 절제가 공존 나이키 샥스 Z 네 가지 스타일 완성" src="https://image.a-rt.com/art/editor/202511/1762492823720.png" /></div> <div class="content_intro"> <div class="content_intro_logo"><img alt="NIKE" src="https://image.a-rt.com/art/editor/202511/1762486312750.png" /></div> <p class="content_intro_ttl">강렬한 에너지<br /> 나이키 샥스 Z 네 가지 스타일</p> <p class="content_intro_txt">미니멀한 실루엣부터 자유로운 스트릿 무드까지,<br /> 다양한 룩 속에서 존재감이 한층 더 선명해집니다.<br /> 절제된 디자인 안에 숨겨진 에너지와<br /> 새로운 스타일의 나이키 샥스Z를 만나보세요.</p> </div> <!-- 사은품 영역 --> <div class="content_gift"> <p class="content_gift_sub_ttl">PROMOTION</p> <p class="content_gift_main_ttl">구매 사은품 증정 이벤트</p> <div class="content_gift_wrap"> <div class="content_gift_wrap_img"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762913888664.jpg" /></div> <div class="content_gift_txt_wrap"> <p class="content_gift_wrap_ttl">TUKATA x ABC-MART x NIKE<br /> 리미티드 키링</p> <p class="content_gift_wrap_txt">일상의 오브제를 새롭게 풀어내는 리빙 브랜드 TUKATA.<br /> 대표 캐릭터 &lsquo;이고지고&rsquo;를 ABC-MART x NIKE 컬러로<br /> 재해석한 한정판 리미티드 에디션 키링.</p> </div> </div> <div class="content_gift_flex_col"> <div class="content_gift_flex_row"> <p class="content_gift_info_ttl">프로모션 기간</p> <p class="content_gift_info_txt">25. 11. 19&nbsp;~ 소진 시 종료</p> </div> <div class="content_gift_flex_row"> <p class="content_gift_info_ttl">대상 상품</p> <p class="content_gift_info_txt">페이지 하단 관련상품</p> </div> </div> <a class="btn-md" data-href="#modal1" href="javascript:void(0);"><span class="content_gift_caution_ico"> <img alt="" src="https://image.a-rt.com/art/editor/202511/1762913876828.png" /> </span> <span class="content_gift_caution_txt">유의사항</span> </a> <!-- 모달창 1 --> <div aria-labelledby="mdTit1" aria-modal="true" class="md-cnt notice" id="modal1" role="dialog"> <div class="md-tit"> <h4 class="main" id="mdTit1">유의사항</h4> </div> <div class="md-txt"> <ul> <li>사은품은 한정 수량으로 소진 시 종료됩니다.</li> <li>ID당 1회 증정, 색상은 랜덤 발송됩니다.</li> <li>사은품은 교환 및 환불 불가합니다.</li> <li>교환/반품 시 반드시 함께 반납해 주시기 바랍니다.</li> <li>당사 사정에 따라 변경 및 조기 종료될 수 있습니다.</li> </ul> </div> <button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <!--// 사은품 영역 --> <div class="content_video"> <div class="animationSection animation01"> <div class="aniWrap"> <div class="aniImg aniImg01"> <div class="content_video_wrap"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3p7DBKQOJbXFUn5bO4AbnIvMxzxNx4FQQQaXYBcQMfmtfxkYdOp3CAQieie.mp4" /></video> </div> </div> </div> </div> </div> <div class="content_wrap content01"> <p class="content_sub_ttl">LOOK 1.</p> <p class="content_main_ttl">Minimal Chic</p> <div class="content_flex_row"> <div class="content_flex_col"> <div class="content01_img01"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488534694.jpg" /></div> <div class="content01_img02"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488543532.jpg" /></div> </div> <div class="content_flex_col _02"> <div class="content01_img03"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488552043.jpg" /></div> <p class="content_txt ta_l _01">절제된 스타일 속 시크한 에너지,<br /> 은은한 광택과 안정감 있는 실루엣에<br /> 미니멀한 스타일 속 에너지를 드러냅니다.</p> </div> </div> </div> <div class="content_wrap content02"> <p class="content_sub_ttl">LOOK 2.</p> <p class="content_main_ttl">Athleisure</p> <div class="content_flex_row"> <div class="content_flex_col _02"> <div class="content02_img01"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488564837.jpg" /></div> <p class="content_txt ta_r _02">일상 속 움직임을 스타일로 완성한 룩,<br /> 슬림한 실루엣과 기능적인 라인이 조화를 이루며<br /> 활동적인 무드 속 세련된 에너지를 전합니다.</p> </div> <div class="content_flex_col"> <div class="content02_img02"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488580648.jpg" /></div> <div class="content02_img03"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488596014.jpg" /></div> </div> </div> </div> <div class="content_video"> <div class="animationSection animation02"> <div class="aniWrap"> <div class="aniImg aniImg02"> <div class="content_video_wrap"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3p7DBKQOJbXFii7LOfjD1pxfMxzxNx4FQQ31yg4ip7dTj4kjSNnL3Fiiqgieie.mp4" /></video> </div> </div> </div> </div> </div> <div class="content_wrap content03"> <p class="content_sub_ttl">LOOK 3.</p> <p class="content_main_ttl">Feminine</p> <div class="content_flex_row"> <div class="content_flex_col"> <div class="content03_img01"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488610036.jpg" /></div> <div class="content03_img02"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488627487.jpg" /></div> </div> <div class="content_flex_col _02"> <div class="content03_img03"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488639357.jpg" /></div> <p class="content_txt ta_l _01">부드러움에 담은 대담한 포인트,<br /> 핑크 컬러와 실키한 소재가 만나<br /> 우아한 라인 속 강렬한 존재감을 드러냅니다.</p> </div> </div> </div> <div class="content_wrap content04"> <p class="content_sub_ttl">LOOK 4.</p> <p class="content_main_ttl">Casual Street</p> <div class="content_flex_row"> <div class="content_flex_col _02"> <div class="content04_img01"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488653466.jpg" /></div> <p class="content_txt ta_r _02">자유로운 무드 속 편안한 에너지,<br /> 밸런스 있는 실루엣과 여유로운 스타일이<br /> 도시적인 감각으로 완성됩니다.</p> </div> <div class="content_flex_col"> <div class="content04_img02"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488662314.jpg" /></div> <div class="content04_img03"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762488668843.jpg" /></div> </div> </div> </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 () { $(window).on("scroll", function () { doAnimation(".animation01", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 400, 0.3, 0); doAnimation(".animation02", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 400, 0.3, 0); }); function doAnimation(selector, startCSS, endCSS, duration, triggerRatio, delay) { var $section = $(selector); var $img = $section.find(".aniImg"); if ($img.length === 0) return; var ratio = (typeof triggerRatio === "number") ? triggerRatio : 0.5; var delayTime = (typeof delay === "number") ? delay : 0; var triggerPoint = $section.offset().top + ($section.outerHeight() * ratio); if ($section.data("shown") === undefined) { $section.data("shown", false); $img.css($.extend({}, startCSS, { position: "absolute" })); } if ($(window).scrollTop() + $(window).height() > triggerPoint) { if (!$section.data("shown")) { $section.data("shown", true); $img.stop(true, true) .delay(delayTime) .animate(endCSS, duration, "swing"); } } else { if ($section.data("shown")) { $section.data("shown", false); $img.stop(true, true) .delay(delayTime) .animate(startCSS, duration, "swing"); } } } $(window).trigger("scroll"); }); </script><!-- 모달 스크립트 --><script> $(document).ready(function () { $('.btn-md').on('click', function () { const openBtn = $(this); const mdCnt = $($(this).attr('data-href')); const closeBtn = mdCnt.find('.btn-close'); const first = mdCnt.find('[data-link="first"]'); const last = mdCnt.find('[data-link="last"]'); const mainHeight = $('.art-container-event').outerHeight(); $('body').css({ height: mainHeight }).addClass('md-open'); mdCnt.siblings().attr({ 'aria-hidden': true, inert: '' }); mdCnt.before('<div id="dim"></div>'); const dim = $('#dim'); dim.stop().fadeIn().next().css('visibility', 'visible'); first.on('keydown', function (e) { if (e.shiftKey && e.keyCode === 9) { e.preventDefault(); last.focus(); } }); last.on('keydown', function (e) { if (!e.shiftKey && e.keyCode === 9) { e.preventDefault(); first.focus(); } }); closeBtn.on('click', function () { $('body').css({ height: '' }).removeClass('md-open'); dim.stop().fadeOut(function () { $(this).remove(); }); mdCnt.css('visibility', 'hidden').siblings().removeAttr('aria-hidden inert'); openBtn.focus(); }); dim.on('click', function () { closeBtn.trigger('click'); }); $(window).on('keydown', function (e) { if (e.keyCode === 27) closeBtn.click(); }); }); }); </script><!-- 1920px 스크립트 --><script> function editorCalcWidth() { var width_size = $(window).width(); if (width_size > 1200) $('.editor-wrap').css({ width: width_size }); } $(document).ready(function () { editorCalcWidth(); }); $(window).on('scroll resize', function () { editorCalcWidth(); }); </script><!-- E : 이벤트 복사영역 여기까지 -->