블루ABC데이 ~70%
올여름 시원하게 사는 법
2026.07.03 ~ 2026.07.30
<!-- 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: 95px !important;
}
/* common */
body {
min-width: 1440px;
margin: 0;
padding: 0;
}
body * {
box-sizing: border-box;
}
.wrap .special-sub-wrap .sub-top .editor-wrap {
min-width: 1440px;
}
.art-container-event {
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
text-align: center;
font-family: Pretendard, sans-serif !important;
}
.art-content-inner {
position: relative;
margin: 0 auto;
overflow: hidden;
}
.art-container-event ul {
margin: 0;
padding: 0;
list-style: none;
}
.art-container-event p {
margin: 0;
padding: 0;
}
.art-container-event a {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.art-container-event a:focus {
outline: none;
}
.art-content-inner img {
display: block;
width: 100%;
}
/* main */
.main:not(#mdTit1) {
position: relative;
max-width: 100%;
height: clamp(450px, 31.25vw, 600px);
overflow: hidden;
background-color: #33AFE6;
user-select: none;
}
.main .mv_logo {
position: absolute;
display: block;
width: clamp(59px, 4.11vw, 79px);
height: clamp(65px, 4.53vw, 87px);
top: clamp(63px, 4.38vw, 84px);
left: 50%;
transform: translateX(-50%);
background-image: url(https://image.a-rt.com/art/editor/202607/1782870990411.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.main .motion_wrap {
position: absolute;
top: clamp(149px, 10.31vw, 198px);
left: 50%;
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
}
.main .motion_wrap .motion {
position: absolute;
opacity: 0;
visibility: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.main .motion_wrap._01 {
width: clamp(842px, 58.44vw, 1122px);
height: clamp(204px, 14.17vw, 272px);
}
.main .motion_wrap._01 .motion._01 {
width: clamp(288px, 20.00vw, 384px);
height: clamp(195px, 13.54vw, 260px);
top: 0;
left: 0;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870900138.png);
}
.main .motion_wrap._01 .motion._02 {
width: clamp(306px, 21.25vw, 408px);
height: clamp(161px, 11.20vw, 215px);
top: 0;
right: 0;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870906649.png);
}
.main .motion_wrap._01 .motion._03 {
width: clamp(330px, 22.92vw, 440px);
height: clamp(152px, 10.57vw, 203px);
top: clamp(5px, 0.36vw, 7px);
left: clamp(253px, 17.55vw, 337px);
background-image: url(https://image.a-rt.com/art/editor/202607/1782870917294.png);
}
.main .motion_wrap._01 .motion._04 {
width: clamp(332px, 23.07vw, 443px);
height: clamp(32px, 2.19vw, 42px);
bottom: 0;
left: clamp(241px, 16.72vw, 321px);
background-image: url(https://image.a-rt.com/art/editor/202607/1782870924948.png);
}
.main .motion_wrap._02 {
width: clamp(450px, 31.25vw, 600px);
height: clamp(213px, 14.79vw, 284px);
}
.main .motion_wrap._02 .motion._05 {
width: clamp(221px, 15.31vw, 294px);
height: clamp(59px, 4.11vw, 79px);
top: 0;
left: 0;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870935177.png);
}
.main .motion_wrap._02 .motion._06 {
width: clamp(221px, 15.31vw, 294px);
height: clamp(62px, 4.27vw, 82px);
top: clamp(75px, 5.21vw, 100px);
left: 0;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870944366.png);
}
.main .motion_wrap._02 .motion._07 {
width: clamp(221px, 15.31vw, 294px);
height: clamp(59px, 4.11vw, 79px);
bottom: 0;
left: 0;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870953970.png);
}
.main .motion_wrap._02 .motion._08 {
width: clamp(186px, 12.92vw, 248px);
height: clamp(213px, 14.79vw, 284px);
top: 0;
right: 0;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870960193.png);
}
/* content intro */
.content._intro {
background-color: #000000;
}
.content._intro .video_wrap {
position: relative;
display: flex;
justify-content: center;
}
.content._intro .video_wrap video {
width: 1280px;
}
/* gnb */
#tabNav {
position: sticky;
top: var(--head);
background-color: #000000;
z-index: 2;
}
#tabNav .tablist {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 20px;
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: 303px;
height: 122px;
transition: all 0.3s;
}
#tabNav li a {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 100%;
height: 100%;
font-size: 20px;
font-weight: 500;
line-height: 100%;
letter-spacing: -1px;
color: #ffffff;
background-color: #33AFE6;
border: 1px solid #5ECDFF;
border-radius: 7px;
transition: all 0.3s;
}
#tabNav li a::before {
content: '';
display: block;
width: 147px;
height: 56px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
animation-name: tabMove;
animation-duration: 4.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
will-change: transform;
}
#tabNav li:nth-of-type(1) a::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870998426.png);
animation-delay: 0s;
}
#tabNav li:nth-of-type(2) a::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782871004950.png);
animation-delay: 0.5s;
}
#tabNav li:nth-of-type(3) a::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782871011170.png);
animation-delay: 1s;
}
#tabNav li:nth-of-type(4) a::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782871017716.png);
animation-delay: 1.5s;
}
#tabNav li:nth-of-type(5) a::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782871024877.png);
animation-delay: 2s;
}
#tabNav li:nth-of-type(6) a::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782871030542.png);
animation-delay: 2.5s;
}
@keyframes tabMove {
0% {
transform: translateY(0);
}
13% {
transform: translateY(-10%);
}
26% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
#tabNav li.active a,
#tabNav li a:hover {
color: #000000;
background-color: #C0ECFF;
}
/* content common */
.content {
padding: 64px 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content_ttl01 {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.64px;
}
.content_ttl02 {
margin-top: 24px !important;
font-size: 32px;
font-weight: 700;
line-height: 100%;
letter-spacing: -1.12px;
}
.content_ttl03 {
margin-top: 12px !important;
font-size: 20px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.8px;
}
.content_coupon_wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 416px;
margin: 40px auto 0 !important;
user-select: none;
}
.content_coupon {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
width: 416px;
height: 138px;
padding: 14px 28px 23px;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870666936.png);
background-repeat: no-repeat;
background-size: cover;
}
.content_coupon .content_coupon_badge {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 93px;
height: 93px;
top: -33px;
right: -46px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
animation: badgeScale 1.4s ease-in-out infinite;
transform-origin: center;
will-change: transform;
}
@keyframes badgeScale {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.content_coupon .content_coupon_badge p:nth-of-type(1) {
font-size: 18px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1px;
color: #ffffff;
}
.content_coupon .content_coupon_badge p:nth-of-type(2) {
font-size: 24px;
font-weight: 600;
line-height: 100%;
letter-spacing: -1.4px;
color: #ffffff;
}
.content_coupon_ttl_wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.content_coupon_ttl {
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.64px;
}
.content_coupon_text_wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
}
.content_coupon_discount {
display: flex;
justify-content: flex-end;
align-items: flex-end;
margin-left: 30px !important;
}
.content_coupon_discount .dis_num {
font-size: 60px;
font-weight: 700;
line-height: 80%;
letter-spacing: -3px;
}
.content_coupon_discount .dis_per {
margin-left: 3px !important;
font-size: 32px;
font-weight: 700;
line-height: 100%;
}
.content_coupon_name {
font-size: 15px;
font-weight: 500;
line-height: 120%;
letter-spacing: -0.45px;
text-align: right;
}
.content_coupon_dl_btn {
display: flex;
justify-content: center;
align-items: center;
width: 416px;
height: 64px;
margin: 30px auto 0 !important;
color: #FFFFFF;
background-color: #000000;
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.64px;
text-decoration: unset;
}
.content_coupon_period_txt_wrap {
display: flex;
justify-content: center;
gap: 10px;
margin: 16px auto 0 !important;
font-size: 16px;
font-weight: 400;
line-height: 100%;
letter-spacing: -1px;
color: #ffffff;
}
.btn-md_wrap {
display: flex;
justify-content: center;
align-items: center;
width: 416px;
height: 64px;
margin: 12px auto 0 !important;
}
.btn-md {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
color: #ffffff;
}
.content_caution_ico {
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content_caution_txt {
font-size: 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.64px;
color: #ffffff;
}
/* content01 */
.content._01 {
background-color: #33AFE6;
}
.content._01 .content_ttl01,
.content._01 .content_ttl02,
.content._01 .content_ttl03 {
color: #ffffff;
}
.content._01 .content_coupon .content_coupon_badge {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870770005.png);
}
.content._01 .content_caution_ico {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870760525.png);
}
/* content02 */
.content._02 {
background-color: #E60012;
}
.content._02 .content_ttl01,
.content._02 .content_ttl02,
.content._02 .content_ttl03 {
color: #ffffff;
}
.content._02 .content_caution_ico {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870778090.png);
}
.content._02 .content_coupon_wrap {
margin: 40px auto 0 !important;
}
.content._02 .content_coupon_discount {
margin-left: 27px !important;
}
.content._02 .content_event_info_wrap {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 416px;
margin: 30px auto 0 !important;
}
.content._02 .content_event_info_wrap li {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6.7px 14px;
border-radius: 8px;
background: #A5000F;
}
.content._02 .content_event_info_wrap li.on {
margin: 16px 0 10px !important;
background: linear-gradient(90deg, #548CEE 0%, #33AFE6 100%);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.content._02 .content_event_info_wrap li:nth-of-type(1).on {
margin: 0 0 10px !important;
}
.content._02 .content_event_info_wrap li:nth-of-type(4).on {
margin: 16px 0 0 !important;
}
.content._02 .content_event_info_wrap li p {
color: rgba(255, 255, 255, 0.7);
}
.content._02 .content_event_info_wrap li.on p {
color: #ffffff;
}
.content._02 .content_event_info_wrap li p:nth-of-type(1) {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
font-size: 19px;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.77px;
}
.content._02 .content_event_info_wrap li.on p:nth-of-type(1) {
font-weight: 600;
}
.content._02 .content_event_info_wrap li p:nth-of-type(1)::before {
content: '';
display: block;
width: 75px;
height: 48px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 0.5;
}
.content._02 .content_event_info_wrap li.on p:nth-of-type(1)::before {
opacity: 1;
}
.content._02 .content_event_info_wrap li:nth-of-type(1) p:nth-of-type(1)::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870675137.png);
}
.content._02 .content_event_info_wrap li:nth-of-type(2) p:nth-of-type(1)::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870681293.png);
}
.content._02 .content_event_info_wrap li:nth-of-type(3) p:nth-of-type(1)::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870688466.png);
}
.content._02 .content_event_info_wrap li:nth-of-type(4) p:nth-of-type(1)::before {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870694727.png);
}
.content._02 .content_event_info_wrap li p:nth-of-type(2) {
display: flex;
justify-content: flex-start;
width: 122px;
font-size: 16px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.8px;
}
.content._02 .content_event_info_wrap li.on p:nth-of-type(2) {
font-weight: 500;
}
.content._02 .content_event_info_wrap li.on::before {
content: '지금 발급 중';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 12px;
left: 11px;
top: -15px;
font-size: 14px;
font-weight: 700;
line-height: 118%;
letter-spacing: -1px;
color: #366FEB;
background-color: #ffffff;
border: 1.4px solid #4898EB;
border-radius: 100px;
}
/* content03 */
.content._03 {
background-color: #ffffff;
}
.content._03 .content_ttl01,
.content._03 .content_ttl02,
.content._03 .content_ttl03 {
color: #000000;
}
.content._03 .content_ttl02 span {
color: #33AFE6;
}
.content._03 .content_list {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
max-width: 1000px;
margin: 40px auto 0 !important;
}
.content._03 .content_list li {
position: relative;
display: flex;
justify-content: center;
width: 241px;
height: 304px;
}
.content._03 .content_list li::before {
content: '';
position: absolute;
width: 50px;
height: 61px;
left: 20px;
top: 20px;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870708773.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content._03 .content_list li a {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
border-radius: 9.6px;
transition: all 0.3s;
}
.content._03 .content_list li a:hover {
background-size: 110%;
transition: all 0.3s;
}
.content._03 .content_list li:nth-of-type(1) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870787213.png);
}
.content._03 .content_list li:nth-of-type(2) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870793083.png);
}
.content._03 .content_list li:nth-of-type(3) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870800348.png);
}
.content._03 .content_list li:nth-of-type(4) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870808530.png);
}
.content._03 .content_list li:nth-of-type(5) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870817731.png);
}
.content._03 .content_list li:nth-of-type(6) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870826479.png);
}
.content._03 .content_list li a span {
display: block;
width: 100%;
padding: 29px 32px !important;
font-size: 20px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.8px;
color: #ffffff;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
border-radius: 0 0 9.6px 9.6px;
}
/* content04 */
.content._04 {
background-color: #33AFE6;
}
.content._04 .content_ttl01,
.content._04 .content_ttl02,
.content._04 .content_ttl03 {
color: #ffffff;
}
.content._04 .content_ranking {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 40px auto 0 !important;
}
.content._04 .content_ranking li {
position: relative;
width: 686px;
height: 76px;
padding-left: 16px !important;
transition: all 0.1s;
}
.content._04 .content_ranking li::after {
content: '';
position: absolute;
width: 100px;
height: 24px;
top: 26px;
right: 24px;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870719101.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content._04 .content_ranking li.on,
.content._04 .content_ranking li:hover {
background-color: #ffffff;
border-radius: 10px;
transition: all 0.1s;
}
.content._04 .content_ranking li.on::after,
.content._04 .content_ranking li:hover::after {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870727487.png);
}
.content._04 .content_ranking li a {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 100%;
}
.content._04 .content_ranking li a span:nth-of-type(1) {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
font-size: 20px;
font-weight: 500;
line-height: 100%;
color: #ffffff;
}
.content._04 .content_ranking li.on a span:nth-of-type(1),
.content._04 .content_ranking li:hover a span:nth-of-type(1) {
color: #33AFE6;
}
.content._04 .content_ranking li a img {
width: 44px !important;
height: 44px !important;
margin-left: 16px !important;
border-radius: 88px;
background-color: #ffffff;
}
.content._04 .content_ranking li.on a img,
.content._04 .content_ranking li:hover a img {
background-color: #EFEFEF;
}
.content._04 .content_ranking li a span:nth-of-type(2) {
margin-left: 12px !important;
font-size: 20px;
font-weight: 500;
line-height: 100%;
color: #000000;
}
.content_brand {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 684px;
margin: 32px auto 0 !important;
}
.content_brand li {
width: 220px;
height: 112px;
}
.content_brand li a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
height: 100%;
background-color: #2099CE;
border-radius: 5px;
text-decoration: none;
transition: all 0.15s;
}
.content_brand li:hover a {
background-color: #C0ECFF;
transition: all 0.15s;
}
.content_brand li a img {
width: 128px !important;
height: 58px !important;
}
.content_brand li span {
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #ffffff;
transition: all 0.15s;
}
.content_brand li:hover span {
color: #000000;
transition: all 0.15s;
}
/* content05 */
.content._05 {
background-color: #ffffff;
}
.content._05 .content_ttl01,
.content._05 .content_ttl02,
.content._05 .content_ttl03 {
color: #000000;
}
.content._05 .content_ttl02 span {
color: #E60012;
}
.content._05 .content_list {
display: flex;
gap: 12px;
justify-content: center;
margin: 40px auto 0 !important;
}
.content._05 .content_list li {
position: relative;
display: flex;
justify-content: center;
width: 241px;
height: 304px;
}
.content._05 .content_list li::before {
content: '';
position: absolute;
width: 50px;
height: 61px;
left: 20px;
top: 20px;
background-image: url(https://image.a-rt.com/art/editor/202607/1782871518065.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.content._05 .content_list li a {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
border-radius: 9.6px;
transition: all 0.3s;
}
.content._05 .content_list li a:hover {
background-size: 110%;
transition: all 0.3s;
}
.content._05 .content_list li:nth-of-type(1) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870835168.png);
}
.content._05 .content_list li:nth-of-type(2) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870841385.png);
}
.content._05 .content_list li:nth-of-type(3) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870847487.png);
}
.content._05 .content_list li:nth-of-type(4) a {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870856771.png);
}
.content._05 .content_list li a span {
display: block;
width: 100%;
padding: 29px 32px !important;
font-size: 20px;
font-weight: 600;
line-height: 100%;
letter-spacing: -0.8px;
color: #ffffff;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
border-radius: 0 0 9.6px 9.6px;
}
/* content06 */
.content._06 {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870874733.jpg);
}
.content._06 .content_ttl01,
.content._06 .content_ttl02,
.content._06 .content_ttl03 {
color: #ffffff;
}
.content._06 .content_list {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px auto 0 !important;
}
.content._06 .content_list li {
width: 290px;
height: 374px;
border-radius: 8px;
background-color: #ffffff;
background-repeat: no-repeat;
}
.content._06 .content_list li:nth-of-type(1) {
background-image: url(https://image.a-rt.com/art/editor/202607/1782870883672.png);
background-size: 190px 120px;
background-position: top 25px center;
}
.content._06 .content_list li:nth-of-type(2) {
background-image: url(https://image.a-rt.com/art/editor/202607/1782954402226.png);
background-size: 77px 123px;
background-position: top 25px center;
}
.content._06 .content_list li a {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100%;
padding-top: 165px !important;
}
.content._06 .content_list li a > span:nth-of-type(1) {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.content._06 .content_list li a > span:nth-of-type(1) > span:nth-of-type(1) {
font-size: 18px;
font-weight: 600;
line-height: 100%;
letter-spacing: -1px;
color: #000000;
}
.content._06 .content_list li a > span:nth-of-type(1) > span:nth-of-type(2) {
display: flex;
justify-content: center;
align-items: center;
padding: 3px 8px;
font-size: 14px;
font-weight: 500;
line-height: 100%;
letter-spacing: -0.5px;
color: #ffffff;
background-color: #33AFE6;
border-radius: 100px;
}
.content._06 .content_list li a > span:nth-of-type(2) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 248px;
margin: 20px auto 0 !important;
padding: 18px 0 !important;
font-size: 16px;
font-weight: 700;
line-height: 146%;
letter-spacing: -0.94px;
color: #000000;
background-color: #EFEFEF;
border-radius: 8px;
}
.content._06 .content_list li a > span:nth-of-type(2) > span > span {
font-size: 18px;
font-weight: 500;
}
.content._06 .content_list li a > span:nth-of-type(3) {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 23px auto 0 !important;
padding: 22px 0 !important;
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: -1px;
color: #ffffff;
background-color: #000000;
border-radius: 0 0 8px 8px;
transition: all 0.15s;
}
.content._06 .content_list li a:hover > span:nth-of-type(3) {
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.15s;
}
/* banner_wrap */
.banner_link {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 160px;
padding: 38px 128px !important;
background-color: #33AFE6;
}
.banner_link span._logo {
width: 55px;
height: 52px;
background-image: url(https://image.a-rt.com/art/editor/202607/1782870556960.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner_link span._img {
position: absolute;
width: 349px;
height: 84px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://image.a-rt.com/art/editor/202607/1782870543206.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner_link span._txt {
display: flex;
justify-content: center;
align-items: center;
gap: 6.4px;
font-size: 16px;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.64px;
color: #ffffff;
}
.banner_link span._txt::after {
content: '';
display: block;
width: 5px;
height: 10px;
background-image: url(https://image.a-rt.com/art/editor/202602/1772587459380.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* 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;
margin: 0;
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: -11px;
padding-left: 11px;
}
.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;
padding: 0;
border: 0;
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="mv_logo"> </div>
<div class="motion_wrap _01" data-fade-time="200" data-motion-time="400" data-scene-time="3000">
<div class="motion _01" data-delay="0" data-dir="left" data-distance="10"> </div>
<div class="motion _02" data-delay="300" data-dir="right" data-distance="10"> </div>
<div class="motion _03" data-delay="600" data-dir="top" data-distance="10"> </div>
<div class="motion _04" data-delay="900" data-dir="bottom" data-distance="10"> </div>
</div>
<div class="motion_wrap _02" data-fade-time="200" data-motion-time="400" data-scene-time="3000">
<div class="motion _05" data-delay="0" data-dir="left" data-distance="10"> </div>
<div class="motion _06" data-delay="300" data-dir="left" data-distance="10"> </div>
<div class="motion _07" data-delay="600" data-dir="left" data-distance="10"> </div>
<div class="motion _08" data-delay="900" data-dir="right" data-distance="10"> </div>
</div>
</div>
<div class="content _intro">
<div class="video_wrap">
<video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="https://abcmart.fms.wecandeo.com/100/3132/2026/06/29/11/V36593839.mp4" /></video>
</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>
<li aria-controls="tabpanel5" class="tab" id="tab5" role="tab"><a href="#tabpanel5">실시간 랭킹</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 content _01" id="tabpanel1">
<p class="content_ttl01">블루ABC데이 혜택 01.</p>
<p class="content_ttl02">매주 도착하는 선착순 쿠폰</p>
<p class="content_ttl03">누구나 추가 할인 혜택의 주인공</p>
<div class="content_coupon_wrap">
<div class="content_coupon">
<div class="content_coupon_ttl_wrap">
<p class="content_coupon_ttl">블루ABC데이</p>
</div>
<div class="content_coupon_text_wrap">
<p class="content_coupon_discount"><span class="dis_num">15</span> <span class="dis_per">%</span></p>
<p class="content_coupon_name">쇼핑 지원<br />
쿠폰</p>
</div>
<div class="content_coupon_badge">
<p>선착순</p>
<p>700명</p>
</div>
</div>
</div>
<a class="content_coupon_dl_btn" href="javascript:abc.couponDown('쿠폰번호')"><span class="content_coupon_dl_txt">쿠폰 다운로드</span> </a>
<div class="content_coupon_period_txt_wrap">
<p>발급 기간</p>
<p>:</p>
<p>매주 금요일 오전 11시</p>
</div>
<div class="btn-md_wrap"><a class="btn-md" data-href="#modal1" href="javascript:void(0);"><span class="content_caution_ico"></span><span class="content_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>쿠폰은 매주 금요일 오전 11시부터 다운로드 할 수 있습니다.</li>
<li>선착순 700명 한정 발급되며, 지정된 기간 내 미사용 시 자동 소멸됩니다.</li>
<li>쿠폰은 통합멤버십 회원만 발급 가능합니다.</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 content _02" id="tabpanel2">
<p class="content_ttl01">블루ABC데이 혜택 02.</p>
<p class="content_ttl02">매주 달라지는 썸머 쿠폰</p>
<p class="content_ttl03">할인+할인 쇼핑 지원 혜택</p>
<div class="content_coupon_wrap">
<div class="content_coupon">
<div class="content_coupon_ttl_wrap">
<p class="content_coupon_ttl">블루ABC데이</p>
</div>
<div class="content_coupon_text_wrap">
<p class="content_coupon_discount"><span class="dis_num">8</span> <span class="dis_per">%</span></p>
<p class="content_coupon_name">위클리<br />
쇼핑 쿠폰</p>
</div>
</div>
</div>
<ul class="content_event_info_wrap">
<li data-coupon="3000001218" data-end="2026/07/09 23:59" data-start="2026/07/03 11:00">
<p>썸머 브랜드 쿠폰</p>
<p>7. 03(금) - 7. 09(목)</p>
</li>
<li data-coupon="3000001219" data-end="2026/07/16 23:59" data-start="2026/07/10 11:00">
<p>썸머 카테고리 쿠폰</p>
<p>7. 10(금) - 7. 16(목)</p>
</li>
<li data-coupon="3000001220" data-end="2026/07/23 23:59" data-start="2026/07/17 11:00">
<p>인기 브랜드 쿠폰</p>
<p>7. 17(금) - 7. 23(목)</p>
</li>
<li data-coupon="3000001221" data-end="2026/07/30 23:59" data-start="2026/07/24 11:00">
<p>인기 카테고리 쿠폰</p>
<p>7. 24(금) - 7. 30(목)</p>
</li>
</ul>
<a class="content_coupon_dl_btn" href="javascript:void(0);"><span class="content_coupon_dl_txt">위클리 쿠폰 다운로드</span> </a>
<div class="btn-md_wrap"><a class="btn-md" data-href="#modal2" href="javascript:void(0);"><span class="content_caution_ico"></span><span class="content_caution_txt">유의사항</span> </a></div>
<!-- 모달창 1 -->
<div aria-labelledby="mdTit1" aria-modal="true" class="md-cnt notice" id="modal2" role="dialog">
<div class="md-tit">
<h4 class="main" id="mdTit1">유의사항</h4>
</div>
<div class="md-txt">
<ul>
<li>쿠폰은 매주 금요일 오전 11시부터 다음주 목요일 자정까지 다운로드 할 수 있습니다.</li>
<li>쿠폰은 통합멤버십 회원만 발급 가능합니다.</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="tab3" class="art-content-inner cnt content _03" id="tabpanel3">
<p class="content_ttl01">블루ABC데이 혜택 03.</p>
<p class="content_ttl02">이번 <span>여름 추천</span> 카테고리</p>
<p class="content_ttl03">올 여름 시원하게 사는 법</p>
<ul class="content_list">
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007014" target="_blank"><span>샌들/슬라이드</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007015" target="_blank"><span>스니커즈</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007016" target="_blank"><span>스포츠 슈즈</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007017" target="_blank"><span>어패럴&용품</span> </a></li>
</ul>
</div>
<div aria-labelledby="tab4" class="art-content-inner cnt content _04" id="tabpanel4">
<p class="content_ttl01">블루ABC데이 혜택 04.</p>
<p class="content_ttl02">이번 주 인기 브랜드 랭킹</p>
<p class="content_ttl03">HOT한 여름 COOL한 가격</p>
<ul class="content_ranking">
<li class="on"><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007007" target="_blank"><span>1</span><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870737573.png" /><span>NIKE</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007008" target="_blank"><span>2</span><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870744174.png" /><span>ADIDAS</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007009" target="_blank"><span>3</span><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870750876.png" /><span>PUMA</span> </a></li>
</ul>
<ul class="content_brand">
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007010" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870569347.png" /> <span>CROCS</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007011" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870577082.png" /> <span>TOW&TOE</span> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006995" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870582155.png" /> <span>VANS</span> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006992" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870611257.png" /> <span>CONVERSE</span> </a></li>
<li><a href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006997" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870619323.png" /> <span>FILA</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007012" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870629511.png" /> <span>LACOSTE</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007013" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870636137.png" /> <span>DANNER</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000006996" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870649073.png" /> <span>MERRELL</span> </a></li>
<li><a href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000007018" target="_blank"><img alt="" src="https://image.a-rt.com/art/editor/202607/1782870655863.png" /> <span>DR.MARTENS</span> </a></li>
</ul>
</div>
<div aria-labelledby="tab5" class="art-content-inner cnt content _05" id="tabpanel5">
<p class="content_ttl01">블루ABC데이 혜택 05.</p>
<p class="content_ttl02"><span>실시간 인기 상품</span> 만나보기</p>
<p class="content_ttl03">한눈에 살펴보는 쇼핑 정보</p>
<ul class="content_list">
<li><a href="https://grandstage.a-rt.com/display/ranking/main?searchChnnlNo=10002&tabGbn=R&searchType=V&ctgrNo=1000000282&genderGbnCd=10001&rowsPerPage=40&ctgrNo1=1000000282" target="_blank"><span>여성 슈즈</span> </a></li>
<li><a href="https://grandstage.a-rt.com/display/ranking/main?searchChnnlNo=10002&tabGbn=R&searchType=V&ctgrNo=1000000304&genderGbnCd=10001&rowsPerPage=40&ctgrNo1=1000000304" target="_blank"><span>여성 어패럴</span> </a></li>
<li><a href="https://grandstage.a-rt.com/display/ranking/main?searchChnnlNo=10002&tabGbn=R&searchType=V&ctgrNo=1000000282&genderGbnCd=10000&rowsPerPage=40&ctgrNo1=1000000282" target="_blank"><span>남성 슈즈</span> </a></li>
<li><a href="https://grandstage.a-rt.com/display/ranking/main?searchChnnlNo=10002&tabGbn=R&searchType=V&ctgrNo=1000000304&genderGbnCd=10003&rowsPerPage=40&ctgrNo1=1000000304" target="_blank"><span>남성 어패럴</span> </a></li>
</ul>
</div>
<div aria-labelledby="tab6" class="art-content-inner cnt content _06" id="tabpanel6">
<p class="content_ttl01">블루ABC데이 혜택 06.</p>
<p class="content_ttl02">멤버십 회원 전용 이벤트</p>
<p class="content_ttl03">지금 응모하고 주인공이 되어보세요</p>
<ul class="content_list">
<li><a href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002273" target="_blank"><span> <span>ABC마트 상품권</span> <span>150명</span> </span> <span> <span>참여 방법<br />
<span>멤버십 회원 가입하기</span></span> </span> <span>응모하러 가기</span> </a></li>
<li><a href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002274" target="_blank"><span> <span>커피 교환권</span> <span>200명</span> </span> <span> <span>참여 방법<br />
<span>후기 등록 스탬프 받기</span></span> </span> <span>응모하러 가기</span> </a></li>
</ul>
</div>
<div class="art-content-inner banner_wrap"><a class="banner_link" href="https://abcmart.a-rt.com/promotion/planning-display/detail?plndpNo=2000006989" target="_blank"><span class="_logo"></span> <span class="_img"></span> <span class="_txt">ABC-MART 혜택 보러 가기</span> </a></div>
</div>
<!-- e : art-container-event --><!-- 락인 애니메이션 --><script>
(function () {
function ready(callback) {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', callback);
} else {
callback();
}
}
ready(function () {
let retryCount = 0;
const maxRetryCount = 50;
const retryDelay = 100;
function startWhenDomReady() {
const scenes = Array.from(document.querySelectorAll('.main .motion_wrap'));
if (!scenes.length) {
retryCount += 1;
if (retryCount <= maxRetryCount) {
setTimeout(startWhenDomReady, retryDelay);
}
return;
}
initMotion(scenes);
}
startWhenDomReady();
});
function initMotion(scenes) {
if (window.__mainMotionStarted) return;
window.__mainMotionStarted = true;
function num(value, fallback) {
const n = Number(value);
return Number.isFinite(n) ? n : fallback;
}
function sleep(ms) {
return new Promise(function (resolve) {
let elapsed = 0;
let prev = null;
let paused = false;
function onVisibilityChange() {
if (document.hidden) {
paused = true;
}
}
function tick(now) {
if (paused) {
prev = now;
paused = false;
}
if (prev !== null) {
elapsed += now - prev;
}
prev = now;
if (elapsed >= ms) {
document.removeEventListener('visibilitychange', onVisibilityChange);
resolve();
return;
}
requestAnimationFrame(tick);
}
document.addEventListener('visibilitychange', onVisibilityChange);
requestAnimationFrame(tick);
});
}
function getStartTransform(dir, distance) {
if (dir === 'bottom') return 'translateY(' + distance + '%)';
if (dir === 'left') return 'translateX(-' + distance + '%)';
if (dir === 'right') return 'translateX(' + distance + '%)';
return 'translateY(-' + distance + '%)';
}
function resetScene(scene) {
scene.style.opacity = '0';
scene.style.visibility = 'hidden';
scene.style.transform = 'translateX(-50%)';
scene.querySelectorAll('.motion').forEach(function (motion) {
const dir = motion.dataset.dir || 'top';
const distance = num(motion.dataset.distance, 100);
motion.style.opacity = '0';
motion.style.visibility = 'hidden';
motion.style.transform = getStartTransform(dir, distance);
});
}
function showScene(scene) {
scene.style.opacity = '1';
scene.style.visibility = 'visible';
scene.style.transform = 'translateX(-50%)';
}
function showMotion(motion, duration) {
const dir = motion.dataset.dir || 'top';
const distance = num(motion.dataset.distance, 100);
const from = getStartTransform(dir, distance);
motion.style.visibility = 'visible';
if (!motion.animate) {
motion.style.opacity = '1';
motion.style.transform = 'translate(0, 0)';
return;
}
const animation = motion.animate(
[
{
opacity: 0,
transform: from
},
{
opacity: 1,
transform: 'translate(0, 0)'
}
],
{
duration: duration,
easing: 'ease',
fill: 'forwards'
}
);
animation.finished.then(function () {
motion.style.opacity = '1';
motion.style.transform = 'translate(0, 0)';
animation.cancel();
}).catch(function () {});
}
async function fadeOut(scene, duration) {
if (!scene.animate) {
scene.style.opacity = '0';
scene.style.visibility = 'hidden';
return;
}
const animation = scene.animate(
[
{
opacity: 1
},
{
opacity: 0
}
],
{
duration: duration,
easing: 'ease',
fill: 'forwards'
}
);
await animation.finished.catch(function () {});
scene.style.opacity = '0';
scene.style.visibility = 'hidden';
animation.cancel();
}
async function playScene(scene) {
const sceneTime = num(scene.dataset.sceneTime, 4000);
const motionTime = num(scene.dataset.motionTime, 500);
const fadeTime = num(scene.dataset.fadeTime, 500);
const motions = Array.from(scene.querySelectorAll('.motion')).sort(function (a, b) {
return num(a.dataset.delay, 0) - num(b.dataset.delay, 0);
});
let currentTime = 0;
resetScene(scene);
showScene(scene);
for (const motion of motions) {
const delay = num(motion.dataset.delay, 0);
await sleep(Math.max(0, delay - currentTime));
showMotion(motion, motionTime);
currentTime = delay;
}
const lastMotionEnd = currentTime + motionTime;
await sleep(motionTime);
await sleep(Math.max(0, sceneTime - lastMotionEnd));
await fadeOut(scene, fadeTime);
resetScene(scene);
}
async function loop() {
scenes.forEach(resetScene);
while (true) {
for (const scene of scenes) {
await playScene(scene);
}
}
}
loop();
}
})();
</script><!-- GNB 스크립트 --><script>
$(document).ready(function () {
const topSpace = 257;
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 () {
const couponData = [
{
start: '2026/07/03 11:00',
end: '2026/07/09 23:59',
coupon: '3000001217'
},
{
start: '2026/07/10 11:00',
end: '2026/07/16 23:59',
coupon: '3000001222'
},
{
start: '2026/07/17 11:00',
end: '2026/07/23 23:59',
coupon: '3000001223'
},
{
start: '2026/07/24 11:00',
end: '2026/07/30 23:59',
coupon: '3000001224'
}
];
function parseDate(str, isEnd) {
const parts = str.split(' ');
const date = parts[0];
const time = parts[1] || '00:00';
const dateParts = date.split('/').map(Number);
const timeParts = time.split(':').map(Number);
const y = dateParts[0];
const m = dateParts[1];
const d = dateParts[2];
const h = timeParts[0] || 0;
const min = timeParts[1] || 0;
const sec = isEnd ? 59 : 0;
return new Date(y, m - 1, d, h, min, sec);
}
function escapeCouponNo(value) {
return String(value)
.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'");
}
function getCouponHref(couponNo) {
return "javascript:abc.couponDown('" + escapeCouponNo(couponNo) + "')";
}
function updateCouponButton() {
const now = new Date();
const section = document.querySelector('.content._01');
if (!section) return;
const couponBtn = section.querySelector('.content_coupon_dl_btn');
if (!couponBtn) return;
let activeCoupon = null;
for (let i = 0; i < couponData.length; i++) {
const item = couponData[i];
const start = parseDate(item.start, false);
const end = parseDate(item.end, true);
if (now >= start && now <= end) {
activeCoupon = item;
break;
}
}
if (activeCoupon && activeCoupon.coupon) {
couponBtn.setAttribute('href', getCouponHref(activeCoupon.coupon));
} else {
couponBtn.setAttribute('href', 'javascript:void(0);');
}
}
updateCouponButton();
setInterval(updateCouponButton, 1000);
})();
</script><!-- 모달 스크립트 --><script>
$(document).ready(function () {
const focusableSelector = [
'a[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])'
].join(',');
let activeModal = null;
let activeOpenBtn = null;
function openModal(openBtn, modal) {
const mainHeight = $('.art-container-event').outerHeight();
activeModal = modal;
activeOpenBtn = openBtn;
$('body').css({
height: mainHeight
}).addClass('md-open');
modal.siblings().attr({
'aria-hidden': true,
inert: ''
});
$('#dim').remove();
modal.before('<div id="dim"></div>');
const dim = $('#dim');
dim.stop().fadeIn();
modal.css('visibility', 'visible');
const focusableItems = modal.find(focusableSelector).filter(':visible');
const firstFocus = focusableItems.first();
const lastFocus = focusableItems.last();
if (firstFocus.length) {
firstFocus.focus();
}
modal.off('keydown.modalFocus').on('keydown.modalFocus', function (e) {
if (e.key !== 'Tab' && e.keyCode !== 9) return;
if (!focusableItems.length) return;
if (e.shiftKey && document.activeElement === firstFocus[0]) {
e.preventDefault();
lastFocus.focus();
}
if (!e.shiftKey && document.activeElement === lastFocus[0]) {
e.preventDefault();
firstFocus.focus();
}
});
dim.off('click.modalDim').on('click.modalDim', function () {
closeModal();
});
$(window).off('keydown.modalEsc').on('keydown.modalEsc', function (e) {
if (e.key === 'Escape' || e.keyCode === 27) {
closeModal();
}
});
}
function closeModal() {
if (!activeModal || !activeModal.length) return;
const iframe = activeModal.find('iframe');
if (iframe.length) {
iframe.attr('src', iframe.attr('src'));
}
$('body').css({
height: ''
}).removeClass('md-open');
$('#dim').stop().fadeOut(function () {
$(this).remove();
});
activeModal
.css('visibility', 'hidden')
.siblings()
.removeAttr('aria-hidden inert');
activeModal.off('keydown.modalFocus');
$(window).off('keydown.modalEsc');
if (
activeOpenBtn &&
activeOpenBtn.length &&
$.contains(document, activeOpenBtn[0])
) {
activeOpenBtn.focus();
}
activeModal = null;
activeOpenBtn = null;
}
$('.btn-md').off('click.modalOpen').on('click.modalOpen', function (e) {
e.preventDefault();
const openBtn = $(this);
const target = openBtn.attr('data-href');
const modal = $(target);
if (!modal.length) return;
openModal(openBtn, modal);
});
$('.md-cnt .btn-close').off('click.modalClose').on('click.modalClose', function () {
closeModal();
});
});
</script><!-- 위클리 혜택 타이머 --><script>
(function () {
function parseDate(str, isEnd) {
const parts = str.split(' ');
const date = parts[0];
const time = parts[1] || '00:00';
const dateParts = date.split('/').map(Number);
const timeParts = time.split(':').map(Number);
const y = dateParts[0];
const m = dateParts[1];
const d = dateParts[2];
const h = timeParts[0] || 0;
const min = timeParts[1] || 0;
const sec = isEnd ? 59 : 0;
return new Date(y, m - 1, d, h, min, sec);
}
function escapeCouponNo(value) {
return String(value)
.replace(/\\/g, '\\\\')
.replace(/'/g, "\\'");
}
function getCouponHref(couponNo) {
return "javascript:abc.couponDown('" + escapeCouponNo(couponNo) + "')";
}
function update() {
const now = new Date();
const section = document.querySelector('.content._02');
if (!section) return;
const items = section.querySelectorAll('.content_event_info_wrap li');
const couponBtn = section.querySelector('.content_coupon_dl_btn');
let activeItem = null;
items.forEach(function (el) {
const startStr = el.dataset.start;
const endStr = el.dataset.end;
if (!startStr || !endStr) return;
const start = parseDate(startStr, false);
const end = parseDate(endStr, true);
if (now >= start && now <= end) {
activeItem = el;
}
});
items.forEach(function (el) {
el.classList.toggle('on', el === activeItem);
});
if (!couponBtn) return;
if (activeItem && activeItem.dataset.coupon) {
couponBtn.setAttribute('href', getCouponHref(activeItem.dataset.coupon));
} else {
couponBtn.setAttribute('href', 'javascript:void(0);');
}
}
update();
setInterval(update, 1000);
})();
</script><!-- content_ranking --><script>
(function () {
function ready(callback) {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', callback);
} else {
callback();
}
}
ready(function () {
let retryCount = 0;
const maxRetryCount = 50;
const retryDelay = 100;
function startWhenDomReady() {
const section = document.querySelector('.content._04');
if (!section) {
retryCount += 1;
if (retryCount <= maxRetryCount) {
setTimeout(startWhenDomReady, retryDelay);
}
return;
}
initRanking(section);
}
startWhenDomReady();
});
function initRanking(section) {
if (section.dataset.rankingStarted === 'true') return;
section.dataset.rankingStarted = 'true';
const rankingWrap = section.querySelector('.content_ranking');
if (!rankingWrap) return;
const rankingItems = Array.from(rankingWrap.querySelectorAll('li'));
if (!rankingItems.length) return;
let currentIndex = 0;
let rankingTimer = null;
let isInView = false;
const delay = 1500;
function setActiveRanking(index) {
rankingItems.forEach(function (item, i) {
item.classList.toggle('on', i === index);
});
}
function startRanking() {
if (rankingTimer) return;
setActiveRanking(currentIndex);
rankingTimer = setInterval(function () {
currentIndex += 1;
if (currentIndex >= rankingItems.length) {
currentIndex = 0;
}
setActiveRanking(currentIndex);
}, delay);
}
function stopRanking() {
if (!rankingTimer) return;
clearInterval(rankingTimer);
rankingTimer = null;
}
setActiveRanking(currentIndex);
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
stopRanking();
return;
}
if (isInView) {
startRanking();
}
});
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
isInView = entry.isIntersecting;
if (isInView) {
startRanking();
} else {
stopRanking();
}
});
}, {
threshold: 0.3
});
observer.observe(section);
} else {
isInView = true;
startRanking();
}
}
})();
</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 : 이벤트 복사영역 여기까지 -->
[블루 특가] 샌들
[블루 특가] 메리제인
[블루 특가] 스니커즈
[블루 특가] 스포츠 슈즈
[블루 특가] 어패럴
[블루 특가] 용품
-
최대 혜택가 원 [0%] 자세히
-
프로모션
0 원
-
일반쿠폰
0 원
-
플러스쿠폰
0 원
-
멤버십 상시 할인
0 원
- 모든 혜택이 적용된 금액으로, 실제 결제 금액과는 차이가 있을 수 있습니다.
-
| 스타일컬러 |
|
|
|---|---|---|
| 임직원가 | 0원 | |
| 출시예정일 | 일 시간 분 초 남았습니다. | |
| 예약주문기간 | ||
| 발송예정일 | (예정) | |
| 최대 적립 |
0P
최종 적립 포인트는 할인 쿠폰 및 쿠폰 적용, 프로모션 등을 반영하여 산정됩니다.
후기 포인트의 경우 동영상 후기 작성 시, 최대 1,500p 지급됩니다. (텍스트 500p, 포토 1,000p)
회원 가입 시 즉시 적립
APP 설치 시 1만원 할인쿠폰 지급 |
|
| 결제할인 | ||
| 카드혜택 | 무이자 할부 | |
| 배송방법 |
|
|
| 배송방법 |
|
|
| 사이즈 |
|
|
| 추가 옵션 | ||
| 사은품 | 선착순 증정 *조기 소진 시 지급이 제한됩니다. |
|
| 관련용품 추가구매 |
관련용품
|
|
| DRAW 예정일 | 일 시간 분 초 남았습니다. | |
| DRAW 종료일 | 일 시간 분 초 남았습니다. | |
| DRAW 종료일 | ||
| 응모기간 | ~ | |
| 당첨자 발표 | ||
| 당첨자 구입일 | ~ | |
| 매장전용 상품안내 | 매장전용 상품은 매장에서만 구매 가능하며, 가격 및 사이즈, 재고 정보는 매장마다 상이할 수 있습니다. |
아트배송 쿠폰 다운
| 당일배송 |
|
|---|---|
| 새벽배송 |
|
총 결제금액
0 원
상품이 되면 입력하신 연락처로 알림톡 또는 SMS가 발송됩니다.
- 알림(런칭 상품과 재입고 상품 포함) 서비스는 신청 후 30일간 유효합니다.
(30일 이후에는 시에도 알림이 되지 않습니다.) - 신청 상품의 옵션 및 가격 등의 상품정보가 변동될 수 있으니 시 상품정보 확인 후 구매하시기 바랍니다.
- 소량 될 경우 재고가 소진 될 수 있으니 빠른 시일 내에 구매 하시기 바랍니다.
- 신청한 상품은 마이페이지 > 쇼핑수첩 > 찜한 상품/알림상품 내역 에서 확인 가능합니다.
- 개인정보의 SMS수신동의 여부와 관계없이 알림 메시지가 발송됩니다.
내가 원하는 시간 때 상품을 받는다!
아트배송-
아트배송 배송 시간/비용 안내
월~금 00시 부터 오전 11시까지 주문 시 당일 도착
- 월~목 오전 11시 이후 주문 시 익일 도착
- 금요일 오전 11시 이후 ~ 주말 주문 시 월요일 도착
- 배송비 : 3,000원
-
아트배송 배송 가능 지역 안내
서울, 경기, 인천 지역
- 일부 지역은 배송이 불가할 수 있으며,
정확한 서비스 가능 여부는 배송지 등록을 통해 확인이 가능합니다.
- 일부 지역은 배송이 불가할 수 있으며,
-
아트배송 교환/반품 안내
받으신 상품은 온라인/오프라인 매장 구분 없이 교환/반품/AS접수가 가능합니다.
아트배송 서비스 유의사항
- 아트배송은 통합 멤버십 회원 전용 서비스 입니다.
- 아트배송이 가능한 주문 수량이 마감되는 경우 또는 기상 상태에 따라 발송이 지연되거나 배송이 불가할 수 있습니다.
- 당사 사정에 따라 아트배송 서비스가 불가한 날이 있을 수 있으며, 사전에 공지드립니다.
- 아트배송은 1회 주문 시 한 개의 상품만 주문이 가능하며, 두 개 이상의 상품을 구매하실 경우 한 상품씩 개별로 주문하여 주시기 바랍니다.
- 배송 가능한 상품의 재고가 변경될 수 있습니다.
- 아트배송 주문 시 무통장 입금 또는 편의점 결제는 주문이 불가합니다.
- 아트배송 주문 시 일반 무료배송 쿠폰은 적용이 불가합니다.
- 아트배송 주문완료 후에는 상품 옵션 및 배송지 정보 변경이 불가합니다.
- 상품을 보관하기 어려운 배송지의 경우 자동 반송 처리될 수 있으며, 반송 시 배송비는 고객 부담으로 처리됩니다.
(기숙사, 상가 등 출입 제한 또는 분실 우려가 있는 경우 배송 불가) - 선물하기 주문 시에는 아트배송이 불가합니다.
- 배송 완료 후 교환/반품은 일반배송과 동일한 방식으로 진행됩니다.
| 매장 검색 |
|
|
|---|
매장에서 실시간 판매되고 있으므로 노출되는 정보와 차이가 있을 수 있습니다.
총 0개의 매장이 있습니다.
| 매장명 | 재고보유여부 | 매장명 | 재고보유여부 | 매장명 | 재고보유여부 |
|---|---|---|---|---|---|
| 조회된 결과가 없습니다. | |||||
| 배송방법 |
|
|---|
|
|
|
| 데이터가 없습니다. |
10개의 쿠폰 중 6개의 쿠폰이 다운로드 되었습니다.
4개의 쿠폰은 ID당 발급 횟수 초과로 인해 다운로드 되지 않았습니다.
받은 쿠폰
[ABC 신년맞이 반스 18% 주말쿠폰]
