<!-- 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: 94px; --font: 'pretendard', sans-serif; --tab-txt: #516ca5; --tab-bg: #001b55; --tab-active-txt: #fff; --tab-active-bg: #001b55; } /* common */ .art-container-event { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; } .art-content-inner { position: relative; /* display: flex; justify-content: center; */ margin: 0 auto; overflow: hidden; } .art-content-inner img { display: block; width: 100%; } /* cnt */ #tabpanel1 { display: flex; flex-direction: column; gap: 10px; background-color: #7fe3ff; padding-bottom: 100px; } #tabpanel1 .video-wrap { width: 1280px; padding: 100px 0; margin: 0 auto; } #tabpanel1 .video-wrap .video-ratio { position: relative; height: 0; padding-top: 56.25%; } #tabpanel1 .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sale-list { position: absolute; left: 0; top: 0; display: grid; width: 100%; overflow: hidden; } .sale-list .sale-link { display: block; width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; } #tabpanel2 .sale-list { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(1, 13.59vw); gap: 0.52vw; padding: 12.24vw 11.2vw 0; } #tabpanel3 .sale-list { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(1, 9.9vw); gap: 0.52vw; padding: 12.29vw 23.54vw 0; } #tabpanel3 .sale-list.down { top: unset; bottom: 0; grid-template-columns: repeat(4, 1fr); padding: 0 28.91vw 5.21vw; } #tabpanel5 .sale-list { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(1, 16.2vw); gap: 1.04vw; padding: 12.29vw 16.04vw 0; } @media (min-width: 1920px) { #tabpanel2 .sale-list { grid-template-rows: repeat(1, 261px); gap: 10px; padding: 235px 215px 0; } #tabpanel3 .sale-list { grid-template-rows: repeat(1, 190px); gap: 10px; padding: 236px 452px 0; } #tabpanel3 .sale-list.down { padding: 0 555px 100px; } #tabpanel5 .sale-list { grid-template-rows: repeat(1, 311px); gap: 20px; padding: 236px 308px 0; } } @media (max-width: 1440px) { #tabpanel2 .sale-list { grid-template-rows: repeat(1, 196px); gap: 7px; padding: 176px 161px 0; } #tabpanel3 .sale-list { grid-template-rows: repeat(1, 143px); gap: 8px; padding: 177px 340px 0; } #tabpanel3 .sale-list.down { padding: 0 417px 75px; } #tabpanel5 .sale-list { grid-template-rows: repeat(1, 234px); gap: 15px; padding: 177px 230px 0; } } /* float banner */ .float-banner { position: fixed; bottom: 220px; right: 30px; display: block; width: 185px; opacity: 0; z-index: 99; } /* gnb */ #tabNav { position: sticky; top: var(--head); z-index: 2; background-color: #001b55; } #tabNav .tablist { display: flex; justify-content: center; font-family: var(--font) !important; max-width: 1200px; margin: 0 auto; transition: all 0.3s; } #tabNav li { font-size: 20px; font-weight: 500; line-height: 56px; color: var(--tab-txt); background-color: var(--tab-bg); transition: all 0.3s; } #tabNav li a { padding-left: 76px; } #tabNav li:not(:last-child) a::after { content: ''; display: inline-block; background-color: #516ca5; width: 1px; height: 20px; margin-left: 76px; vertical-align: middle; } #tabNav li:hover, #tabNav li.active { font-weight: 600; color: var(--tab-active-txt); background-color: var(--tab-active-bg); } #tabNav li a { display: block; width: 100%; height: 100%; } /* modal */ .md-cnt.notice { visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Pretendard', sans-serif !important; 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 { color: #ee1c25; font-weight: 600; } .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 main"><img alt="" src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/main.jpg" /></div> <!-- GNB --> <nav id="tabNav"> <ul class="tablist" role="tablist"> <li aria-controls="tabpanel1" class="tab" id="tab1" role="tab"><a href="#tabpanel1">구매 혜택</a></li> <li aria-controls="tabpanel2" class="tab" id="tab2" role="tab"><a href="#tabpanel2">카테고리 세일</a></li> <li aria-controls="tabpanel3" class="tab" id="tab3" role="tab"><a href="#tabpanel3">브랜드 세일</a></li> <li aria-controls="tabpanel4" class="tab" id="tab4" role="tab"><a href="#tabpanel4">이벤트</a></li> </ul> </nav> <div aria-labelledby="tab1" class="art-content-inner cnt" id="tabpanel1"> <div class="video-wrap"> <div class="video-ratio"><iframe src="https://play.wecandeo.com/video/v/?key=BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3l8VX9M2yPipKBos2TaADJcAieie&amp;auto=true"></iframe></div> </div> <div><img src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/01-01.png" usemap="#map1" /><map name="map1"><area alt="10% 쿠폰 다운로드" coords="587,222,948,397" href="javascript:abc.couponDown('3000000535')" shape="rect" /> <area alt="30% 쿠폰 다운로드" coords="970,226,1327,396" href="javascript:abc.couponDown('3000000540')" shape="rect" /> <area alt="쿠폰 유의사항" aria-haspopup="dialog" class="btn-md" coords="894,414,1032,469" data-href="#modal1" href="#;" shape="rect" /></map></div> <div><img src="https://image.a-rt.com/art/editor/202507/1751609192280.png" /></div> <div><img src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/01-03.png" usemap="#map2" /><map name="map2"><area alt="멤버십 회원 전용 추가 혜택 더 보러가기" coords="766,360,1148,460" href="https://member.a-rt.com/p/promotion-view/146" shape="rect" target="_blank" /></map></div> </div> <div aria-labelledby="tab2" class="art-content-inner cnt" id="tabpanel2"><img src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/02.jpg" /> <ul class="sale-list"> <li class="sale-item"><a class="sale-link" href="#prodContent1">카테고리 - 샌들</a></li> <li class="sale-item"><a class="sale-link" href="#prodContent2">카테고리 - 스니커즈</a></li> <li class="sale-item"><a class="sale-link" href="#prodContent3">카테고리 - 라이프 스타일</a></li> <li class="sale-item"><a class="sale-link" href="#prodContent4">카테고리 - 의류</a></li> <li class="sale-item"><a class="sale-link" href="#prodContent5">카테고리 - 용품</a></li> </ul> </div> <div aria-labelledby="tab3" class="art-content-inner cnt" id="tabpanel3"><img src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/03.jpg" /> <ul class="sale-list up"> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006054" target="_blank">브랜드 - 크록스</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006055" target="_blank">브랜드 - 토앤토</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006056" target="_blank">브랜드 - 나이키</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006057" target="_blank">브랜드 - 아디다스</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006058" target="_blank">브랜드 - 반스</a></li> </ul> <ul class="sale-list down"> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006059" target="_blank">브랜드 - 푸마</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006060" target="_blank">브랜드 - 컨버스</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006061" target="_blank">브랜드 - 써코니</a></li> <li class="sale-item"><a class="sale-link" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006062" target="_blank">브랜드 - 라코스테</a></li> </ul> </div> <div aria-labelledby="tab4" class="art-content-inner cnt" id="tabpanel4"><img src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/04.jpg" usemap="#map3" /><map name="map3"><area alt="잭팟 이벤트 참여하러 가기" coords="756,510,1160,628" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002223" shape="rect" target="_blank" /> <area alt="5만원 이상 구매 시, 여행상품권 응모하러 가기" coords="765,1086,1162,1197" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002221" shape="rect" target="_blank" /></map></div> <!-- 하단 띠배너 --> <div class="art-content-inner banner"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006017" target="_blank"><img alt="ABC-MART 혜택 보러 가기" src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/banner1.jpg" /> </a></div> <div class="art-content-inner banner"><a href="https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1947&amp;wbznType=N" target="_blank"><img alt="SUMMER SHIFT, 시즈널 포커스 EP.2 직장인에게도 여름방학을 달라" src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/banner2.jpg" /> </a></div> <!-- 플로팅 배너 --> <div class="float-banner" id="floBnr"><a href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002223" target="_blank"><img alt="100% 당첨! 추가 할인 쿠폰 받기" src="https://image.a-rt.com/art/managing/event/20250702_blue_abc/gs/pc/float-banner.png" /> </a></div> <!-- 모달창 --> <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>쿠폰은 통합 멤버십 회원 대상이며, ID당 다운로드 횟수는 3회입니다.</li> <li>30% 선착 한정 쿠폰은 ID당 다운로드 횟수는 1회이며, <span class="spot" style="font-weight: 600">매일 자정 갱신됩니다.</span></li> <li>30% 선착 한정 쿠폰 사용 가능 상품은 마이페이지에서 확인 가능합니다.</li> <li>쿠폰에 따라 발급 수량이 다를 수 있습니다.</li> <li>쿠폰은 07월 04일부터 07월 31일까지 다운로드 가능합니다.</li> <li>쿠폰의 유효기간은 발급 후 1주일 이오니 사용 간 참고 부탁드립니다.</li> <li>다운로드한 쿠폰은 마이페이지 &gt; 쇼핑 혜택 &gt; 쿠폰 리스트에서 확인 가능합니다.</li> <li>본 이벤트는 당사 사정에 의해 사전 고지 없이 내용 변경 및 조기 종료될 수 있습니다.</li> <li class="spot">일부 브랜드 및 상품은 쿠폰 적용이 불가할 수 있습니다.</li> </ul> </div> <button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <!-- e : art-container-event --><!-- 1920px 스크립트 --><script> function editorCalcWidth() { var width_size = $(window).width(); if (width_size > 1200) $('.editor-wrap').css({ width: width_size }); } 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; } }); } $(document).ready(function () { editorCalcWidth(); fixImageMaps(); }); $(window).on('scroll resize', function () { editorCalcWidth(); fixImageMaps(); }); </script><!-- GNB 스크립트 --><script> $(document).ready(function () { const topSpace = 150; function onScroll() { const scrollY = Math.ceil($(window).scrollTop() + topSpace); $('.art-content-inner.cnt').each(function () { const cntTop = Math.floor($(this).offset().top); const cntBtm = cntTop + $(this).height(); if (scrollY >= cntTop && scrollY < cntBtm) { $(this).addClass('active'); $('#' + $(this).attr('aria-labelledby')) .addClass('active') .siblings() .removeClass('active'); } else { $(this).removeClass('active'); $('#' + $(this).attr('aria-labelledby')).removeClass('active'); } }); } $('#tabNav li a').on('click', function (event) { event.preventDefault(); $('html, body') .stop() .animate({ scrollTop: $($(this).attr('href')).offset().top - topSpace }, 300); }); $(window).on('scroll', onScroll); }); </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><!-- GSAP 라이브러리 로드 --><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script><!-- 플로팅 배너 스크립트 --><script> $(document).ready(function () { $(window).on('scroll', function () { if ($(this).scrollTop() < 100 || $('.art-container-event').height() - $(window).height() <= $(this).scrollTop()) { gsap.to('#floBnr', { opacity: 0, duration: 0.3, onComplete: function () { $('#floBnr').css('pointer-events', 'none'); }, }); } else { gsap.to('#floBnr', { opacity: 1, duration: 0.3, onStart: function () { $('#floBnr').css('pointer-events', 'auto'); }, }); } }); }); </script><!-- E : 이벤트 복사영역 여기까지 -->