<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">/* font */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); /* 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; font-family: Pretendard, sans-serif !important; } .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%; } /* 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: #EDF2C0; 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; } /* content */ .copy_wrap { padding: 90px 0; background-color: #202010; color: #ffffff; } .copy_ttl { font-size: 40px; font-weight: 700; line-height: 1.35; } .copy_txt { margin-top: 20px !important; font-size: 22px; font-weight: 400; line-height: 1.59; } .content01 { padding: 100px 0 72px; background-image: url(https://image.a-rt.com/art/editor/202509/1758697518071.png); background-repeat: no-repeat; background-size: cover; } .content01_ttl { font-size: 25px; font-weight: 600; line-height: 2.16; color: #000000; } .content01_txt01 { margin-top: 12px !important; font-size: 42px; font-weight: 600; line-height: 1.29; letter-spacing: -1.26px; color: #000000; } .content01_txt01 span { color: #747C00; } .content01_txt02 { margin-top: 14px !important; font-size: 23px; font-weight: 500; line-height: 1.74; letter-spacing: -0.92px; } .content01_coupon_wrap { display: flex; justify-content: center; align-items: center; gap: 17px; margin-top: 55px !important; } .content01_coupon_01 { position: relative; max-width: 363px; } .content01_coupon_02 { position: relative; max-width: 363px; } .content01_coupon_03 { position: relative; max-width: 363px; } .content01_coupon_dl { display: flex; justify-content: center; align-items: center; width: 529px; height: 81px; margin: 54px auto 0 !important; font-size: 25px; font-weight: 700; background-color: #000000; color: #ffffff; } .content01 .btn-md { display: inline-flex; justify-content: center; align-items: center; gap: 8px; margin: 61px auto 0 !important; color: #000000; } .content_caution_ico { max-width: 30px; } .content_caution_txt { font-size: 25px; font-weight: 600; line-height: 2.16; } .content02 { padding: 101px 0 60px; background-image: url(https://image.a-rt.com/art/editor/202509/1758697563511.png); background-repeat: no-repeat; background-size: cover; } .content02_ttl { font-size: 25px; font-weight: 600; line-height: 2.16; color: #000000; } .content02_txt01 { margin-top: 12px !important; font-size: 42px; font-weight: 600; line-height: 1.29; letter-spacing: -1.26px; } .content02_txt01 span { color: #8D990F; } .content02_txt02 { margin-top: 14px !important; font-size: 23px; font-weight: 500; line-height: 1.74; letter-spacing: -0.92px; color: #000000; } .content02_img01 { max-width: 576px; margin: 29px auto 0 !important; } .content02 .btn-md { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 43px auto 0 !important; color: #000000; } .content02 .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: 41px 78px; width: 750px; box-sizing: border-box; } .content02_modal_img { max-width: 258px; margin: 0 auto; } .content02 .md-cnt.notice .md-txt { margin-top: 22px !important; padding-top: 0 !important; font-size: 20px; font-weight: 400; line-height: 1.65; letter-spacing: -0.8px; text-align: left; color: #000000; } .content02 .md-cnt.notice .md-txt ul { list-style: inside; list-style-type: '* '; text-indent: -0.6em; padding-left: 0.6em; word-break: keep-all; } .content03 { padding: 93px 0 114px; background-image: url(https://image.a-rt.com/art/editor/202509/1758697594292.png); background-repeat: no-repeat; background-size: cover; } .content03_ttl { font-size: 25px; font-weight: 600; line-height: 2.16; color: #000000; } .content03_txt01 { position: relative; width: 658px; margin: 11px auto 0 !important; font-size: 42px; font-weight: 600; line-height: 1.29; letter-spacing: -1.26px; color: #000000; } .content03_txt01 span::before { content: ''; position: absolute; display: block; width: 366px; height: 32px; right: -1px; bottom: -6px; background-image: url(https://image.a-rt.com/art/editor/202509/1758697686221.png); background-size: cover; background-repeat: no-repeat; } .content03_flex_wrap { display: flex; justify-content: center; align-items: center; gap: 177px; margin: 60px auto 0 !important; } .content03_txt_wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 529px; height: 525px; } .content03_txt_wrap:first-child::after { content: ''; position: absolute; display: block; width: 2px; height: 447px; bottom: 1px; right: -88px; background-color: rgba(229, 237, 163, 0.6); } .content03_txt02 { font-size: 29px; font-weight: 500; line-height: 1.34; letter-spacing: -0.58px; } .content03_txt02 span { font-weight: 700; } .content03_img01 { max-width: 474px; margin-top: 14.95px !important; } .content_btn { display: flex; justify-content: center; align-items: center; width: 529px; height: 80px; margin: 0 auto !important; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.4px; text-decoration: unset; color: #000000; border: 2px solid #000000; box-sizing: border-box; } .content_btn._01 { margin-top: 25.05px !important; } .content_btn._02 { margin-top: 50px !important; } .content_btn_ico { max-width: 9.07px; margin-left: 9.59px; } .content03_txt03 { font-size: 29px; font-weight: 500; line-height: 1.34; letter-spacing: -0.58px; } .content03_txt03 span { font-weight: 700; } .content03_img02 { max-width: 449px; margin-top: 51px !important; } .content03 .md-cnt.notice { width: 750px; padding: 0; box-sizing: border-box; } .content03_md_top_wrap { padding: 46px 69px 47.77px; } .content03_md_ttl { font-size: 30px; font-weight: 600; line-height: 1.4; letter-spacing: -0.6px; } .content03_md_list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30.77px 17.14px; margin-top: 38px !important; } .content03_md_list li { display: flex; justify-content: flex-start; align-items: center; gap: 14.12px; width: 292.86px; } .content03_md_img { max-width: 92px; } .content03_md_txt { font-size: 19px; font-weight: 500; letter-spacing: -0.76px; padding-left: 0.5em !important; text-indent: -0.5em; } .content03_md_txt span { font-size: 16px; font-weight: 400; line-height: 1.56; letter-spacing: -0.64px; } .content03_md_bottom_wrap { padding: 20px 0; background-color: #656565; } .content03_md_bottom_wrap p { font-size: 20px; font-weight: 400; line-height: 1.65; letter-spacing: -0.8px; color: #D9D9D9; } .content04 { padding: 92px 0 95px; background-color: #FDFFDE; } .content04_ttl { font-size: 25px; font-weight: 600; line-height: 2.16; color: #000000; } .content04_txt01 { margin-top: 12px !important; font-size: 42px; font-weight: 600; line-height: 1.29; letter-spacing: -1.26px; color: #000000; } .content04_txt02 { margin-top: 16px !important; font-size: 23px; font-weight: 500; line-height: 1.52; letter-spacing: -0.92px; } .content04_img_wrap { position: relative; width: 386px; margin: 53px auto 0 !important; } .content04_img01 { max-width: 386px; margin: 0 auto; } .content04_img02 { position: absolute; max-width: 123px; top: -48px; right: -58px; } .content04_txt03 { margin-top: 24px !important; font-size: 25px; font-weight: 500; line-height: 1; letter-spacing: -1px; } .content04_btn { display: flex; justify-content: center; align-items: center; width: 529px; height: 80px; margin: 47px auto 0 !important; font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.4px; background-color: #000000; color: #ffffff; } .content04_btn_ico { max-width: 14.85px; margin-left: 9.59px; } .banner_wrap { height: 184px; background-color: #000000; } .banner_wrap a { display: flex; justify-content: center; align-items: center; gap: 154px; padding: 78px 0; } .banner_img { max-width: 143px; } .banner_txt { display: flex; justify-content: center; align-items: baseline; gap: 10px; font-size: 25px; font-weight: 400; letter-spacing: -0.1px; text-decoration: unset; color: #ffffff; } .banner_txt_ico { max-width: 10px; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner"><!-- 메인 이미지 --> <div class="main"><img alt="2025 Special Promotion 추석맞이 풍성한 혜택 09.26 - 10.12" src="https://image.a-rt.com/art/editor/202509/1758697724569.jpg" /></div> <div class="copy_wrap"> <p class="copy_ttl">마음을 전하는 특별 혜택</p> <p class="copy_txt">보름달처럼 가득 준비한 혜택과 함께<br /> 감사의 마음을 더욱 풍성하게 전해보세요.</p> </div> <div class="content01"> <p class="content01_ttl">BENEFIT 1.</p> <p class="content01_txt01">추석 전용 <span>중복 쿠폰팩</span></p> <p class="content01_txt02">실속 있는 한가위 준비, 쿠폰으로 먼저 챙기세요</p> <div class="content01_coupon_wrap"> <div class="content01_coupon_01"><img alt="COUPON PACK +6% 6-8-10 CHUSEOK" src="https://image.a-rt.com/art/editor/202509/1758697527222.png" /></div> <div class="content01_coupon_02"><img alt="COUPON PACK +8% 6-8-10 CHUSEOK" src="https://image.a-rt.com/art/editor/202509/1758697541561.png" /></div> <div class="content01_coupon_03"><img alt="COUPON PACK +10% 6-8-10 CHUSEOK" src="https://image.a-rt.com/art/editor/202509/1758697553464.png" /></div> </div> <a class="content01_coupon_dl" href="javascript:abc.couponDown('3000000693','3000000694','3000000695')">쿠폰 모두 다운로드</a> <a class="btn-md" data-href="#modal1" href="javascript:void(0);"> <span class="content_caution_ico"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697501678.png" /></span> <span class="content_caution_txt">유의사항</span> </a> <!-- 모달창 1 --> <div aria-labelledby="mdTit1" aria-modal="true" class="md-cnt notice" id="modal1" role="dialog"> <div>&nbsp;</div> <div class="md-txt"> <ul> <li>쿠폰 다운로드 및 사용 기간 <span class="spot">2025/09/26 00:00 - 2025/10/12 23:59</span></li> <li>쿠폰은 통합멤버십 회원 대상이며, 각 쿠폰은 ID당 1회 다운로드 가능합니다.</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 class="content02"> <p class="content02_ttl">BENEFIT 2.</p> <p class="content02_txt01">신상품 <span>다족 할인</span> 혜택</p> <p class="content02_txt02">&lsquo;다족할인&rsquo; 아이콘 확인하고 장바구니 &amp; 결제 화면에서 자동 할인</p> <div class="content02_img01"><img alt="1족 구매시 각 10% OFF 2족 구매시 각 20% OFF" src="https://image.a-rt.com/art/editor/202509/1758697573516.png" /></div> <a class="btn-md" data-href="#modal2" href="javascript:void(0);"><span class="content_caution_ico"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697501678.png" /></span> <span class="content_caution_txt">다족 할인 안내</span> </a> <!-- 모달창 1 --> <div aria-modal="true" class="md-cnt notice" id="modal2" role="dialog"> <div class="content02_modal_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697583543.png" /></div> <div class="md-txt"> <ul> <li>상품에 [다족할인] 아이콘이 있는 상품에 한해서만 할인이 적용됩니다.</li> <li>장바구니, 주문서 결제 페이지에서 할인이 적용된 가격을 확인하실 수 있습니다.</li> </ul> </div> <button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <div class="content03"> <p class="content03_ttl">INFO</p> <p class="content03_txt01">전하고 싶은 마음, <span>기다림 없이 전하세요</span></p> <div class="content03_flex_wrap"> <div class="content03_txt_wrap"> <p class="content03_txt02">마음을 담은 한장,<br /> <span>기프트 카드로 센스있게</span></p> <div class="content03_img01"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697622455.png" /></div> <a class="content_btn _01" href="https://grandstage.a-rt.com/giftcard/giftcard-guide?track=W0034"><span>구매 / 선물하기</span> <span class="content_btn_ico"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697487302.png" /></span> </a></div> <div class="content03_txt_wrap"> <p class="content03_txt03">배송 걱정 없이<br /> <span>가까운 매장에서 바로 픽업</span></p> <div class="content03_img02"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697628669.png" /></div> <a class="btn-md content_btn _02" data-href="#modal3" href="javascript:void(0);"><span>픽업 이용 방법</span> <span class="content_btn_ico"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697487302.png" /></span> </a></div> </div> <!-- 모달창 1 --> <div aria-modal="true" class="md-cnt notice" id="modal3" role="dialog"> <div class="content03_md_top_wrap"> <p class="content03_md_ttl">ABC마트<br /> 매장 픽업 이용방법</p> <ul class="content03_md_list"> <li> <div class="content03_md_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758699706026.png" /></div> <p class="content03_md_txt">1.매장픽업 가능 상품 주문</p> </li> <li> <div class="content03_md_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758699730486.png" /></div> <p class="content03_md_txt">2.상품 수령할 매장 선택</p> </li> <li> <div class="content03_md_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758699746638.png" /></div> <p class="content03_md_txt">3.픽업 알림 받기</p> </li> <li> <div class="content03_md_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758699762646.png" /></div> <p class="content03_md_txt">4.매장 방문하여 상품 수령<br /> <span>(알림 수신 후 최대 7일 이내)</span></p> </li> </ul> </div> <div class="content03_md_bottom_wrap"> <p>* 픽업 가능 매장은 주문 단계에서 실시간으로 확인할 수 있어요</p> </div> <button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <div class="content04"> <p class="content04_ttl">EVENT</p> <p class="content04_txt01">구매 페이백 이벤트</p> <p class="content04_txt02">5만원 이상 구매하면 추첨을 통해 기프트카드 증정</p> <div class="content04_img_wrap"> <div class="content04_img01"><img alt="" src="https://image.a-rt.com/art/editor/202509/1758697706819.png" /></div> <div class="content04_img02"><img alt="추첨 100명" src="https://image.a-rt.com/art/editor/202509/1758697716240.png" /></div> </div> <p class="content04_txt03">[ABC마트] 기프트카드 5천원</p> <a class="content04_btn" href="https://grandstage.a-rt.com/promotion/event/detail?eventNo=2000002240"><span>이벤트 보러가기</span> <span class="content04_btn_ico"> <img alt="" src="https://image.a-rt.com/art/editor/202509/1758697696324.png" /> </span> </a></div> <div class="banner_wrap"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?isPreview=A&amp;plndpNo=2000006276"><span class="banner_img"> <img alt="" src="https://image.a-rt.com/art/editor/202509/1758697454239.png" /> </span> <span class="banner_txt"> <span> 더 다양한 상품 보러가기 </span> <span class="banner_txt_ico"> <img alt="" src="https://image.a-rt.com/art/editor/202509/1758697476308.png" /> </span> </span> </a></div> </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><!-- 모달 스크립트 --><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 : 이벤트 복사영역 여기까지 -->