<style type="text/css">/* font */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); /* root */ :root { --head: 100px !important; } /* common */ body { min-width: 1200px; margin: 0; padding: 0; } body * { box-sizing: border-box; } .wrap .special-sub-wrap .sub-top .editor-wrap { min-width: 1200px; } .art-container-event { position: relative; width: 100%; max-width: 1200px; 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, .art-container-event button { text-decoration: none; -webkit-tap-highlight-color: transparent; } .art-container-event a:focus, .art-container-event button:focus { outline: none; } .art-content-inner img { display: block; width: 100%; } /* mv */ .mv_wrap { display: flex; flex-direction: column; align-items: center; padding: 64px 0 !important; background-image: url(https://image.a-rt.com/art/editor/202611/1793935596058.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .mv_wrap .mv_img { display: flex; justify-content: center; align-items: center; } .mv_wrap .mv_img._01 { max-width: 606px; height: 191px; } .mv_wrap .mv_img._02 { max-width: 806px; height: 379px; margin: 20px auto 0 !important; } .mv_wrap .mv_img._03 { max-width: 505px; height: 74px; margin: 20px auto 0 !important; } /* gnb */ #tabNav { position: sticky; top: var(--head); z-index: 11; } #tabNav .tablist { display: flex; align-items: center; overflow: hidden; overflow-x: auto; font-family: var(--font) !important; white-space: nowrap; transition: all 0.15s; -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */ } #tabNav .tablist::-webkit-scrollbar { display: none; /* 크롬, 사파리, 오페라 등 Webkit 기반 브라우저 */ } #tabNav li { position: relative; width: 100%; height: 60px; transition: all 0.15s; } #tabNav li a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #B0B0B0; background-color: #222222; transition: all 0.15s; } #tabNav li:not(:last-child, .active, :hover, :has(+ .active, + :hover)) a::after { content: ''; position: absolute; display: block; width: 1px; height: 20px; right: 0; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.32); } #tabNav li.active a, #tabNav li a:hover { font-weight: 600; color: #ffffff; background: #E5002B; } /* content common */ .content { padding: 64px 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .content .ttl_wrap { display: flex; flex-direction: column; align-items: center; } .content .ttl_wrap ._ttl._01 { display: flex; justify-content: center; align-items: center; width: max-content; padding: 10px 22px !important; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.8px; color: #ffffff; background-color: #E5002B; border-radius: 120px; } .content .ttl_wrap ._ttl._02 { margin: 24px auto 0 !important; font-size: 32px; font-weight: 700; line-height: 132%; letter-spacing: -1px; color: #000000; } .content .ttl_wrap ._ttl._03 { margin: 12px auto 0 !important; font-size: 20px; font-weight: 400; line-height: 140%; letter-spacing: -1px; color: #000000; } /* content _event */ .content._event { background-color: #FFF4D0; } .content._event ._ttl._01 { font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.8px; color: #E5002B; } .content._event ._ttl._02 { margin: 24px auto 0 !important; font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1px; color: #000000; } .content._event ._ttl._03 { margin: 12px auto 0 !important; font-size: 20px; font-weight: 400; line-height: 140%; letter-spacing: -1px; color: #000000; } .content._event ._ttl._03 span { font-weight: 700; } .content._event .card_wrap { display: flex; flex-direction: column; width: max-content; margin: 60px auto 0 !important; } .content._event .card_wrap .card_img_wrap { position: relative; max-width: 380px; margin: 0 auto !important; } .content._event .card_wrap .card_img_wrap .card_badge { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 128px; height: 128px; background-image: url(https://image.a-rt.com/art/editor/202611/1793935559294.png); background-repeat: no-repeat; background-size: cover; background-position: center; top: -30px; right: -54px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); } .content._event .card_wrap .card_img_wrap .card_badge span { color: #ffffff; } .content._event .card_wrap .card_img_wrap .card_badge span:nth-of-type(1) { font-size: 25px; font-weight: 400; line-height: 100%; letter-spacing: -1px; } .content._event .card_wrap .card_img_wrap .card_badge span:nth-of-type(2) { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.4px; } .content._event .card_wrap ._txt { margin: 20px auto 0 !important; font-size: 20px; font-weight: 400; line-height: 100%; letter-spacing: -1px; color: #111111; } .content._event .card_wrap ._btn { display: flex; justify-content: center; align-items: center; width: 416px; height: 64px; margin: 64px auto 0 !important; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; background-color: #000000; opacity: 1; transition: opacity 0.15s; } .content._event .card_wrap ._btn:hover { opacity: 0.75; transition: opacity 0.15s; } .content._event .period_wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 544px; margin: 64px auto 0 !important; padding: 20px 21.5px !important; background-color: #FEE395; border-radius: 6px; } .content._event .period_wrap li { display: flex; align-items: center; gap: 20px; } .content._event .period_wrap li p:nth-of-type(1) { display: flex; justify-content: center; align-items: center; width: 160px; height: 38px; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.64px; color: #000000; background-color: #FFF4D0; border-radius: 6px; } .content._event .period_wrap li p:nth-of-type(2) { font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -0.64px; color: #000000; } .content._event .period_wrap li p:nth-of-type(2) span { font-weight: 700; } /* content _entry */ .content._entry { background-color: #FFE495; } .content._entry ._ttl { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.12px; color: #000000; } .content._entry .step_wrap { display: flex; flex-direction: column; gap: 24px; width: max-content; margin: 48px auto 0 !important; } .content._entry .step_wrap .step_box { display: flex; align-items: center; gap: 24px; } .content._entry .step_wrap .step_box p:nth-of-type(1) { display: flex; justify-content: center; align-items: center; width: 108px; height: 34px; font-size: 18px; font-weight: 600; line-height: 100%; letter-spacing: -0.8px; color: #111111; background-color: #FDF0D7; border-radius: 4px; } .content._entry .step_wrap .step_box p:nth-of-type(2) { font-size: 20px; font-weight: 400; line-height: 100%; letter-spacing: -0.8px; color: #000000; } .content._entry .step_wrap .step_box p:nth-of-type(2) span { font-weight: 700; } .content._entry .step_wrap .caution_box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 425px; padding: 20px 0 !important; background-color: #FDF0D7; border-radius: 6px; } .content._entry .step_wrap .caution_box p:nth-of-type(1) { font-size: 16px; font-weight: 700; line-height: 100%; letter-spacing: -0.64px; color: #E5002B; } .content._entry .step_wrap .caution_box p:nth-of-type(2) { font-size: 16px; font-weight: 300; line-height: 160%; letter-spacing: -0.64px; color: #111111; } .content._entry .step_wrap .caution_box p:nth-of-type(2) span { font-weight: 700; } /* content _01 */ .content._01 { background-color: #FFEDEB; } .content._01 .ttl_wrap ._ttl._02 { line-height: 100%; } .content._01 .content_swiper_wrap { margin: 32px auto 0 !important; } .content._01 .content_swiper_wrap .content_swiper { max-width: 510px; margin: 0 auto !important; overflow: hidden; } .content._01 .content_swiper .swiper-slide { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 14px; width: 490px; height: 359px; padding-bottom: 40px !important; background-color: rgba(255, 255, 255, 0.5); border-radius: 20px; background-repeat: no-repeat; background-size: cover; background-position: center; user-select: none; } .content._01 .content_swiper .swiper-slide._01 { background-image: url(https://image.a-rt.com/art/editor/202611/1793935468401.png); } .content._01 .content_swiper .swiper-slide._02 { background-image: url(https://image.a-rt.com/art/editor/202611/1793935474028.png); } .content._01 .content_swiper .swiper-slide._03 { background-image: url(https://image.a-rt.com/art/editor/202611/1793935480576.png); } .content._01 .content_swiper .swiper-slide ._txt { color: #000000; } .content._01 .content_swiper .swiper-slide ._txt:nth-of-type(1) { font-size: 20px; font-weight: 700; line-height: 100%; letter-spacing: -0.8px; } .content._01 .content_swiper .swiper-slide ._txt:nth-of-type(2) { font-size: 16px; font-weight: 300; line-height: 160%; letter-spacing: -0.64px; } .content._01 .content_swiper .swiper-pagination { position: absolute; display: flex; justify-content: center; bottom: -30px; left: 50%; transform: translateX(-50%); } .content._01 .content_swiper .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 4px !important; background: rgba(136, 136, 136, 0.5); opacity: 1; transition: all 0.15s; } .content._01 .content_swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .content._01 .content_swiper .swiper-pagination .swiper-pagination-bullet:hover { background: #E5002B; transition: all 0.15s; } .content._01 .content_swiper_box button.prev, .content._01 .content_swiper_box button.next { position: absolute; width: 50px; height: 50px; top: 50%; transform: translateY(-50%); background-image: url(https://image.a-rt.com/art/editor/202611/1793935450257.png); background-repeat: no-repeat; background-size: cover; background-position: center; border: none !important; background-color: unset !important; cursor: pointer; opacity: 1; transition: opacity 0.15s; z-index: 99; } .content._01 .content_swiper_box button.prev:not(.swiper-button-disabled):hover, .content._01 .content_swiper_box button.next:not(.swiper-button-disabled):hover { opacity: 0.7; transition: opacity 0.15s; } .content._01 .content_swiper_box button.prev.swiper-button-disabled, .content._01 .content_swiper_box button.next.swiper-button-disabled { background-image: url(https://image.a-rt.com/art/editor/202611/1793935459512.png); cursor: default; } .content._01 .content_swiper_box button.prev { left: 375px; transform: translateY(-50%) rotate(180deg); } .content._01 .content_swiper_box button.next { right: 375px; } /* content _02 */ .content._02 { background-color: #FFDCD8; } .content._02 .step_slide { margin: 32px auto 0 !important; } .content._02 .step_tabs_box { position: relative; max-width: 1150px; height: 60px; margin: 0 auto !important; } .content._02 .step_tabs { width: 100%; overflow: hidden; } .content._02 .step_tabs .swiper-slide { display: flex; justify-content: center; align-items: center; height: 60px; font-family: unset; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #B0B0B0; background-color: #ffffff; border: unset; border-radius: 5px; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .content._02 .step_tabs .swiper-slide-thumb-active, .content._02 .step_tabs .swiper-slide:hover { font-weight: 600; color: #ffffff; background-color: #222222; transition: background-color 0.15s, color 0.15s; } .content._02 .content_swiper_box { position: relative; max-width: 960px; margin: 64px auto 0 !important; } .content._02 .step_content { overflow: hidden; margin-left: 20px !important; } .content._02 .step_content .swiper-slide { max-width: 940px; height: auto; overflow: hidden; border-radius: 20px; } .content._02 .step_content .swiper-slide img { display: block; width: 100%; height: auto; } .content._02 .content_swiper_box .swiper-pagination { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; bottom: -34px; left: 50%; transform: translateX(-50%); } .content._02 .content_swiper_box .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 4px !important; background: rgba(136, 136, 136, 0.5); opacity: 1; transition: all 0.15s; } .content._02 .content_swiper_box .swiper-pagination-bullet-active, .content._02 .content_swiper_box .swiper-pagination-bullet:hover { background: #E5002B; transition: all 0.15s; } .content._02 .content_swiper_box .button_wrap { position: absolute; display: flex; justify-content: space-between; align-items: center; width: 880px; top: 377px; left: 50%; transform: translateX(-50%); margin-left: 10px !important; z-index: 10; } .content._02 .content_swiper_box button.prev, .content._02 .content_swiper_box button.next { position: relative; display: block; width: 50px; height: 50px; left: unset; right: unset; margin: 0; padding: 0; border: none !important; background-color: unset !important; background-image: url(https://image.a-rt.com/art/editor/202611/1793935450257.png); background-repeat: no-repeat; background-size: cover; background-position: center; transition: opacity 0.15s; cursor: pointer; opacity: 1; z-index: 20; } .content._02 .content_swiper_box button.prev:not(.swiper-button-disabled):hover, .content._02 .content_swiper_box button.next:not(.swiper-button-disabled):hover { opacity: 0.7; transition: opacity 0.15s; } .content._02 .content_swiper_box button.prev { transform: rotate(180deg); } .content._02 .content_swiper_box button.prev.swiper-button-disabled, .content._02 .content_swiper_box button.next.swiper-button-disabled { background-image: url(https://image.a-rt.com/art/editor/202611/1793935459512.png); cursor: default; } /* content _03 */ .content._03 { background-color: #FFEDEB; } .content._03 .list_wrap { display: flex; align-items: center; max-width: 1100px; margin: 32px auto 0 !important; background-color: #ffffff; border-radius: 20px; } .content._03 .list_wrap ._list { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 33.3333%; padding: 22px 0 !important; } .content._03 .list_wrap ._list:not(:last-child)::after { content: ''; position: absolute; display: block; width: 1px; height: 70px; background-color: #222222; right: 0; top: 50%; transform: translateY(-50%); } .content._03 .list_wrap ._list p { color: #000000; } .content._03 .list_wrap ._list p:nth-of-type(1) { font-size: 20px; font-weight: 400; line-height: 100%; letter-spacing: -0.8px; } .content._03 .list_wrap ._list p:nth-of-type(2) { font-size: 24px; font-weight: 700; line-height: 100%; letter-spacing: -0.64px; } .content._03 .tab_wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 1100px; margin: 32px auto 0 !important; } .content._03 .tab_wrap .tab_menu { display: flex; gap: 10px; width: 1100px; } .content._03 .tab_wrap .tab_menu button { width: 100%; padding: 22px 0 !important; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #B0B0B0; background: #ffffff; border: unset !important; border-radius: 5px; cursor: pointer; transition: all 0.15s; } .content._03 .tab_wrap .tab_menu button.active, .content._03 .tab_wrap .tab_menu button:hover { background: #222222; color: #ffffff; transition: all 0.15s; } .content._03 .tab_wrap .tab_content .tab_item { display: none; } .content._03 .tab_wrap .tab_content .tab_item.active { display: block; } .content._03 .tab_wrap .tab_content .tab_item ._ttl { font-size: 28px; font-weight: 700; line-height: 100%; letter-spacing: -0.8px; color: #000000; } .content._03 .tab_wrap .tab_content .tab_item ._txt { margin: 16px auto 0 !important; font-size: 20px; font-weight: 400; line-height: 140%; letter-spacing: -1px; color: #000000; } .content._03 .tab_wrap .tab_content .tab_item ._txt span { font-weight: 700; } .content._03 .tab_wrap .tab_content .tab_item ._img { max-width: 520px; margin: 50px auto 0 !important } /* content _04 */ .content._04 { padding: 0 0 64px !important; background-color: #FFEDEB; } .content._04 .acc_wrap .acc_box { display: flex; flex-direction: column; } .content._04 .acc_wrap .acc_ttl { display: flex; justify-content: center; align-items: center; gap: 5px; width: 416px; height: 64px; margin: 0 auto !important; border: 0; background: none; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.64px; color: #000000; cursor: pointer; } .content._04 .acc_wrap .acc_ttl::before { content: ""; display: block; width: 16px; height: 16px; background-image: url(https://image.a-rt.com/art/editor/202611/1793935439876.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .content._04 .acc_wrap .acc_box.active .acc_ttl::before { background-image: url(https://image.a-rt.com/art/editor/202611/1793935429260.png); } .content._04 .acc_wrap .acc_content { display: none; width: 780px; margin: 0 auto !important; background-color: #FFE5E2; border-radius: 20px; } .content._04 .acc_wrap .acc_box.active .acc_content { display: block; } .content._04 .acc_wrap .acc_box .acc_list_wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 30px 30px !important; } .content._04 .acc_wrap .acc_box .acc_list_wrap .acc_list_box { display: flex; flex-direction: column; gap: 24px; width: 100%; } .content._04 .acc_wrap .acc_box .acc_list_wrap .acc_list_box .acc_list_ttl { padding: 24px 10px !important; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.64px; text-align: left !important; color: #000000; border-bottom: 1px solid #8C8C8C; } .content._04 .acc_wrap .acc_box .acc_list_wrap .acc_list_box .acc_list { display: flex; flex-direction: column; gap: 4.5px; } .content._04 .acc_wrap .acc_box .acc_list_wrap .acc_list_box .acc_list li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 300; line-height: 128%; letter-spacing: -0.8px; text-align: left !important; color: #000000; } .content._04 .acc_wrap .acc_box .acc_list_wrap .acc_list_box .acc_list li::before { content: ''; display: block; width: 3px; height: 3px; margin-left: 10px !important; background-color: #000000; border-radius: 99px; } .content._04 .acc_wrap .acc_box .acc_qna_list { padding: 30px 55.5px !important; font-size: 16px; font-weight: 300; line-height: 160%; letter-spacing: -0.8px; text-align: left !important; color: #000000; } .content._04 .acc_wrap .acc_box .acc_qna_list span { font-weight: 700; line-height: 128%; }</style><!-- s : art-container-event --><div class="art-container-event"><!-- mv --><div class="art-content-inner mv_wrap"><div class="mv_img _01 ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935575676.png" /></div><div class="mv_img _02 ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935581376.png" /></div><div class="mv_img _03 ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935588244.png" /></div></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><!-- content _event --><div class="art-content-inner content _event"><div class="ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"><p class="_ttl _01">매장픽업 이벤트</p><p class="_ttl _02">매장픽업 응모 이벤트</p><p class="_ttl _03"><span>ABC마트 기프트카드 1만원권 증정!</span><br />기간 내 매장픽업 후 응모하기를 눌러주세요</p></div><div class="card_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"><div class="card_img_wrap"><div class="card_img"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935566940.png" /></div><p class="card_badge"><span>추첨</span><span>50명</span></p></div><p class="_txt">[ABC마트] 기프트카드 1만원권</p><a class="_btn" href="#tabpanel4">이벤트 응모하기</a></div><ul class="period_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"> <li> <p>참여 기간</p> <p>26. 11. 06 (금) ~ 26. 11. 30 (월)</p> </li> <li> <p>응모 대상</p> <p>이벤트 기간 내, <span>매장 픽업 대상 회원</span></p> </li> <li> <p>당첨 발표</p> <p>26. 12. 21 (월)</p> </li></ul></div><!-- content _entry --><div class="art-content-inner content _entry"><p class="_ttl ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%">이벤트 참여 방법</p><div class="step_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.3" data-y="-5%"><div class="step_box"><p>STEP 1</p><p>페이지 하단의 <span>&lsquo;응모하기&rsquo;</span> 버튼 클릭하기</p></div><div class="caution_box"><p>꼭 확인해 주세요!</p><p>이벤트 기간 내 <span>매장 픽업 대상</span><br />회원만 최종 응모 대상에 포함됩니다.</p></div></div></div><!-- content _01 --><div aria-labelledby="tab1" class="art-content-inner cnt content _01" id="tabpanel1"><div class="ttl_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><p class="_ttl _01">서비스 소개</p><p class="_ttl _02">매장픽업, 이래서 편해요</p><p class="_ttl _03">택배를 기다리지 않아도 되고,<br />매장에 들른 김에 직접 보고 받아갈 수 있어요</p></div><div class="content_swiper_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><div class="content_swiper_box"><div class="content_swiper swiper"><div class="swiper-wrapper"><div class="swiper-slide _01"><p class="_txt">재고가 있으면 오늘 바로</p><p class="_txt">선택한 매장에 재고가 있으면 당일 픽업할 수 있어요<br />재고가 부족해도 매장이 준비를 마치면 알려드려요</p></div><div class="swiper-slide _02"><p class="_txt">원하는 매장을 직접 골라서</p><p class="_txt">매장별 재고를 확인하고 픽업할 매장 1곳을 선택하세요<br />채널 관계없이 상품을 보유한 매장이면 선택할 수 있어요</p></div><div class="swiper-slide _03"><p class="_txt">픽업하면 쿠폰이 따라와요</p><p class="_txt">상품 준비가 완료되면 매장에서 쓸 수 있는<br />쿠폰이 멤버십 쿠폰함으로 자동 지급돼요</p></div></div><div class="swiper-pagination">&nbsp;</div></div><button aria-label="이전 슬라이드" class="prev" type="button"></button><button aria-label="다음 슬라이드" class="next" type="button"></button></div></div></div><!-- content _02 --><div aria-labelledby="tab2" class="art-content-inner cnt content _02" id="tabpanel2"><div class="ttl_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><p class="_ttl _01">이용 방법</p><p class="_ttl _02">주문부터 픽업까지<br />이렇게 이용하세요</p><p class="_ttl _03">상품 상세 화면 기준으로 안내해요<br />매장을 먼저 고른 뒤 사이즈를 선택하면 돼요</p></div><div class="step_slide "><div class="step_tabs_box ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><div class="step_tabs swiper"><div class="swiper-wrapper"><button class="swiper-slide" type="button">STEP 1</button><button class="swiper-slide" type="button">STEP 2</button><button class="swiper-slide" type="button">STEP 3</button><button class="swiper-slide" type="button">STEP 4</button><button class="swiper-slide" type="button">STEP 5</button><button class="swiper-slide" type="button">STEP 6</button></div></div></div><div class="content_swiper_box"><div class="step_content swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935486949.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935497547.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935505266.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935513566.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935521165.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935527115.png" /></div></div></div><div class="swiper-pagination">&nbsp;</div><div class="button_wrap"><button aria-label="이전 슬라이드" class="prev" type="button"></button><button aria-label="다음 슬라이드" class="next" type="button"></button></div></div></div></div><!-- content _03 --><div aria-labelledby="tab3" class="art-content-inner cnt content _03" id="tabpanel3"><div class="ttl_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><p class="_ttl _01">픽업 쿠폰</p><p class="_ttl _02">픽업하러 온 김에<br />매장 쇼핑은 할인받으세요</p><p class="_ttl _03">상품 준비가 완료되면 매장에서 바로 쓸 수 있는<br />쿠폰이 멤버십 쿠폰함으로 들어와요.</p></div><div class="list_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><div class="_list"><p>혜택</p><p>15% 할인</p></div><div class="_list"><p>사용 조건</p><p>5만원 이상</p></div><div class="_list"><p>유효기간</p><p>발급 후 7일</p></div></div><div class="tab_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><div class="tab_menu"><button class="active" type="button">마이페이지</button><button type="button">쿠폰함</button><button type="button">쿠폰 상세</button></div><div class="tab_content"><div class="tab_item active"><p class="_ttl">마이페이지에서 확인</p><p class="_txt">보유중인 <span>매장 전용 쿠폰</span>을 누르면 쿠폰함으로 이동해요.</p><div class="_img"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935533349.png" /></div></div><div class="tab_item"><p class="_ttl">쿠폰함 오프라인 탭</p><p class="_txt"><span>매장 픽업 쿠폰</span>과 사용 기한을 확인할 수 있어요.</p><div class="_img"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935542719.png" /></div></div><div class="tab_item"><p class="_ttl">매장에서 바코드 제시</p><p class="_txt">결제할 때 쿠폰 상세의 <span>바코드</span>를 직원에게 보여주세요.</p><div class="_img"><img alt="" src="https://image.a-rt.com/art/editor/202611/1793935549516.png" /></div></div></div></div></div><!-- content _04 --><div aria-labelledby="tab4" class="art-content-inner cnt content _04" id="tabpanel4"><div class="acc_wrap ani" data-delay="" data-speed="0.7s" data-threshold="0.2" data-x="" data-y="-5%"><div class="acc_box"><button aria-expanded="false" class="acc_ttl" type="button"><span>유의사항</span></button><div aria-hidden="true" class="acc_content" inert=""><div class="acc_list_wrap"><div class="acc_list_box"><p class="acc_list_ttl">매장픽업</p><ul class="acc_list"> <li>채널 관계 없이 상품 보유 매장 선택이 가능하며, 매장픽업은 1개 매장만 선택할 수 있습니다.</li> <li>한 매장에서 최대 3개까지 구매할 수 있습니다.</li> <li>기존 선택 매장과 다른 매장을 선택하면 선택된 상품이 초기화됩니다.</li> <li>매장 재고는 실시간으로 판매되고 있어 변동될 가능성이 있으므로, 재고 현황과 실제 재고가 다를 수 있습니다.</li> <li>수량 변경 시 픽업 일정이 달라질 수 있습니다.</li> <li>상품이 준비되면 상품별로 준비완료 알림톡을 보내드립니다. 준비완료 알림톡을 받으신 후 매장에 방문해 주세요.</li> <li>매장 상황에 따라 부득이하게 주문이 취소될 수 있습니다.</li> <li>매장 영업시간에 따라 당일 픽업이 불가능할 수 있습니다.</li> <li>픽업 가능 기간 내 매장에 방문하지 않으시면 주문이 취소됩니다.</li> <li>백화점, 마트 등 몰 입점 매장에서 구매하신 경우 구매하신 매장에서만 교환/환불 가능합니다.</li></ul></div><div class="acc_list_box"><p class="acc_list_ttl">매장픽업 쿠폰</p><ul class="acc_list"> <li>쿠폰은 픽업 준비가 완료되면 매장픽업 주문 1건(픽업코드) 당 1매가 자동 지급됩니다.</li> <li>지급된 쿠폰은 멤버십 쿠폰함 오프라인 탭에서 확인할 수 있습니다.</li> <li>유효기간은 발급일로부터 7일이며, 기간이 지나면 자동 소멸됩니다.</li> <li>매장 체크인 쿠폰과 중복 사용할 수 없습니다.</li> <li>총 할인율 35% 이하 시 적용 가능합니다. (총 할인율은 쿠폰을 적용한 최종 할인 금액 기준으로 계산)</li> <li>사용 가능 매장과 쿠폰 적용 대상 상품은 쿠폰 상세에서 확인할 수 있습니다.</li> <li>쿠폰 지급 기준 및 기간에 따라 지급 여부가 달라질 수 있습니다.</li></ul></div></div></div></div><div class="acc_box"><button aria-expanded="false" class="acc_ttl" type="button"><span>자주 묻는 질문</span></button><div aria-hidden="true" class="acc_content" inert=""><p class="acc_qna_list"><span>Q1. 매장픽업은 모든 매장에서 이용할 수 있나요?</span><br />&middot; 매장픽업은 상품과 매장에 따라 이용 가능 여부가 달라집니다.<br />상품 상세 페이지에서 &lsquo;매장픽업 가능&rsquo; 아이콘을 확인하신 후, 매장 선택 시 이용 가능한 매장을 확인해 주세요.<br /><br /><span>Q2. 쿠폰은 온라인과 오프라인 모두 사용할 수 있나요?</span><br />&middot; 해당 쿠폰은 매장픽업 서비스를 운영하는 오프라인 매장에서 사용하실 수 있습니다.<br /><br /><span>Q3. 픽업 상품은 언제까지 수령해야 하나요?</span><br />&middot; 주문일로부터 7일 후 23시 59분까지 수령하실 수 있습니다.<br /><br /><span>Q4. 픽업 기간을 연장할 수 있나요?</span><br />&middot; 수령 기간 연장이 필요하신 경우, 고객센터(1:1 문의 게시판&middot;전화&middot;이메일)로 문의해 주세요.<br />확인 후 자세히 안내해 드리겠습니다.<br /><br /><span>Q5. 주문한 상품을 당일에 픽업할 수 있나요?</span><br />&middot; 네, 매장에 상품 재고가 있다면 당일 픽업도 가능합니다! 원활한 수령을 위해 방문 전 픽업 가능 여부를 확인해 주세요.<br /><br /><span>Q6. 주문 후 픽업 매장을 변경할 수 있나요?</span><br />&middot; 다른 매장에서 수령을 원하시는 경우, 기존 주문을 취소하신 후 원하시는 매장을 선택하여 다시 주문해 주세요.</p></div></div></div></div></div><!-- e : art-container-event --><!-- 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> (function () { function waitImagesLoaded(container, callback) { const imgs = Array.from(container.querySelectorAll('img')); if (!imgs.length) return callback(); let loaded = 0; function check() { loaded++; if (loaded === imgs.length) callback(); } imgs.forEach(img => { if (img.complete) { check(); } else { img.addEventListener('load', check, { once: true }); img.addEventListener('error', check, { once: true }); } }); } function initAni() { const style = document.createElement("style"); style.textContent = ` .ani{ --ani-x:0; --ani-y:0; --ani-speed:.7s; --ani-delay:0s; opacity:0; transform:translate(var(--ani-x),var(--ani-y)); transition: opacity var(--ani-speed) var(--ani-delay), transform var(--ani-speed) var(--ani-delay); } .ani.on{ opacity:1; transform:translate(0,0); } .ani.z_index1{position:relative;z-index:1;} .ani.z_index2{position:relative;z-index:2;} .ani.z_index3{position:relative;z-index:3;} @keyframes aniMove{ from{ opacity:0; transform:translate(var(--ani-x),var(--ani-y)); } to{ opacity:1; transform:translate(0,0); } }`; document.head.appendChild(style); document.querySelectorAll(".ani").forEach(el => { if (el.dataset.x) el.style.setProperty("--ani-x", el.dataset.x); if (el.dataset.y) el.style.setProperty("--ani-y", el.dataset.y); if (el.dataset.speed) el.style.setProperty("--ani-speed", el.dataset.speed); if (el.dataset.delay) el.style.setProperty("--ani-delay", el.dataset.delay); const threshold = parseFloat(el.dataset.threshold) || 0; const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("on"); io.unobserve(e.target); } }); }, { threshold: threshold }); io.observe(el); }); } const container = document.querySelector('.art-container-event'); if (!container) return; waitImagesLoaded(container, initAni); })(); </script><!-- content_swiper --><script> $(function () { $('.content_swiper').each(function (i) { const swiperEl = this; const $swiper = $(swiperEl); const $box = $swiper.closest('.content_swiper_box'); $box.find('.swiper-pagination').addClass('type' + i); const swiperOptions = { slidesPerView: 'auto', slidesPerGroup: 1, centeredSlides: true, spaceBetween: 20, speed: 500, allowTouchMove: true, loop: false, watchOverflow: true, autoplay: false, navigation: { nextEl: $box.find('.next')[0], prevEl: $box.find('.prev')[0], }, pagination: { el: $box.find('.swiper-pagination')[0], clickable: true, }, }; const mySwiper = new Swiper(swiperEl, swiperOptions); const baseSpaceBetween = swiperOptions.spaceBetween; function updateSpaceBetween() { const vw = window.innerWidth; const ratio = vw <= 720 ? vw / 720 : 1; mySwiper.params.spaceBetween = baseSpaceBetween * ratio; mySwiper.update(); } updateSpaceBetween(); $(window).on('resize', updateSpaceBetween); }); }); </script><!-- step_content --><script> $(function () { $('.content._02 .step_content').each(function (i) { const swiperEl = this; const $swiper = $(swiperEl); const $box = $swiper.closest('.content_swiper_box'); const $wrap = $swiper.closest('.step_slide'); const $tabs = $wrap.find('.step_tabs'); const $tabButtons = $tabs.find('.swiper-wrapper > .swiper-slide'); const $prev = $box.find('.prev'); const $next = $box.find('.next'); const tabsSpaceBetween = 10; const contentSpaceBetween = 20; if (swiperEl.swiper) return; function getRatio() { return window.innerWidth <= 720 ? window.innerWidth / 720 : 1; } function clearLastMargin(swiper) { const lastSlide = swiper.slides[swiper.slides.length - 1]; if (lastSlide) { lastSlide.style.marginRight = '0px'; } } function updateTabs(swiper) { $tabButtons .removeClass('swiper-slide-thumb-active') .eq(swiper.activeIndex) .addClass('swiper-slide-thumb-active'); } $box.find('.swiper-pagination').addClass('type' + i); const tabsOptions = { slidesPerView: 6, spaceBetween: tabsSpaceBetween * getRatio(), watchSlidesProgress: true, allowTouchMove: false, simulateTouch: false, preventClicks: false, preventClicksPropagation: false, touchStartPreventDefault: false, on: { init: function () { clearLastMargin(this); }, slidesUpdated: function () { clearLastMargin(this); }, update: function () { clearLastMargin(this); }, resize: function () { clearLastMargin(this); }, }, }; const tabsSwiper = new Swiper($tabs[0], tabsOptions); const swiperOptions = { slidesPerView: 1, centeredSlides: true, autoHeight: true, spaceBetween: contentSpaceBetween * getRatio(), speed: 400, preventInteractionOnTransition: false, navigation: { nextEl: $next[0], prevEl: $prev[0], }, pagination: { el: $box.find('.swiper-pagination')[0], clickable: true, }, on: { init: function () { clearLastMargin(this); updateTabs(this); }, slideChange: function () { updateTabs(this); }, slidesUpdated: function () { clearLastMargin(this); }, update: function () { clearLastMargin(this); updateTabs(this); }, resize: function () { clearLastMargin(this); }, }, }; const mySwiper = new Swiper(swiperEl, swiperOptions); $tabButtons .off('click.step_content') .on('click.step_content', function (event) { event.preventDefault(); const index = $tabButtons.index(this); mySwiper.slideTo(index, mySwiper.params.speed); }); function updateHeight() { mySwiper.updateAutoHeight(0); } function updateSpaceBetween() { const ratio = getRatio(); tabsSwiper.params.spaceBetween = tabsSpaceBetween * ratio; mySwiper.params.spaceBetween = contentSpaceBetween * ratio; tabsSwiper.update(); mySwiper.update(); clearLastMargin(tabsSwiper); clearLastMargin(mySwiper); updateHeight(); } $(window).on('resize', updateSpaceBetween); $swiper.find('img').on('load', updateHeight); updateSpaceBetween(); }); }); </script><!-- tab_wrap --><script> (function () { function initTabs() { document.querySelectorAll('.content._03 .tab_wrap').forEach(function (tabWrap) { if (tabWrap.dataset.tabInitialized === 'true') return; const tabButtons = tabWrap.querySelectorAll('.tab_menu button'); const tabItems = tabWrap.querySelectorAll('.tab_content > .tab_item'); if (!tabButtons.length || !tabItems.length) return; tabWrap.dataset.tabInitialized = 'true'; tabButtons.forEach(function (button, index) { button.addEventListener('click', function (event) { event.preventDefault(); tabButtons.forEach(function (btn) { btn.classList.remove('active'); }); tabItems.forEach(function (item) { item.classList.remove('active'); }); button.classList.add('active'); if (tabItems[index]) { tabItems[index].classList.add('active'); } }); }); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initTabs); } else { initTabs(); } })(); </script><!-- acc_wrap --><script> $(function () { $('.content._04 .acc_wrap').each(function () { const $wrap = $(this); const $boxes = $wrap.children('.acc_box'); if ($wrap.data('accInitialized')) return; $wrap.data('accInitialized', true); function setOpen($box, isOpen) { $box.toggleClass('active', isOpen); $box.children('.acc_ttl').attr('aria-expanded', String(isOpen)); $box.children('.acc_content') .attr('aria-hidden', String(!isOpen)) .prop('inert', !isOpen); } setOpen($boxes, false); $boxes.children('.acc_ttl').on('click', function () { const $box = $(this).parent('.acc_box'); const isOpen = $box.hasClass('active'); setOpen($box, !isOpen); }); }); }); </script>