<!-- 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%;
}
.main_marquee {
position: absolute;
display: flex;
gap: 20px;
width: 100%;
top: 48px;
left: 0;
overflow: hidden;
}
.main_marquee_list {
width: 2128.81px;
flex-shrink: 0;
-webkit-animation: marquee 20s linear infinite;
animation: marquee 20s linear infinite;
}
.main_marquee_list img {
width: 100%;
}
@keyframes marquee {
100% {
-webkit-transform: translateX(calc(-100% - 20px));
transform: translateX(calc(-100% - 20px));
}
}
/* content_video */
.content_video {
padding: 106px 0;
background-color: #141414;
}
.content_video_wrap {
max-width: 1040px;
margin: 0 auto !important;
line-height: 0;
}
.content_video_wrap video {
width: 1040px;
}
/* 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: 100%;
height: 80px;
transition: all 0.3s;
}
#tabNav li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 24px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.96px;
color: #888888;
background-color: #000000;
}
#tabNav li.active a,
#tabNav li a:hover {
font-weight: 700;
color: #FFEDED;
background-color: #E60012;
}
/* content common */
.content_ttl_red {
font-size: 20px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.4px;
text-decoration: underline;
color: #E60012;
}
.content_ttl_main {
margin-top: 32px !important;
font-size: 40px;
font-weight: 700;
line-height: 1;
letter-spacing: -1.2px;
color: #ffffff;
}
.content_ttl_sub {
margin-top: 14px !important;
font-size: 24px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.72px;
color: #ffffff;
}
/* content01 */
.content01 {
padding: 80px 0 89px;
background-color: #000000;
}
.content01_coupon_wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
max-width: 1060px;
margin: 48px auto 0 !important;
}
.content01_coupon {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 520px;
height: 173px;
padding: 17px 40px 29px 32px;
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content01_coupon_bg.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: 20px;
font-weight: 500;
line-height: 1;
}
.content01_coupon_dl_img {
width: 12.3px;
height: 13.8px;
}
.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: 137px;
margin-right: -4px;
}
.content01_coupon_discount .dis_plus {
font-size: 40px;
font-weight: 400;
line-height: 1;
}
.content01_coupon_discount .dis_num {
font-size: 75px;
font-weight: 700;
line-height: 0.8;
letter-spacing: -3.75px;
}
.content01_coupon_discount .dis_per {
font-size: 40px;
font-weight: 700;
line-height: 1;
}
.content01_coupon_name {
font-size: 20px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.6px;
text-align: right;
}
.content01_coupon_dl_btn {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
width: 518px;
height: 80px;
margin: 48px auto 0 !important;
color: #FFFFFF;
background-color: #E60012;
font-size: 22px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.88px;
text-decoration: unset;
}
.content01_coupon_dl_ico {
max-width: 24px;
}
.btn-md {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin: 47px auto 0 !important;
color: #ffffff;
}
.content01_caution_ico {
max-width: 20px;
}
.content01_caution_txt {
font-size: 22px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.88px;
}
/* content02 */
.content02 {
padding: 80px 0 87px;
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.content02_swiper_wrap {
margin-top: 78px !important;
}
.content02_swiper_box {
position: relative;
display: flex;
align-items: center;
}
.content02_swiper {
position: relative;
width: 1120px;
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: 344px !important;
height: 430px;
background-repeat: no-repeat;
background-size: cover;
}
.content02_swiper .swiper-slide.swiper-slide-active {
width: 405px !important;
height: 563px;
}
.content02_swiper .swiper-slide._01 {
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_img01.png);
}
.content02_swiper .swiper-slide._02 {
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_img02.png);
}
.content02_swiper .swiper-slide._03 {
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_img03.png);
}
.content02_swiper .swiper-slide._04 {
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content02_swiper_img04.png);
}
.content02_swiper .swiper-slide._01.swiper-slide-active {
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/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/20251111_black_abc_day/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/20251111_black_abc_day/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/20251111_black_abc_day/abc/pc/img/content02_swiper_img04_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: 6px;
width: 353px;
height: 80px;
color: #ffffff;
background-color: #E60012;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.8px;
left: 50%;
bottom: 35px;
transform: translateX(-50%);
}
.content02_swiper a .content02_swiper_btn_arrow {
width: 20px;
height: 20px;
}
/* content03 */
.content03 {
padding: 80px 0;
background-image: url(https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.content03_marquee {
display: flex;
gap: 11px;
width: 100%;
max-width: 1168px;
margin: 61px auto 0 !important;
overflow: hidden;
}
.content03_marquee_list {
width: 1444px;
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% - 11px));
transform: translateX(calc(-100% - 11px));
}
}
.content03_btn_wrap {
display: flex;
list-style: none;
flex-wrap: wrap;
max-width: 1172.38px;
gap: 14.47px;
margin: 56px auto 0 !important;
}
.content03_btn_wrap li {
width: 282.15px;
height: 94.05px;
}
.content03_btn_wrap li a {
width: 100%;
height: 100%;
}
/* content04 */
.content04 {
padding: 80px 0;
background-color: #E6E6E6;
}
.content04 .content_ttl_main,
.content04 .content_ttl_sub {
color: #000000;
}
.content04_btn_wrap {
display: flex;
list-style: none;
max-width: 1332px;
gap: 12px;
margin: 60px auto 0 !important;
}
.content04_btn_wrap li {
width: 324px;
height: 380px;
}
.content04_btn_wrap li a {
width: 100%;
height: 100%;
}
/* content05 */
.content05 {
padding: 80px 0;
background-color: #151515;
}
.content05_btn_wrap {
display: flex;
list-style: none;
flex-wrap: wrap;
max-width: 720px;
gap: 40px;
margin: 53px auto 0 !important;
}
.content05_btn_wrap li {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 340px;
}
.content05_num {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 30px;
font-size: 18px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.54px;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 99px;
}
.content05_btn_wrap li a {
display: flex;
justify-content: center;
align-items: center;
width: 340px;
height: 80px;
font-size: 20px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.8px;
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;
}
/* 애니메이션 */
.animationSection.animation01 {
position: relative;
width: 1040px;
height: 585px;
margin: 0 auto;
}
</style>
<!-- s : art-container-event -->
<div class="art-container-event">
<div class="art-content-inner main"><img alt="블랙 ABC 데이" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/main.jpg" /></div>
<div class="art-content-inner main"><img alt="최대 70% 할인" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/main_2.jpg" />
<div class="main_marquee">
<div class="main_marquee_list"><img alt="A에비씨마트 B빅세일 C시작합니다" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/main_marquee.png" /></div>
<div class="main_marquee_list"><img alt="A에비씨마트 B빅세일 C시작합니다" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/main_marquee.png" /></div>
</div>
</div>
<div class="content_video">
<div class="animationSection animation01">
<div class="aniWrap">
<div class="aniImg aniImg01">
<div class="content_video_wrap">
<video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="https://abcmart.fms.wecandeo.com/100/3132/2025/11/11/18/V35921079.mp4?key=plGJQqSub69iXz7%2FICJJqBxobHWzxKNy80GOhfSgVVxkYSPb8V9%2FZEKMifOEhwN1cFouphiC19T10nyMECFE381%2FFSDc%2Fx3qlcXbQW3%2BLlo%3D&packageId=1011817&videoId=16772453" /></video>
</div>
</div>
</div>
</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">ABC PLUS</a></li>
<!-- <li aria-controls="tabpanel5" class="tab" id="tab5" role="tab">
<a href="#tabpanel5">이벤트</a>
</li> -->
</ul>
</nav>
<div aria-labelledby="tab1" class="art-content-inner cnt content01" id="tabpanel1">
<p class="content_ttl_red">블랙ABC데이 혜택 1.</p>
<p class="content_ttl_main">온라인 단독 할인 쿠폰팩</p>
<p class="content_ttl_sub">기간 한정으로 오직 멤버십 회원만 드리는 혜택</p>
<div class="content01_coupon_wrap">
<div class="content01_coupon">
<div class="content01_coupon_ttl_wrap">
<p class="content01_coupon_ttl">BLACK ABC DAY</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">12</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">BLACK ABC DAY</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">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">BLACK ABC DAY</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">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">BLACK ABC DAY</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('3000000781','3000000779','3000000777','3000000775')"><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> <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> <!-- 모달창 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/11/14 11:00 - 2025/12/11 23:59</li>
<li>쿠폰은 통합멤버십 회원 대상이며, 각 쿠폰은 ID당 3회 다운로드 가능합니다.</li>
<li>일부 상품의 경우 쿠폰 적용 대상에서 제외될 수 있습니다.</li>
<li>다운로드한 쿠폰은 마이 페이지 > 쇼핑 혜택 > 쿠폰 리스트에서 확인 가능합니다.</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_ttl_red">블랙ABC데이 혜택 2.</p>
<p class="content_ttl_main">인기 카테고리 최대 ~70%</p>
<p class="content_ttl_sub">카테고리별로 할인 상품 둘러보기</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=2000006402"><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=2000006419"><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=2000006406"><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=2000006418"><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_ttl_red">블랙ABC데이 혜택 3.</p>
<p class="content_ttl_main">인기 브랜드별 모아보기</p>
<p class="content_ttl_sub">내가 좋아하는 브랜드 살펴보기</p>
<div class="content03_marquee">
<div class="content03_marquee_list"><img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_marquee.png" /></div>
<div class="content03_marquee_list"><img alt="" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/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=2000006414"><img alt="나이키" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_01.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006416"><img alt="아디다스" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_02.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006410"><img alt="휠라" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_03.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006403"><img alt="스케쳐스" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_04.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006408"><img alt="뉴발란스" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_05.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006409"><img alt="푸마" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_06.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006421"><img alt="닥터마틴" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_07.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006426"><img alt="ABC셀렉트" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_08.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006420"><img alt="반스" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_09.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006422"><img alt="컨버스" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_10.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006428"><img alt="누오보" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content03_btn_11.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000006429"><img alt="스테파노로시" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/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_ttl_red">블랙ABC데이 혜택 4.</p>
<p class="content_ttl_main">ABC PLUS 한정특가</p>
<p class="content_ttl_sub">온라인 단독 브랜드 세일 상품 만나기</p>
<ul class="content04_btn_wrap">
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006388"><img alt="신발" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content04_btn_01.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006389"><img alt="의류" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content04_btn_02.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006390"><img alt="키즈" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content04_btn_03.png" /> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006391"><img alt="잡화" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/content04_btn_04.png" /> </a></li>
</ul>
</div>
<!-- <div aria-labelledby="tab5" class="art-content-inner cnt content05" id="tabpanel5">
<p class="content_ttl_red">
블랙ABC데이 혜택 5.
</p>
<p class="content_ttl_main">
멤버십 회원 특별 이벤트
</p>
<p class="content_ttl_sub">
하나는 부족할 거 같아 준비한 두 가지 혜택
</p>
<ul class="content05_btn_wrap">
<li>
<p class="content05_num">01</p>
<div class="conten05_img">
<img src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/conten05_img01.png" alt="">
</div>
<a href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002247">
자세히 보러 가기
</a>
</li>
<li>
<p class="content05_num">02</p>
<div class="conten05_img">
<img src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/conten05_img02.png" alt="">
</div>
<a href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002246">
자세히 보러 가기
</a>
</li>
</ul>
</div> -->
<div class="art-content-inner banner_wrap"><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006393"><img alt="GRAND STAGE 혜택 보러가기" src="https://image.a-rt.com/art/managing/event/20251111_black_abc_day/abc/pc/img/banner_img.jpg" /> </a></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>
$(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: 10,
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><!-- 애니메이션 --><script>
$(function () {
$(window).on("scroll", function () {
doAnimation(".animation01", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 400, 0.3, 0);
});
function doAnimation(selector, startCSS, endCSS, duration, triggerRatio, delay) {
var $section = $(selector);
var $img = $section.find(".aniImg");
if ($img.length === 0) return;
var ratio = (typeof triggerRatio === "number") ? triggerRatio : 0.5;
var delayTime = (typeof delay === "number") ? delay : 0;
var triggerPoint = $section.offset().top + ($section.outerHeight() * ratio);
if ($section.data("shown") === undefined) {
$section.data("shown", false);
$img.css($.extend({}, startCSS, { position: "absolute" }));
}
if ($(window).scrollTop() + $(window).height() > triggerPoint) {
if (!$section.data("shown")) {
$section.data("shown", true);
$img.stop(true, true)
.delay(delayTime)
.animate(endCSS, duration, "swing");
}
} else {
if ($section.data("shown")) {
$section.data("shown", false);
$img.stop(true, true)
.delay(delayTime)
.animate(startCSS, duration, "swing");
}
}
}
$(window).trigger("scroll");
});
</script><!-- E : 이벤트 복사영역 여기까지 -->