<!-- 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: 95px; --font: 'pretendard', sans-serif; --tab-txt: #595959; --tab-bg: #2f2f2f; --tab-active-txt: #fff; --tab-active-bg: #000; } /* common */ body { min-width: 1440px; margin: 0; padding: 0; } .art-container-event { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; } .art-content-inner { position: relative; margin: 0 auto; overflow: hidden; } .art-container-event ul { margin: 0; padding: 0; list-style: none; } .art-container-event p { margin: 0; padding: 0; } .art-container-event a { text-decoration: none; } .art-content-inner img { display: block; width: 100%; } /* gnb */ #tabNav { position: sticky; top: var(--head); display: flex; justify-content: center; font-family: var(--font) !important; background-color: #fff; transition: all 0.3s; z-index: 2; width: 100%; } #tabNav li { position: relative; width: 100%; transition: all 0.3s; } #tabNav li a { display: flex; padding: 28px 0; justify-content: center; align-items: center; font-family: Pretendard; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -1px; color: #6BA07F; background-color: #B5FF54; } #tabNav li:hover a, #tabNav li.active a { font-weight: 600; color: #000000; } #tabNav li:not(:last-child) a::after { content: ''; position: absolute; width: 1px; height: 20px; right: 0; background-image: url(https://image.a-rt.com/art/editor/202510/1761032382639.png); background-repeat: no-repeat; background-size: cover; } /* content */ .content01 { padding: 60px 0 96px; background-color: #F8FFE6; } .content01_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #35A700; } .content01_txt01 { margin-top: 28px !important; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -1.26px; } .content01_txt02 { margin-top: 14px !important; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.84px; } .content01_coupon_wrap { display: flex; justify-content: center; gap: 20px; margin-top: 67px !important; } .content01_coupon_01 { position: relative; max-width: 249px; } .content01_coupon_01_badge { position: absolute; width: 106px; height: 108px; top: -35px; left: 182px; z-index: 1; } .content01_coupon_02 { position: relative; max-width: 249px; } .content01_coupon_02_badge { position: absolute; width: 106px; height: 108px; top: -35px; left: 182px; } .content01_coupon_dl { display: flex; justify-content: center; align-items: center; gap: 6px; width: 518px; margin: 40px auto 0 !important; padding: 27.5px 0; background-color: #000000; color: #ffffff; } .content01_coupon_dl_txt { font-size: 25px; font-weight: 500; line-height: 1; letter-spacing: -1px; } .content01_coupon_dl_ico { max-width: 24px; } .btn-md { display: flex; justify-content: center; align-items: center; gap: 8px; width: 518px; margin: 18px auto 0 !important; padding: 27.5px 0; color: #000000; } .content01_caution_ico { max-width: 20px; } .content01_caution_txt { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; } .content02 { padding: 60px 0 80px; background-color: #CFFF91; } .content02_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #35A700; } .content02_txt01 { margin-top: 28px !important; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -0.84px; } .content02_txt02 { margin-top: 14px !important; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.84px; } .content02_item_wrap { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 620px; margin: 64px auto 0 !important; } .content02_item_wrap li { max-width: 300px; } .content02_item_wrap li a { color: #000000; text-decoration: unset; } .content02_item_ttl { display: flex; justify-content: center; padding: 13.5px 0 !important; font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; background-color: #ffffff; } .content03 { padding: 60px 0 76px; background-image: url(https://image.a-rt.com/art/editor/202510/1761032316887.jpg); background-repeat: no-repeat; background-size: cover; } .content03_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #35A700; } .content03_txt01 { margin-top: 28px !important; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -1.26px; color: #ffffff; } .content03_txt02 { margin-top: 14px !important; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.84px; color: #ffffff; } .content03_img01 { max-width: 673px; margin: 64px auto 0; } .content03_btn { display: flex; justify-content: center; align-items: center; gap: 12px; width: 529px; height: 80px; margin: 46px auto 0 !important; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.4px; color: #ffffff; border: 1px solid #ffffff; text-decoration: unset; } .content03_btn_img { max-width: 9.07px; } .content04 { padding: 60px 0; background-image: url(https://image.a-rt.com/art/editor/202510/1761032351591.jpg); background-repeat: no-repeat; background-size: cover; } .content04_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #35A700; } .content04_txt01 { margin-top: 27px !important; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1.2px; color: #ffffff; } .content04_txt02 { margin-top: 14px !important; font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: -0.72px; color: #ffffff; } .content04_img { max-width: 670px; margin: 63px auto 0; } .content04_btn { display: flex; justify-content: center; align-items: center; gap: 9.83px; width: 529px; height: 80px; margin: 64px auto 0 !important; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.4px; color: #ffffff; border: 1px solid #ffffff; text-decoration: unset; } .content04_btn_img { max-width: 9.07px; } .banner_wrap { max-width: 1920px; min-width: 1440px; margin: 0 auto; } .banner_wrap a { display: block; } .banner_wrap a img { display: block; width: 100%; height: auto; } /* 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 { font-weight: 600; background-color: #FCEFF1; 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 main"><img alt="ABC SALE" src="https://image.a-rt.com/art/editor/202510/1761032392999.jpg" /></div> <!-- GNB --> <ul id="tabNav" 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> <div aria-labelledby="tab1" class="art-content-inner cnt content01" id="tabpanel1"> <p class="content01_ttl">에이비씨세일 혜택 1.</p> <p class="content01_txt01">온라인 단독 쿠폰 증정</p> <p class="content01_txt02">기간 한정으로 오직 멤버십 회원만 드리는 혜택</p> <div class="content01_coupon_wrap"><a class="content01_coupon_01" href="javascript:abc.couponDown('3000000737')"><span class="content01_coupon_01_badge"> <img alt="ID당 3회" src="https://image.a-rt.com/art/editor/202510/1761032230075.png" /> </span> <span class="content01_coupon_01_img"> <img alt="COUPON 10% 단독 할인 쿠폰" src="https://image.a-rt.com/art/editor/202510/1761032239568.png" /> </span> </a> <a class="content01_coupon_02" href="javascript:abc.couponDown('3000000736')"> <span class="content01_coupon_02_badge"> <img alt="ID당 1회" src="https://image.a-rt.com/art/editor/202510/1761032248402.png" /> </span> <span class="content01_coupon_02_img"> <img alt="COUPON +5% 단독 중복 쿠폰" src="https://image.a-rt.com/art/editor/202510/1761032256556.png" /> </span> </a></div> <a class="content01_coupon_dl" href="javascript:abc.couponDown('3000000737','3000000736')"><span class="content01_coupon_dl_txt">쿠폰 전체 다운로드</span> <span class="content01_coupon_dl_ico"><img alt="" src="https://image.a-rt.com/art/editor/202510/1761032269740.png" /></span> </a> <a class="btn-md" data-href="#modal1" href="javascript:void(0);"> <span class="content01_caution_ico"><img alt="" src="https://image.a-rt.com/art/editor/202510/1761032220808.png" /></span> <span class="content01_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>쿠폰 다운로드 및 사용 기간 2025/10/24 11:00 - 2025/11/13 23:59</li> <li>쿠폰은 통합멤버십 회원 대상이며, 쿠폰에 따라 다운로드 횟수가 다를 수 있습니다.</li> <li>일부 상품의 경우 쿠폰 적용 대상에서 제외될 수 있습니다.</li> <li>다운로드한 쿠폰은 마이 페이지 &gt; 쇼핑 혜택 &gt; 쿠폰 리스트에서 확인 가능합니다.</li> <li>본 행사는 당사 사정에 의해 사전 고지 없이 내용 변경 및 조기 종료 될 수 있습니다.</li> <li>쿠폰을 사용하여 주문하신 후 취소/반품 하신 경우, 재발급되지 않습니다.</li> </ul> </div> <button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <div aria-labelledby="tab2" class="art-content-inner cnt content02" id="tabpanel2"> <p class="content02_ttl">에이비씨세일 혜택 2.</p> <p class="content02_txt01">카테고리별 추천 상품</p> <p class="content02_txt02">인기 상품을 에이비씨세일로 저렴하게 둘러보기</p> <ul class="content02_item_wrap"> <li><a href="#prodContent1"><span class="content02_item_ttl"> SNEAKERS </span> <span class="content02_item_img01"> <img alt="SNEAKERS" src="https://image.a-rt.com/art/editor/202510/1761032278055.jpg" /> </span> </a></li> <li><a href="#prodContent2"><span class="content02_item_ttl"> RUNNING </span> <span class="content02_item_img02"> <img alt="RUNNING" src="https://image.a-rt.com/art/editor/202510/1761032286299.jpg" /> </span> </a></li> <li><a href="#prodContent3"><span class="content02_item_ttl"> APPAREL </span> <span class="content02_item_img03"> <img alt="APPAREL" src="https://image.a-rt.com/art/editor/202510/1761032295622.jpg" /> </span> </a></li> <li><a href="#prodContent4"><span class="content02_item_ttl"> ACC </span> <span class="content02_item_img04"> <img alt="ACC" src="https://image.a-rt.com/art/editor/202510/1761032307855.jpg" /> </span> </a></li> </ul> </div> <div aria-labelledby="tab3" class="art-content-inner cnt content03" id="tabpanel3"> <p class="content03_ttl">에이비씨세일 혜택 3.</p> <p class="content03_txt01">러닝 전문관 특별 혜택</p> <p class="content03_txt02">다양한 전문 러닝화 소개와 매월 쿠폰 혜택까지</p> <div class="content03_img01"><img alt="" src="https://image.a-rt.com/art/editor/202510/1761032336180.png" /></div> <a class="content03_btn" href="https://grandstage.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006334"><span>러닝 전문관 보러 가기</span> <span class="content03_btn_img"> <img alt="" src="https://image.a-rt.com/art/editor/202510/1761032326965.png" /> </span> </a></div> <div aria-labelledby="tab4" class="art-content-inner cnt content04" id="tabpanel4"> <p class="content04_ttl">에이비씨세일 혜택 4.</p> <p class="content04_txt01">멤버십 200만 회원 기념 잭팟 이벤트</p> <p class="content04_txt02">매일 참여하고 100% 당첨의 행운을 받으세요</p> <div class="content04_img"><img alt="" src="https://image.a-rt.com/art/editor/202510/1761032373333.png" /></div> <a class="content04_btn" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002241"><span>자세히 보러 가기</span> <span class="content04_btn_img"> <img alt="" src="https://image.a-rt.com/art/editor/202510/1761032363644.png" /> </span> </a></div> <div class="banner_wrap"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006318"><img alt="ABC-MART 혜택 보러 가기" src="https://image.a-rt.com/art/editor/202510/1761032210363.jpg" /> </a></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 = 160; 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 }, 0); }); $(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><!-- E : 이벤트 복사영역 여기까지 -->