<!-- 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 !important; } /* common */ body { min-width: 1440px; margin: 0; padding: 0; } body * { box-sizing: border-box; } .art-container-event { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; background-color: #000000; 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%; } /* main */ .main { position: relative; max-width: 100%; overflow: hidden; } .main::after { content: ''; position: absolute; display: block; width: clamp(381px, 31.72vw, 609px); height: clamp(191px, 15.89vw, 305px); top: clamp(96px, 7.97vw, 153px); left: calc(50%); background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/main_txt.png); background-repeat: no-repeat; background-size: cover; animation: float 3s ease-in-out infinite; overflow: hidden; } @keyframes float { 0% { transform: translateX(-50%) translateY(clamp(9px, 0.78vw, 15px)); } 50% { transform: translateX(-50%) translateY(clamp(-9px, -0.78vw, -15px)); } 100% { transform: translateX(-50%) translateY(clamp(9px, 0.78vw, 15px)); } } .main img { overflow: hidden; } .snow-wrap { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .snow { position: absolute; background: #ffffff; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 50%); opacity: var(--opacity, 0.6); z-index: 2; } /* gnb */ #tabNav { position: sticky; top: var(--head); z-index: 2; } #tabNav .tablist { display: flex; align-items: center; overflow: hidden; overflow-x: auto; font-family: var(--font) !important; white-space: nowrap; transition: all 0.3s; -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */ } #tabNav .tablist::-webkit-scrollbar { display: none; /* 크롬, 사파리, 오페라 등 Webkit 기반 브라우저 */ } #tabNav li { position: relative; width: 320px; height: 64px; transition: all 0.3s; } #tabNav li a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -0.8px; color: #888888; background-color: #000000; } #tabNav li.active a, #tabNav li a:hover { color: #000000; background: linear-gradient(133.66deg, #FFFFFF -17.78%, #CAC9C9 25.82%, #F5F4F4 56.4%, #FFFFFF 100%); } /* content common */ .content_ttl01 { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.32px; color: #FFF5BD; } .content_ttl01::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background-color: #FFF5BD; } .content_ttl02 { margin-top: 24px !important; font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -0.96px; color: #ffffff; } .content_ttl03 { margin-top: 12px !important; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.6px; color: #ffffff; } /* content01 */ .content01 { padding: 64px 0; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content01_bg.jpg); background-repeat: no-repeat; background-size: cover; } .content01_coupon_wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; max-width: 848px; margin: 40px auto 0 !important; user-select: none; } .content01_coupon { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 416px; height: 138px; padding: 13.6px 31.6px 22.8px 25.6px; background-image: url(https://image.a-rt.com/art/editor/202511/1763095555392.png); background-repeat: no-repeat; background-size: cover; } .content01_coupon_ttl_wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; } .content01_coupon_ttl { font-size: 16px; font-weight: 500; line-height: 1; } .content01_coupon_dl_img { width: 9.8px; height: 11px; } .content01_coupon_text_wrap { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; } .content01_coupon_discount { display: flex; justify-content: flex-end; align-items: flex-end; width: 125px; } .content01_coupon_discount .dis_plus { margin-right: -2px; font-size: 32px; font-weight: 400; line-height: 1; } .content01_coupon_discount .dis_num { font-size: 60px; font-weight: 700; line-height: 0.8; letter-spacing: -3px; } .content01_coupon_discount .dis_per { font-size: 32px; font-weight: 700; line-height: 1; } .content01_coupon_name { font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.45px; text-align: right; } .content01_coupon_dl_btn { display: flex; justify-content: center; align-items: center; gap: 4.8px; width: 416px; height: 64px; margin: 29.6px auto 0 !important; color: #FFFFFF; background-color: #E20000; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.64px; text-decoration: unset; } .content01_coupon_dl_ico { max-width: 19.2px; } .btn-md_wrap { display: flex; justify-content: center; align-items: center; width: 416px; height: 64px; margin: 14px auto 0 !important; } .btn-md { display: flex; justify-content: center; align-items: center; gap: 6.4px; color: #ffffff; } .content01_caution_ico { max-width: 16px; } .content01_caution_txt { font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.64px; } /* content02 */ .content02 { padding: 64px 0; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_bg.jpg); background-repeat: no-repeat; background-size: cover; } .content02_swiper_wrap { margin-top: 40px !important; } .content02_swiper_box { position: relative; display: flex; align-items: center; } .content02_swiper { position: relative; width: 884px; margin: 0 auto; overflow-x: hidden; } .content02_swiper .swiper-wrapper { align-items: center; } .content02_swiper .swiper-slide { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 272px !important; height: 344px; background-repeat: no-repeat; background-size: cover; } .content02_swiper .swiper-slide.swiper-slide-active { width: 324px !important; height: 450px; } .content02_swiper .swiper-slide._01 { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img01.png); } .content02_swiper .swiper-slide._02 { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img02.png); } .content02_swiper .swiper-slide._03 { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img03.png); } .content02_swiper .swiper-slide._04 { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img04.png); } .content02_swiper .swiper-slide._05 { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img05.png); } .content02_swiper .swiper-slide._01.swiper-slide-active { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img01_active.png); } .content02_swiper .swiper-slide._02.swiper-slide-active { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img02_active.png); } .content02_swiper .swiper-slide._03.swiper-slide-active { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img03_active.png); } .content02_swiper .swiper-slide._04.swiper-slide-active { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img04_active.png); } .content02_swiper .swiper-slide._05.swiper-slide-active { background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content02_swiper_img05_active.png); } .content02_swiper .swiper-slide a { display: none; } .content02_swiper .swiper-slide.swiper-slide-active a { position: absolute; display: flex; justify-content: center; align-items: center; gap: 4.8px; width: 282px; height: 64px; color: #ffffff; background-color: #E20000; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.64px; left: 50%; bottom: 28px; transform: translateX(-50%); } .content02_swiper a .content02_swiper_btn_arrow { width: 16px; height: 16px; } /* content03 */ .content03 { padding: 64px 0; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_bg.jpg); background-repeat: no-repeat; background-size: cover; } .content03_marquee { display: flex; gap: 12px; width: 100%; max-width: 932px; margin: 40px auto 0 !important; overflow: hidden; } .content03_marquee_list { width: 1168px; flex-shrink: 0; -webkit-animation: marquee2 10s linear infinite; animation: marquee2 10s linear infinite; } .content03_marquee_list img { width: 100%; } @keyframes marquee2 { 100% { -webkit-transform: translateX(calc(-100% - 12px)); transform: translateX(calc(-100% - 12px)); } } .content03_btn_wrap { display: flex; list-style: none; flex-wrap: wrap; max-width: 937px; gap: 12px; margin: 40px auto 0 !important; } .content03_btn_wrap li { width: 225px; height: 75px; box-shadow: 11px 9px 4.8px 0 rgba(57, 0, 0, .25); } .content03_btn_wrap li a { width: 100%; height: 100%; } /* content04 */ .content04 { padding: 64px 0; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content04_bg.jpg); background-repeat: no-repeat; background-size: cover; } .content04_img { display: flex; justify-content: center; align-items: center; width: 480px; margin: 40px auto 0 !important; } .content04_btn { display: flex; justify-content: center; align-items: center; width: 300px; height: 64px; margin: 30px auto 0 !important; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -1px; color: #ffffff; background-color: #E20000; } /* content05 */ .content05 { padding: 64px 0; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content05_bg.jpg); background-repeat: no-repeat; background-size: cover; } .content05_btn_wrap { display: flex; list-style: none; max-width: 1072px; gap: 12px; margin: 40px auto 0 !important; } .content05_btn_wrap li { width: 259px; height: 304px; } .content05_btn_wrap li a { width: 100%; height: 100%; } /* content06 */ .content06 { padding: 64px 0; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content06_bg.jpg); background-repeat: no-repeat; background-size: cover; } .content06_img_wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 380px; margin: 50px auto 0 !important; } .content06_img { width: 380px; } .content06_badge { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 120px; height: 120px; top: -28px; right: -37px; background-image: url(https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content06_badge.png); background-repeat: no-repeat; background-size: cover; user-select: none; } .content06_badge_txt01 { margin-top: 30.5px !important; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.83px; } .content06_badge_txt02 { margin-top: 3.31px !important; font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -1.16px; } .content06_txt { display: flex; justify-content: center; align-items: center; margin: 20px auto 0 !important; font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -1px; color: #ffffff; } .content06_btn { display: flex; justify-content: center; align-items: center; width: 300px; height: 64px; margin: 40px auto 0 !important; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.64px; color: #ffffff; background-color: #E60012; } /* 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: #D0FFDB; 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"> <div class="snow-wrap">&nbsp;</div> <img alt="HOLIDAY SALE 최대 70% OFF" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/main.jpg" /></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">웜앤라이트 3</a></li> <li aria-controls="tabpanel5" class="tab" id="tab5" role="tab"><a href="#tabpanel5">ABC PLUS</a></li> <li aria-controls="tabpanel6" class="tab" id="tab6" role="tab"><a href="#tabpanel6">이벤트</a></li> </ul> </nav> <div aria-labelledby="tab1" class="art-content-inner cnt content01" id="tabpanel1"> <p class="content_ttl01">홀리데이 세일 1.</p> <p class="content_ttl02">온라인 단독 클리어런스 쿠폰팩</p> <p class="content_ttl03">따뜻한 연말을 위한 멤버십 전용 혜택</p> <div class="content01_coupon_wrap"> <div class="content01_coupon"> <div class="content01_coupon_ttl_wrap"> <p class="content01_coupon_ttl">HOLIDAY SALE</p> <div class="content01_coupon_dl_img"><img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content01_coupon_dl_img.png" /></div> </div> <div class="content01_coupon_text_wrap"> <p class="content01_coupon_discount"><span class="dis_num">14</span> <span class="dis_per">%</span></p> <p class="content01_coupon_name">윈터 슈즈<br /> 할인 쿠폰</p> </div> </div> <div class="content01_coupon"> <div class="content01_coupon_ttl_wrap"> <p class="content01_coupon_ttl">HOLIDAY SALE</p> <div class="content01_coupon_dl_img"><img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content01_coupon_dl_img.png" /></div> </div> <div class="content01_coupon_text_wrap"> <p class="content01_coupon_discount"><span class="dis_num">10</span> <span class="dis_per">%</span></p> <p class="content01_coupon_name">홀리데이<br /> 할인 쿠폰</p> </div> </div> <div class="content01_coupon"> <div class="content01_coupon_ttl_wrap"> <p class="content01_coupon_ttl">HOLIDAY SALE</p> <div class="content01_coupon_dl_img"><img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content01_coupon_dl_img.png" /></div> </div> <div class="content01_coupon_text_wrap"> <p class="content01_coupon_discount"><span class="dis_num">8</span> <span class="dis_per">%</span></p> <p class="content01_coupon_name">홀리데이<br /> 할인 쿠폰</p> </div> </div> <div class="content01_coupon"> <div class="content01_coupon_ttl_wrap"> <p class="content01_coupon_ttl">HOLIDAY SALE</p> <div class="content01_coupon_dl_img"><img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content01_coupon_dl_img.png" /></div> </div> <div class="content01_coupon_text_wrap"> <p class="content01_coupon_discount"><span class="dis_plus">+</span> <span class="dis_num">6</span> <span class="dis_per">%</span></p> <p class="content01_coupon_name">홀리데이<br /> 할인 쿠폰</p> </div> </div> </div> <a class="content01_coupon_dl_btn" href="javascript:abc.couponDown('3000000819','3000000821','3000000837','3000000825')"><span class="content01_coupon_dl_txt">쿠폰 전체 다운로드</span> <span class="content01_coupon_dl_ico"> <img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content01_coupon_dl_ico.png" /> </span> </a> <div class="btn-md_wrap"><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/managing/event/20251111_black_abc_day/abc/pc/img/content01_caution_ico.png" /></span> <span class="content01_caution_txt">유의 사항</span> </a></div> <!-- 모달창 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/12/12 11:00 - 2026/01/01 23:59</li> <li>쿠폰은 통합멤버십 회원 대상이며, 각 쿠폰은 ID당 3회 다운로드 가능합니다.</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="content_ttl01">홀리데이 세일 2.</p> <p class="content_ttl02">인기 카테고리 최대 ~70%</p> <p class="content_ttl03">카테고리별로 할인 상품 둘러보기</p> <div class="content02_swiper_wrap"> <div class="content02_swiper_box"> <div class="swiper content02_swiper"> <div class="swiper-wrapper"> <div class="swiper-slide _01"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006476"><span>윈터 슈즈 보러 가기</span> <span class="content02_swiper_btn_arrow"> <img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_btn_arrow.png" /> </span> </a></div> <div class="swiper-slide _02"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006485"><span>스니커즈 보러 가기</span> <span class="content02_swiper_btn_arrow"> <img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_btn_arrow.png" /> </span> </a></div> <div class="swiper-slide _03"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006477"><span>러닝 슈즈 보러 가기</span> <span class="content02_swiper_btn_arrow"> <img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_btn_arrow.png" /> </span> </a></div> <div class="swiper-slide _04"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006478"><span>캐주얼 슈즈 보러 가기</span> <span class="content02_swiper_btn_arrow"> <img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_btn_arrow.png" /> </span> </a></div> <div class="swiper-slide _05"><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006471"><span>아동화 보러 가기</span> <span class="content02_swiper_btn_arrow"> <img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_btn_arrow.png" /> </span> </a></div> </div> </div> </div> </div> </div> <div aria-labelledby="tab3" class="art-content-inner cnt content03" id="tabpanel3"> <p class="content_ttl01">홀리데이 세일 3.</p> <p class="content_ttl02">인기 브랜드 최대 ~70%</p> <p class="content_ttl03">내가 좋아하는 브랜드 살펴보기</p> <div class="content03_marquee"> <div class="content03_marquee_list"><img alt="" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_marquee.png" /></div> <div class="content03_marquee_list"><img alt="" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_marquee.png" /></div> </div> <ul class="content03_btn_wrap"> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006484"><img alt="나이키" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_01.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006488"><img alt="아디다스" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_02.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006492"><img alt="휠라" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_03.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006479"><img alt="스케쳐스" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_04.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006489"><img alt="뉴발란스" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_05.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006464"><img alt="푸마" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_06.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006474"><img alt="베어파우" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_07.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006472"><img alt="ABC셀렉트" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_08.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006491"><img alt="반스" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_09.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006490"><img alt="컨버스" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_10.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006465"><img alt="누오보" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_11.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006473"><img alt="스테파노로시" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content03_btn_12.png" /> </a></li> </ul> </div> <div aria-labelledby="tab4" class="art-content-inner cnt content04" id="tabpanel4"> <p class="content_ttl01">홀리데이 세일 4.</p> <p class="content_ttl02">함께 준비하는 겨울 부츠</p> <p class="content_ttl03">웜앤라이트 3 컬렉션으로 따뜻한 겨울</p> <a class="content04_img" href="https://www.a-rt.com/display/webzine/detail/main?wbznSeq=2091&amp;wbznType=L&amp;track=W0024" target="_blank"><img alt="" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content04_img.png" /> </a> <a class="content04_btn" href="https://www.a-rt.com/display/webzine/detail/main?wbznSeq=2091&amp;wbznType=L&amp;track=W0024" target="_blank"> 컬렉션 보러 가기 </a></div> <div aria-labelledby="tab5" class="art-content-inner cnt content05" id="tabpanel5"> <p class="content_ttl01">홀리데이 세일 5.</p> <p class="content_ttl02">ABC PLUS 추가 혜택</p> <p class="content_ttl03">온라인 전용 브랜드 기간 한정 특별가</p> <ul class="content05_btn_wrap"> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006460"><img alt="신발" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content05_btn_01.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006461"><img alt="의류" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content05_btn_02.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006462"><img alt="키즈" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content05_btn_03.png" /> </a></li> <li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006463"><img alt="잡화" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content05_btn_04.png" /> </a></li> </ul> </div> <div aria-labelledby="tab6" class="art-content-inner cnt content06" id="tabpanel6"> <p class="content_ttl01">홀리데이 세일 6.</p> <p class="content_ttl02">포인트 사용 이벤트</p> <p class="content_ttl03">특별 이벤트와 함께하는 따뜻한 연말</p> <div class="content06_img_wrap"> <div class="content06_img"><img alt="ABC-MART GIFT CARD" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/content06_img.png" /></div> <p class="content06_badge"><span class="content06_badge_txt01">추첨</span> <span class="content06_badge_txt02">50명</span></p> </div> <p class="content06_txt">[ABC마트] 기프트카드 1만원권</p> <a class="content06_btn" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002251" target="_blank">이벤트 응모하러 가기 </a></div> <div class="art-content-inner banner_wrap"><a href="https://grandstage.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006457" target="_blank"><img alt="GRAND STAGE 혜택 보러가기" src="https://image.a-rt.com/art/managing/event/20251209_holiday_sale/abc/pc/img/banner.jpg" /> </a></div> </div> <!-- e : art-container-event --><!-- 눈 내리는 효과 --><script> const wrap = document.querySelector(".snow-wrap"); const flakes = []; const total = 150; const isMobileDevice = window.innerWidth <= 720; const baseSpeedMin = 1.6; const baseSpeedMax = 3.2; for (let i = 0; i < total; i++) { const el = document.createElement("div"); el.classList.add("snow"); const r = Math.random(); let sizePx; if (r < 0.5) sizePx = Math.random() * 10 + 8; else if (r < 0.85) sizePx = Math.random() * 12 + 16; else sizePx = Math.random() * 14 + 24; const sizeResponsive = isMobileDevice ? (sizePx * 0.12).toFixed(4) + "vw" : sizePx + "px"; const x = Math.random() * window.innerWidth; const y = Math.random() * window.innerHeight * 1.4 - window.innerHeight * 0.4; const speed = Math.random() * (baseSpeedMax - baseSpeedMin) + baseSpeedMin; const sway = Math.random() * 30 + 10; const angleSpeed = Math.random() * 0.02 + 0.01; const angle = Math.random() * Math.PI * 2; const opacityLevels = [0.15, 0.25, 0.35, 0.45, 0.6, 0.75, 1.0]; const selectedOpacity = opacityLevels[Math.floor(Math.random() * opacityLevels.length)]; el.style.setProperty("--opacity", selectedOpacity); el.style.width = sizeResponsive; el.style.height = sizeResponsive; wrap.appendChild(el); flakes.push({ el, x, y, speed, sway, angle, angleSpeed }); } let frame = 0; function update() { frame++; const skip = frame % 2 !== 0; for (const f of flakes) { if (skip) continue; f.y += f.speed; f.angle += f.angleSpeed; f.x += Math.sin(f.angle) * (f.sway * 0.02); if (f.y > window.innerHeight + 10) { f.y = -20; f.x = Math.random() * window.innerWidth; } f.el.style.transform = `translate3d(${f.x}px, ${f.y}px, 0)`; } requestAnimationFrame(update); } update(); </script><!-- 불빛 효과 --><script> const sparkleTarget = document.querySelector(".main img"); const sparkleTotal = 18; const sparkleIsMobile = window.innerWidth <= 720; const sparkleList = []; const minDistance = 8; let usedPositions = []; for (let i = 0; i < sparkleTotal; i++) { createSparkle(); } function createSparkle() { const wrap = document.createElement("div"); Object.assign(wrap.style, { position: "absolute", width: "0", height: "0", pointerEvents: "none", opacity: 0 }); const v = document.createElement("div"); const h = document.createElement("div"); [v.style, h.style].forEach(style => { Object.assign(style, { position: "absolute", background: "rgba(255,255,255,1)", filter: "blur(3px)", borderRadius: sparkleIsMobile ? "0.6vw" : "4px", transformOrigin: "center" }); }); if (sparkleIsMobile) { Object.assign(v.style, { width: "0.4vw", height: "3vw", top: "-1.5vw", left: "-0.2vw" }); Object.assign(h.style, { width: "3vw", height: "0.4vw", top: "-0.2vw", left: "-1.5vw" }); } else { Object.assign(v.style, { width: "3px", height: "20px", top: "-10px", left: "-1px" }); Object.assign(h.style, { width: "20px", height: "3px", top: "-1px", left: "-10px" }); } wrap.appendChild(v); wrap.appendChild(h); sparkleTarget.parentNode.appendChild(wrap); sparkleList.push(wrap); placeWithSpacing(wrap); } function placeWithSpacing(el) { let x, y, valid; let attempt = 0; do { x = Math.random() * 100; y = Math.random() * 100; valid = true; for (const pos of usedPositions) { const dist = Math.hypot(x - pos.x, y - pos.y); if (dist < minDistance) { valid = false; break; } } } while (!valid && ++attempt < 50); usedPositions.push({ x, y }); el.style.left = `${x}%`; el.style.top = `${y}%`; } function animateAll() { usedPositions = []; sparkleList.forEach(el => { placeWithSpacing(el); el.animate( [ { opacity: 0, transform: "scale(0.3)" }, { opacity: 1, transform: "scale(1.18)" }, { opacity: 0, transform: "scale(0.3)" } ], { duration: 2500, easing: "ease-in-out", fill: "forwards" } ); }); setTimeout(animateAll, 2500); } animateAll(); </script><!-- GNB 스크립트 --><script> $(document).ready(function () { const topSpace = 144; 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><!-- content02_swiper --><script> $(function () { const $swiper = $('.swiper.content02_swiper'); const slideCount = $swiper.find('.swiper-slide').length; const swiperInstance = new Swiper('.swiper.content02_swiper', { slidesPerView: 3, centeredSlides: true, spaceBetween: 8, speed: 500, allowTouchMove: true, loop: true, watchOverflow: true, autoplay: { delay: 3000, disableOnInteraction: false, }, on: { transitionEnd() { requestAnimationFrame(() => adjustActiveSlideOffset()); }, resize() { updateSpaceBetween(); requestAnimationFrame(() => adjustActiveSlideOffset()); } } }); function updateSpaceBetween() { const baseSpace = swiperInstance.originalParams.spaceBetween; swiperInstance.params.spaceBetween = window.innerWidth <= 720 ? (baseSpace / 720) * window.innerWidth : baseSpace; swiperInstance.update(); } function adjustActiveSlideOffset() { const activeSlide = $swiper.find('.swiper-slide-active')[0]; if (!activeSlide) return; const swiperWidth = $swiper.width(); const activeWidth = $(activeSlide).outerWidth(true); const activeLeft = activeSlide.offsetLeft; const offset = activeLeft - (swiperWidth - activeWidth) / 2; const current = swiperInstance.getTranslate(); const diff = -offset - current; const target = current + diff; const $wrapper = $swiper.find('.swiper-wrapper'); $wrapper.css('transition', 'transform 0.3s ease'); swiperInstance.setTranslate(target); setTimeout(() => { $wrapper.css('transition', ''); }, 350); } updateSpaceBetween(); }); </script><!-- 1920px 스크립트 --><script> function editorCalcWidth() { var width_size = $(window).width(); if (width_size > 1200) $('.editor-wrap').css({width: width_size}); } $(document).ready(function () { editorCalcWidth(); }); $(window).on('scroll resize', function () { editorCalcWidth(); }); </script><!-- E : 이벤트 복사영역 여기까지 -->