<!-- S : 이벤트 복사영역 여기서부터 --><style type="text/css">/* font */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); @font-face { font-family: 'JalnanGothic'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff'); font-weight: normal; font-style: normal; } /* root */ :root { --head: 94px; /* a-rt 100px / abc 80px / gs 94px / ots 116px */ --font: 'JalnanGothic', sans-serif; --bg-color: #fff; } /* 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%; } /* gnb */ #tabNav { position: sticky; top: var(--head); display: flex; justify-content: center; font-family: var(--font) !important; gap: 1px; background-color: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); transition: all 0.3s; z-index: 2; width: 100%; } #tabNav li { font-size: 24px; line-height: 80px; color: #fff; background-color: #000; transition: all 0.3s; width: 100%; } #tabNav li:hover, #tabNav li.active { color: #000; background-color: var(--bg-color); } #tabNav li a { display: block; width: 100%; height: 100%; } /* tooltip */ .tooltip .tooltip-btn { display: block; width: fit-content; background-color: #000; color: #fff; padding: 4px 10px; margin: 11px auto 0; } .tooltip-contents.benefit-info { font-size: 13px; line-height: 20px; letter-spacing: -0.45px; word-wrap: break-word; word-break: keep-all; margin-top: 6px; margin-bottom: 6px; } .tooltip-contents.benefit-info .text-box { display: block; max-width: 230px; } .tooltip-contents.benefit-info .text-box2 { max-width: 360px; } .tooltip-contents.benefit-info .text-box ul { list-style: inside; list-style-type: '- '; text-indent: -8px; padding-left: 8px; } .tooltip-contents.benefit-info .title { font-size: 15px; line-height: 20px; letter-spacing: -0.25px; display: block; margin-bottom: 11px; font-weight: 600; } .art-content-inner .icon-tooltip.benefit-info { position: absolute; width: 0.68%; height: 0.72%; } .art-content-inner .icon-tooltip.benefit-info.tip1 { top: 50.43%; left: 36.35%; } .art-content-inner .icon-tooltip.benefit-info.tip2 { top: 50.43%; right: 40.1%; } .art-content-inner .icon-tooltip.benefit-info.tip3 { top: 58.4%; left: 37.97%; } .art-content-inner .icon-tooltip.benefit-info.tip4 { top: 58.4%; right: 40.89%; } .art-content-inner .icon-tooltip.benefit-info.tip5 { top: 18.12%; right: 47.08%; width: 0.68%; height: 1.45%; } .art-content-inner .icon-tooltip.benefit-info.tip6 { bottom: 27.98%; right: 38.91%; width: 0.89%; height: 0.24%; } .art-content-inner .icon-tooltip.benefit-info .tooltip-trigger { width: 100%; height: 100%; vertical-align: top; background: unset; } /* notice */ .art-content-inner.notice { padding: 50px 0; background-color: #eee; } .art-content-inner.notice .benefit-guide-tab .benefit-notice { font-family: 'Noto Sans KR', sans-serif; text-align-last: left; width: 980px; } .art-content-inner.notice .benefit-guide-tab .benefit-notice .title-text { font-size: 16px; line-height: 24px; letter-spacing: -0.3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; margin-bottom: 12px; } .art-content-inner.notice .benefit-guide-tab .benefit-notice .title-text::before { content: ''; display: block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' data-name='!'%3E%3Cg data-name='Ellipse 39'%3E%3Ccircle cx='10' cy='10' r='10' stroke='none'/%3E%3Ccircle cx='10' cy='10' r='9.25'/%3E%3C/g%3E%3Cpath d='M10 6v5' data-name='Line 8'/%3E%3Cpath d='M10 12v2' data-name='Line 9'/%3E%3C/g%3E%3C/svg%3E"); } .art-content-inner.notice .benefit-guide-tab .benefit-notice .line-text { font-size: 13px; line-height: 24px; letter-spacing: -0.3px; color: #666; text-align: left; } .art-content-inner.notice .benefit-guide-tab .benefit-notice .fold-box-list-wrap .fold-box-header { border-bottom: none; } .art-content-inner.notice .benefit-guide-tab .benefit-notice .fold-box-list-wrap .fold-box-contents { padding-top: 0; } .art-content-inner.notice .benefit-guide-tab .benefit-notice .fold-box-list-wrap .fold-box:first-child { border-top-color: #000; }</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/20250404_membership/pc/main.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></ul><div aria-labelledby="tab1" class="art-content-inner cnt" id="tabpanel1"><img src="https://image.a-rt.com/art/managing/event/20250404_membership/pc/cnt1.jpg" usemap="#map1" /><map name="map1"><area alt="멤버십 가입하기" coords="774,442,1145,542" href="https://member.a-rt.com/p/sign-up" shape="rect" target="_blank" /></map> <!-- 툴팁 1 --> <span class="icon-tooltip benefit-info tip1"><button class="tooltip-trigger" type="button"></button> <span class="tooltip-contents benefit-info tooltip-click" data-placement="top-center"> <span class="text-box"> <span>APP 설치 후<br />PUSH 수신동의 시 지급</span> </span> </span> </span> <!-- 툴팁 2 --> <span class="icon-tooltip benefit-info tip2"><button class="tooltip-trigger" type="button"></button> <span class="tooltip-contents benefit-info tooltip-click" data-placement="top-center"> <span class="text-box"> <span>생일 월에 지급</span> </span> </span> </span> <!-- 툴팁 3 --> <span class="icon-tooltip benefit-info tip3"><button class="tooltip-trigger" type="button"></button> <span class="tooltip-contents benefit-info tooltip-click" data-placement="top-center"> <span class="text-box"> <span>매장 방문 후 ABC-CAMP<br />APP에서 체크인 시 지급</span> </span> </span> </span> <!-- 툴팁 4 --> <span class="icon-tooltip benefit-info tip4"><button class="tooltip-trigger" type="button"></button> <span class="tooltip-contents benefit-info tooltip-click" data-placement="top-center"> <span class="text-box"> <span>첫 구매 고객이<br />구매 확정 시 지급</span> </span> </span> </span></div><div aria-labelledby="tab2" class="art-content-inner cnt" id="tabpanel2"><img src="https://image.a-rt.com/art/editor/202504/1744867576346.jpg" usemap="#map2" /><map name="map2"><area alt="내 등급 확인하기" coords="774,654,1148,752" href="https://member.a-rt.com/p/grade-info" shape="rect" target="_blank" /></map> <!-- 툴팁 5 --> <span class="icon-tooltip benefit-info tip5"><button class="tooltip-trigger" type="button"></button> <span class="tooltip-contents benefit-info tooltip-click" data-placement="top-center"> <span class="text-box"> <span class="title">스탬프 안내</span> <span>스탬프는 구매, 매장 체크인, 만보기 등의 다양한 활동에 따라 지급되며, 스탬프 점수를 기준으로 멤버십 등급이 산정됩니다. </span><button class="tooltip-btn" type="button">스탬프 가이드 &gt;</button> </span> </span> </span></div><div aria-labelledby="tab3" class="art-content-inner cnt" id="tabpanel3"><img src="https://image.a-rt.com/art/managing/event/20250404_membership/pc/cnt3.jpg" usemap="#map3" /><map name="map3"><area alt="스탬프 모으기" coords="770,4732,1160,4856" href="https://member.a-rt.com/p/stamp-main" shape="rect" target="_blank" /> <area alt="스탬프 현황" coords="764,6536,1158,6652" href="https://member.a-rt.com/p/stamp-status" shape="rect" target="_blank" /></map> <!-- 툴팁 6 --><div class="icon-tooltip benefit-info tip6"><button class="tooltip-trigger" type="button"></button><div class="tooltip-contents benefit-info tooltip-click" data-placement="top-center"><div class="text-box text-box2"><span class="title">유의사항</span><ul> <li>스탬프마다 최대 점수와 개수에 제한이 있습니다.</li> <li>직전 6개월간 등급 산정에 필요한 스탬프를 모두 획득한 경우, 점수는 등급 산정에 포함되지 않으며 다음 등급 산정 시에 반영됩니다.</li> <li>스탬프 최대 점수와 개수 기준은 [스탬프 현황]에서 확인해 주세요.</li></ul></div></div></div></div><!-- 유의 사항 --><div class="art-content-inner notice"><div class="benefit-guide-tab"><div class="benefit-notice"><p class="title-text">유의사항</p><div class="fold-box-list-wrap"><ul class="fold-box-list" data-type="single"> <li class="fold-box"> <div class="fold-box-header">멤버십 등급 산정 기준</div> <div class="fold-box-contents"> <ul class="line-text-list"> <li class="line-text">멤버십 등급은 직전 6개월 스탬프 점수를 합산하여 산정됩니다.</li> <li class="line-text">멤버십 등급은 매월 1일~5일 내 산정되며, 1개월간 해당 등급이 유지됩니다.</li> <li class="line-text">개척자 등급은 수집가 등급의 상위 1%(최대 1천명)로 선정됩니다.</li> <li class="line-text">부적합한 경로를 통해 부여된 고객 등급은 조정될 수 있습니다.</li> <li class="line-text">등급별 스탬프 산정 점수는 변동될 수 있습니다.</li> <li class="line-text">멤버십 정책은 당사 사정에 따라 변경되거나 중단될 수 있습니다.</li> </ul> </div> </li> <li class="fold-box"> <div class="fold-box-header">멤버십 혜택</div> <div class="fold-box-contents"> <ul class="line-text-list"> <li class="line-text">등급별 혜택은 상이하며, 상세 내용은 ABC-CAMP &gt; 마이페이지 &gt; 등급안내에서 확인 가능합니다.</li> <li class="line-text">온라인 회원이 멤버십 회원으로 전환 시 중복되지 않은 혜택은 유지됩니다.</li> <li class="line-text">회원 탈퇴 후 재가입 시 혜택은 복원 및 재지급되지 않습니다.</li> <li class="line-text">각 쿠폰 별 상세 조건이 상이하므로, 사용 조건 및 적용 대상 상품 등을 확인하신 후 사용해 주시기 바랍니다.</li> <li class="line-text">멤버십 혜택은 변동될 수 있습니다.</li> </ul> </div> </li> <li class="fold-box"> <div class="fold-box-header">포인트 안내</div> <div class="fold-box-contents"> <ul class="line-text-list"> <li class="line-text">포인트는 구매 포인트와 이벤트 포인트로 구분되며 이벤트 포인트는 프로모션/이벤트 등의 목적으로 발급하는 포인트로 별도의 유효기간이 적용됩니다.<br /> 상세 조건은 마이페이지 &gt; 포인트에서 확인하신 후 사용해 주시기 바랍니다.</li> <li class="line-text">이벤트 포인트는 단일품목 3만원 이상 구매 시 사용 가능합니다.</li> <li class="line-text">구매 포인트는 적립일로부터 1년간 사용 가능합니다.</li> <li class="line-text">만보기 포인트는 당일에만 수령 가능하며, 만보기 화면에서 받기 버튼을 눌러야 지급됩니다.</li> </ul> </div> </li></ul></div></div></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, 'margin-left': -(width_size - 1200) / 2 }); } 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 ($) { setUITooltipTrigger(); TooltipBtnTrigger(); }); function setUITooltipTrigger(selector) { selector = selector || '.tooltip-trigger'; $(selector).each(function () { var tooltip, contentsDOM, contentsString, placement, triggerType; contentsDOM = $(this).siblings('.tooltip-contents'); if (contentsDOM.length > 0) { contentsString = contentsDOM[0].outerHTML; placement = contentsDOM.data('placement') ? contentsDOM.data('placement') : 'auto'; triggerType = contentsDOM.hasClass('tooltip-click') ? 'click' : 'hover focus'; contentsDOM.remove(); tooltip = new Tooltip(this, { title: contentsString, html: true, container: contentsDOM.data('container') ? contentsDOM.data('container') : 'body', closeOnClickOutside: true, trigger: triggerType, placement: placement, popperOptions: { positionFixed: true, modifiers: { preventOverflow: { boundariesElement: 'body', }, }, }, }); $(this).data('tooltip', tooltip); tooltip.show(); tooltip.hide(); $(document).on('click', '.tooltip-contents .btn-close', function () { tooltip.hide(); }); } }); } function TooltipBtnTrigger(selector) { $('.tooltip-btn').on('click', function () { $('#tab3 > a').trigger('click'); }); } </script><!-- 유의사항 스크립트 --><script> $(document).ready(function () { $(document).ready(function ($) { setFoldBox(); }); function setFoldBox(selector) { selector = selector ? selector : '.fold-box-list'; if ($(selector).length > 0) { $(selector) .find('.fold-box .fold-box-header') .each(function () { $(this).on('click', function (event) { if ($(event.target).is('a, button') || jQuery(event.target).parent().is('a, button')) { return; } var $foldBox = $(this).closest('.fold-box'); var $foldBoxList = $(this).closest('.fold-box-list'); var isExpanded = $foldBox.hasClass('expanded'); if ($foldBoxList.data('type') === 'single') { $foldBoxList.find('.fold-box').removeClass('expanded'); if (!isExpanded) { $foldBox.addClass('expanded'); } } else { $foldBox.toggleClass('expanded'); } var evtData = { index: $foldBox.index(), isExpanded: $foldBox.hasClass('expanded'), }; $foldBox.trigger('headerClick', evtData); }); }); } } }); </script><!-- E : 이벤트 복사영역 여기까지 -->