<!-- 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: 80px; --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: rgba(255, 255, 255, 0.8); background-color: #111630; } #tabNav li:hover a, #tabNav li.active a { font-weight: 600; color: rgba(255, 255, 255, 1); } #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/202509/1757484151452.png); } /* content */ .content01 { padding: 60px 0 96px; background-color: #FCEFF1; } .content01_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #E45576; } .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 96px; background-color: #EBEBEB; } .content02_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #E45576; } .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: 48px 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: #F5F3F4; } .content03 { padding: 60px 0 96px; background-color: #111630; color: #ffffff; } .content03_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #FFC2D1; } .content03_txt01 { margin-top: 28px !important; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -1.26px; } .content03_txt02 { margin-top: 14px !important; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.84px; } .content03_brand_wrap { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .content03_brand_wrap._01 { margin-top: 60px !important; } .content03_brand_wrap._02 { margin-top: 24px !important; } .content03_brand_wrap li a { display: flex; flex-direction: column; width: 196px; background-color: rgba(255, 255, 255, 0.16); color: #ffffff; } .content03_item_img { display: flex; justify-content: center; height: 179px; } .content03_item_img01 { max-width: 120px; margin: 47px auto 0; } .content03_item_img02 { max-width: 118px; margin: 48px auto 0; } .content03_item_img03 { max-width: 118px; margin: 48px auto 0; } .content03_item_img04 { max-width: 120px; margin: 48px auto 0; } .content03_item_img05 { max-width: 121px; margin: 76.18px auto 0; } .content03_item_img06 { max-width: 115.9px; margin: 80.95px auto 0; } .content03_item_img07 { max-width: 113.97px; margin: 63.29px auto 0; } .content03_brand_ttl { padding: 14px 0 !important; font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; background-color: #000000; } .content04 { padding: 60px 0 96px; background-color: rgba(246, 113, 144, 0.28); } .content04_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #E45576; } .content04_txt01 { margin-top: 28px !important; font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -1.26px; } .content04_txt02 { margin-top: 14px !important; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.84px; } .content04_category_wrap { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 60px !important; } .content04_category_wrap li a { display: block; max-width: 300px; text-decoration: unset; } .content05 { padding: 60px 0 88px; background-color: #E5E5E5; } .content05_ttl { font-size: 25px; font-weight: 600; line-height: 1; letter-spacing: -1px; color: #E45576; } .content05_txt01 { margin-top: 27px !important; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -1.2px; } .content05_txt02 { margin-top: 14px !important; font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: -0.72px; } .content05_benefit_wrap { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 1056px; margin: 59px auto 0 !important; } .content05_benefit_wrap li { max-width: 518px; height: 156px; } .content05_btn { display: block; width: 518px; margin: 40px auto 0 !important; padding: 28px 0; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -0.96px; color: #ffffff; background-color: #000000; text-decoration: unset; } .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="Fall In New 가을 신상" src="https://image.a-rt.com/art/editor/202509/1757484140275.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">ABC PLUS</a></li> </ul> <div aria-labelledby="tab1" class="art-content-inner cnt content01" id="tabpanel1"> <p class="content01_ttl">AUTUMN BENEFIT 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('3000000665')"><span class="content01_coupon_01_badge"> <img alt="ID당 3회" src="https://image.a-rt.com/art/editor/202509/1757483826878.png" /> </span> <span class="content01_coupon_01_img"> <img alt="COUPON 10% 가을맞이 할인 쿠폰" src="https://image.a-rt.com/art/editor/202509/1757483836615.png" /> </span> </a> <a class="content01_coupon_02" href="javascript:abc.couponDown('3000000663')"> <span class="content01_coupon_02_badge"> <img alt="ID당 1회" src="https://image.a-rt.com/art/editor/202509/1757483848030.png" /> </span> <span class="content01_coupon_02_img"> <img alt="COUPON +5% 가을맞이 중복 쿠폰" src="https://image.a-rt.com/art/editor/202509/1757483859521.png" /> </span> </a></div> <a class="content01_coupon_dl" href="javascript:abc.couponDown('3000000663','3000000665')"><span class="content01_coupon_dl_txt">쿠폰 전체 다운로드</span> <span class="content01_coupon_dl_ico"><img alt="" src="https://image.a-rt.com/art/editor/202509/1757483870778.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/202509/1757483810311.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>쿠폰 다운로드 및 사용 기간 <span class="spot">2025/09/12 11:00 - 2025/10/16 23:59</span></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">AUTUMN BENEFIT 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"> 스니커즈 </span> <span class="content02_item_img01"> <img alt="스니커즈" src="https://image.a-rt.com/art/editor/202509/1757483880279.png" /> </span> </a></li> <li><a href="#prodContent2"><span class="content02_item_ttl"> 러닝화 </span> <span class="content02_item_img02"> <img alt="러닝화" src="https://image.a-rt.com/art/editor/202509/1757483891647.png" /> </span> </a></li> <li><a href="#prodContent3"><span class="content02_item_ttl"> 캐주얼 </span> <span class="content02_item_img03"> <img alt="캐주얼" src="https://image.a-rt.com/art/editor/202509/1757483911328.png" /> </span> </a></li> <li><a href="#prodContent4"><span class="content02_item_ttl"> 아동화 </span> <span class="content02_item_img04"> <img alt="아동화" src="https://image.a-rt.com/art/editor/202509/1757483938989.png" /> </span> </a></li> </ul> </div> <div aria-labelledby="tab3" class="art-content-inner cnt content03" id="tabpanel3"> <p class="content03_ttl">AUTUMN BENEFIT 3.</p> <p class="content03_txt01">가을 추천 베스트 브랜드</p> <p class="content03_txt02">새로운 계절 딱 필요한 베스트 셀러 체크</p> <ul class="content03_brand_wrap _01"> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000050&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img01"> <img alt="나이키" src="https://image.a-rt.com/art/editor/202509/1757483967802.png" /> </span> </span> <span class="content03_brand_ttl"> 나이키 </span> </a></li> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000003&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img02"> <img alt="아디다스" src="https://image.a-rt.com/art/editor/202509/1757483981461.png" /> </span> </span> <span class="content03_brand_ttl"> 아디다스 </span> </a></li> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000048&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img03"> <img alt="뉴발란스" src="https://image.a-rt.com/art/editor/202509/1757483993100.png" /> </span> </span> <span class="content03_brand_ttl"> 뉴발란스 </span> </a></li> </ul> <ul class="content03_brand_wrap _02"> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000081&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img04"> <img alt="누오보" src="https://image.a-rt.com/art/editor/202509/1757484008118.png" /> </span> </span> <span class="content03_brand_ttl"> 누오보 </span> </a></li> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000066&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img05"> <img alt="스테파노로시" src="https://image.a-rt.com/art/editor/202509/1757484019949.png" /> </span> </span> <span class="content03_brand_ttl"> 스테파노로시 </span> </a></li> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000131&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img06"> <img alt="라코스테" src="https://image.a-rt.com/art/editor/202509/1757484031628.png" /> </span> </span> <span class="content03_brand_ttl"> 라코스테 </span> </a></li> <li><a href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000018&amp;page=1&amp;sort=point"><span class="content03_item_img"> <span class="content03_item_img07"> <img alt="닥터마틴" src="https://image.a-rt.com/art/editor/202509/1757484043443.png" /> </span> </span> <span class="content03_brand_ttl"> 닥터마틴 </span> </a></li> </ul> </div> <div aria-labelledby="tab4" class="art-content-inner cnt content04" id="tabpanel4"> <p class="content04_ttl">AUTUMN BENEFIT 4.</p> <p class="content04_txt01">ABC PLUS 가을맞이</p> <p class="content04_txt02">온라인 단독 브랜드 신상 혜택</p> <ul class="content04_category_wrap"> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006216"><img alt="신발" src="https://image.a-rt.com/art/editor/202509/1757484055015.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006217"><img alt="의류" src="https://image.a-rt.com/art/editor/202509/1757484065296.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006218"><img alt="키즈" src="https://image.a-rt.com/art/editor/202509/1757484074437.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006219"><img alt="잡화" src="https://image.a-rt.com/art/editor/202509/1757484081592.png" /> </a></li> </ul> </div> <div class="content05"> <p class="content05_ttl">AUTUMN BENEFIT 5.</p> <p class="content05_txt01">끝나지 않는 멤버십 혜택</p> <p class="content05_txt02">신규 멤버십 회원이라면 누구나 가능</p> <ul class="content05_benefit_wrap"> <li><img alt="01 신규 가입 혜택 5,000원 쿠폰 / 5,000 포인트" src="https://image.a-rt.com/art/editor/202509/1757484095818.png" /></li> <li><img alt="02 4종 쿠폰 증정 앱 설치 / 생일 / 체크인 / 첫 구매" src="https://image.a-rt.com/art/editor/202509/1757484103260.png" /></li> <li><img alt="03 추가 적립 포인트 구매 후기 / 만보기" src="https://image.a-rt.com/art/editor/202509/1757484115463.png" /></li> <li><img alt="04 등급별 상시 혜택 상시 할인 / 추가 적립 / 수선 쿠폰" src="https://image.a-rt.com/art/editor/202509/1757484125792.png" /></li> </ul> <a class="content05_btn" href="https://member.a-rt.com/p/promotion-view/146">자세히 보러 가기 </a></div> <div class="banner_wrap"><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006213"><img alt="ABC마트 스포츠 오픈 안내" src="https://image.a-rt.com/art/editor/202509/1757483784559.png" /> </a> <a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006222"> <img alt="GRAND STAGE 혜택 보러 가기" src="https://image.a-rt.com/art/editor/202509/1757483793061.png" /> </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 : 이벤트 복사영역 여기까지 -->