<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); body { min-width: 1440px; margin: 0; padding: 0; } body * { box-sizing: border-box; } .wrap .special-sub-wrap .sub-top .editor-wrap { min-width: 1440px !important; } .art-container-event { color: #ffffff; font-family: Pretendard, sans-serif !important; position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; overflow: hidden; } .art-content-inner img { display: block; width: 100%; } .art-content-inner p, .art-content-inner ul { margin: 0; padding: 0; } .art-content-inner a { text-decoration: none !important; } .art-content-inner a:focus { outline: none; -webkit-tap-highlight-color: transparent; } /* hover */ @keyframes hover { 0% { transform: translateY(0); } 25% { transform: translateY(-5px); } 75% { transform: translateY(5px); } 100% { transform: translateY(0); } } .hover { display: block; } .hover:hover { animation: hover 1s linear infinite; } /* mv */ .mv_wrap { position: relative; } .mv { position: relative; width: 100%; overflow: hidden; } .main_img { position: absolute; top: clamp(1px, 6.35vw, 122px); left: 50%; transform: translateX(-50%); max-width: clamp(278px, 19.32vw, 371px); animation: floating 1.2s ease-in-out infinite alternate; will-change: transform; } @keyframes floating { from { transform: translateX(-50%) translateY(-5%); } to { transform: translateX(-50%) translateY(0px); } } .mv_txt { position: absolute; display: flex; flex-direction: column; align-items: center; width: 100%; bottom: clamp(48px, 3.33vw, 64px); left: 50%; transform: translateX(-50%); } .mv_txt p { color: #ffffff; } .mv_txt p:nth-of-type(1) { font-size: clamp(22px, 1.51vw, 29px); font-weight: 500; line-height: 100%; letter-spacing: -0.8px; } .mv_txt p:nth-of-type(2) { margin: clamp(11px, 0.73vw, 14px) auto 0 !important; font-size: clamp(37px, 2.6vw, 50px); font-weight: 700; line-height: 100%; letter-spacing: -1.12px; } .mv_txt p:nth-of-type(3) { display: flex; justify-content: center; align-items: center; margin: clamp(17px, 1.15vw, 22px) auto 0 !important; padding: clamp(7px, 0.47vw, 9px) clamp(12px, 0.83vw, 16px); font-size: clamp(14px, 0.94vw, 18px); font-weight: 600; line-height: 100%; letter-spacing: -0.64px; border-radius: clamp(4px, 0.26vw, 5px); background: linear-gradient(90deg, #E60012 0%, #FF692E 100%); } /* content common */ .content { padding: 64px 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .content_ttl_wrap { display: flex; flex-direction: column; } /* content _copy */ .content._copy { background-color: #E60012; } .content._copy .content_ttl_wrap { gap: 24px; } .content._copy .content_ttl_wrap p:nth-of-type(1) { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.12px; } .content._copy .content_ttl_wrap p:nth-of-type(2) { font-size: 16px; font-weight: 500; line-height: 160%; letter-spacing: -0.64px; } .content._copy .event_timer_wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; max-width: 670px; margin: 32px auto 0 !important; padding: 41px 0; background-color: rgba(201, 0, 16, 0.7); border-radius: 14px; } .content._copy .event_timer_date { display: flex; gap: 40px; } .content._copy .event_timer_date p { font-size: 16px; font-weight: 300; line-height: 100%; letter-spacing: -0.64px; color: #FF9AA2; } .content._copy .event_timer_date p._on { font-weight: 500; color: #ffffff; text-decoration: underline; text-underline-offset: 4px; } .content._copy .event_timer_progress { --timer-fill: 0%; --bubble-width: 54px; display: flex; flex-direction: column; align-items: stretch; width: fit-content; max-width: 100%; margin: 27px auto 0 !important; } .content._copy .event_timer_item { position: relative; display: flex; gap: 42px; margin: 0 !important; padding: 12.5px 47.5px; background-color: #454545; border-radius: 100px; overflow: hidden; } .content._copy .event_timer_item::before { content: ""; position: absolute; top: 0; left: 0; width: var(--timer-fill); height: 100%; background: linear-gradient(90deg, #548CEE 0%, #33AFE6 100%); border-radius: 100px; z-index: 0; } .content._copy .event_timer_item p { position: relative; z-index: 1; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; } .content._copy .event_timer_bubble { display: none; justify-content: center; align-items: flex-end; width: var(--bubble-width); height: 30px; margin-top: 9px; margin-left: clamp( 0px, calc(var(--timer-fill) - (var(--bubble-width) / 2)), calc(100% - var(--bubble-width)) ); padding-bottom: 5px; font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: -0.4px; color: #ffffff; background-image: url(https://image.a-rt.com/art/editor/202606/1782376205804.png); background-repeat: no-repeat; background-size: cover; background-position: center; pointer-events: none; box-sizing: border-box; } .content._copy .event_timer_progress._active .event_timer_bubble { display: flex; } /* content _countdown */ .content._countdown { display: flex; flex-direction: column; gap: 16px; background-color: #ffffff; } .content._countdown .content_ttl_wrap p { font-size: 20px; font-weight: 600; line-height: 100%; letter-spacing: -0.8px; color: #000000; } .countdown_box { margin: 0 auto !important; } .countdown { display: flex; justify-content: center; align-items: flex-start; margin: 0 auto !important; gap: 28px; } .countdown .time-box { display: flex; flex-direction: column; align-items: center; width: 78px; } .countdown .num { font-size: 60px; font-weight: 700; line-height: 100%; letter-spacing: -1.8px; color: #000000; } .countdown .label { margin-top: 7px !important; font-size: 21px; font-weight: 300; line-height: 100%; letter-spacing: -0.42px; color: #898989; } .countdown .colon { font-size: 60px; font-weight: 100; line-height: 85%; letter-spacing: -1.8px; color: #383838; } /* content _benefit */ .content._benefit { background-color: #181818; } .content._benefit .content_ttl_wrap { gap: 18px; } .content._benefit .content_ttl_wrap p:nth-of-type(1) { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.12px; } .content._benefit .content_ttl_wrap p:nth-of-type(2) { font-size: 16px; font-weight: 500; line-height: 160%; letter-spacing: -0.64px; color: rgba(255, 255, 255, 0.8); } .content._benefit .lineup { display: flex; justify-content: center; gap: 10px; margin: 43px auto 0 !important; } .content._benefit .lineup li { position: relative; width: 160px; padding: 32px 0 126px; border-radius: 4px; background-color: #424242; background-repeat: no-repeat; background-size: cover; background-position: center; list-style: none; user-select: none; animation: lineupMove 3.6s ease-in-out infinite; will-change: transform; } .content._benefit .lineup li:nth-of-type(1) { background-image: url(https://image.a-rt.com/art/editor/202606/1782375914512.png); animation-delay: 0s; } .content._benefit .lineup li:nth-of-type(2) { background-image: url(https://image.a-rt.com/art/editor/202606/1782375923968.png); animation-delay: 1.2s; } .content._benefit .lineup li:nth-of-type(3) { background-image: url(https://image.a-rt.com/art/editor/202606/1782375929757.png); animation-delay: 2.4s; } @keyframes lineupMove { 0% { transform: translateY(0); } 16.666% { transform: translateY(-5%); } 33.333% { transform: translateY(0); } 100% { transform: translateY(0); } } .content._benefit .lineup li p:nth-of-type(1) { position: absolute; display: flex; justify-content: center; align-items: center; width: 62px; height: 24px; top: -11px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 600; line-height: 118%; letter-spacing: -0.81px; color: #ffffff; border-radius: 80px; background: linear-gradient(90deg, #548CEE 0%, #33AFE6 100%); } .content._benefit .lineup li p:nth-of-type(2) { font-size: 16px; font-weight: 500; line-height: 143%; letter-spacing: -0.81px; color: #ffffff; } .content._benefit .lineup li p:nth-of-type(2) span { font-weight: 700; } /* content _coupon */ .content._coupon { background-color: #33A1E6; } .content._coupon .content_ttl_wrap { gap: 18px; } .content._coupon .content_ttl_wrap p:nth-of-type(1) { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.12px; color: #ffffff; } .content._coupon .content_ttl_wrap p:nth-of-type(1) span { color: #FF2E3F; } .content._coupon .content_ttl_wrap p:nth-of-type(2) { font-size: 16px; font-weight: 500; line-height: 160%; letter-spacing: -0.64px; color: #ffffff; } .content._coupon .pop_txt { display: flex; justify-content: center; align-items: center; width: 204px; height: 42px; margin: 32px auto 0 !important; font-size: 20px; font-weight: 600; line-height: 100%; letter-spacing: -0.75px; color: #313131; background-image: url(https://image.a-rt.com/art/editor/202606/1782376106885.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .content._coupon .coupon_wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 513px; margin: 24px auto 0 !important; } .content._coupon .coupon_wrap li { display: flex; flex-direction: column; align-items: center; width: 167px; height: 197px; background-repeat: no-repeat; background-size: cover; background-position: center; user-select: none; } .content._coupon .coupon_wrap li:nth-of-type(1) { background-image: url(https://image.a-rt.com/art/editor/202606/1782437673182.png); } .content._coupon .coupon_wrap li:nth-of-type(2), .content._coupon .coupon_wrap li:nth-of-type(4) { background-image: url(https://image.a-rt.com/art/editor/202606/1782437700922.png); } .content._coupon .coupon_wrap li:nth-of-type(3), .content._coupon .coupon_wrap li:nth-of-type(5) { background-image: url(https://image.a-rt.com/art/editor/202606/1782437709390.png); } .content._coupon .coupon_wrap li:last-of-type { justify-content: center; background-image: url(https://image.a-rt.com/art/editor/202606/1782376098228.png); } .content._coupon .coupon_wrap li:not(:last-of-type) { padding: 30px 0 21px; } .content._coupon .coupon_wrap li:not(:last-of-type) p:nth-of-type(1) { font-size: 19px; font-weight: 600; line-height: 100%; letter-spacing: -0.83px; color: #000000; } .content._coupon .coupon_wrap li:not(:last-of-type) p:nth-of-type(2) { margin-top: 21px !important; font-size: 36px; font-weight: 700; line-height: 100%; color: #000000; } .content._coupon .coupon_wrap li:not(:last-of-type) p:nth-of-type(2) span { margin-right: 3px !important; font-size: 60px; font-weight: 700; line-height: 80%; letter-spacing: -3px; color: #000000; } .content._coupon .coupon_wrap li:not(:last-of-type) p:nth-of-type(3) { margin-top: 45px !important; font-size: 13px; font-weight: 500; line-height: 100%; letter-spacing: -0.53px; color: rgba(14, 97, 150, 0.5); } .content._coupon .coupon_wrap li:last-of-type p { font-size: 20px; font-weight: 600; line-height: 135%; letter-spacing: -0.53px; color: #000000; } .content._coupon .coupon_wrap li:last-of-type p span { color: #007AE4; } .coupon_period_wrap { display: flex; justify-content: center; gap: 6px; margin: 32px auto 0 !important; } .coupon_period_wrap p { display: flex; gap: 6px; font-size: 16px; font-weight: 400; line-height: 100%; letter-spacing: -0.64px; color: #E2F4FF; } .content_coupon_dl_btn { display: flex; justify-content: center; align-items: center; gap: 5px; width: 416px; height: 64px; margin: 48px auto 0 !important; background-color: #000000; color: #ffffff; } .content_coupon_dl_btn_txt { font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; } .content_coupon_dl_btn_ico { max-width: 19.2px; } .content_caution { display: flex; justify-content: center; align-items: center; width: 416px; height: 64px; margin: 20px auto 0 !important; } .content_caution_btn { display: flex; justify-content: center; align-items: center; gap: 5px; } .content_caution_btn_img { width: 16px; height: 16px; background-image: url(https://image.a-rt.com/art/editor/202606/1782376064896.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .content_caution_btn_txt { font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; } /* content _game */ .content._game { background-image: url(https://image.a-rt.com/art/editor/202606/1782376135514.jpg); } .content._game .content_ttl_wrap { gap: 18px; } .content._game .content_ttl_wrap p:nth-of-type(1) { font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #000000; } .content._game .content_ttl_wrap p:nth-of-type(2) { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.12px; color: #000000; } .content._game .game_wrap { position: relative; display: flex; justify-content: center; gap: 20px; margin: 32px auto 0 !important; } .content._game .game_wrap::after { content: ''; position: absolute; width: 148px; height: 118.5px; top: 128px; background-image: url(https://image.a-rt.com/art/editor/202606/1782376168755.png); background-repeat: no-repeat; background-size: cover; background-position: center; pointer-events: none; } .content._game .game_wrap li { display: flex; justify-content: center; align-items: flex-end; width: 332px; height: 432px; background-repeat: no-repeat; background-size: cover; background-position: center; cursor: pointer; transition: all 0.1s; } .content._game .game_wrap li:nth-of-type(1) { background-image: url(https://image.a-rt.com/art/editor/202606/1782450360273.png); } .content._game .game_wrap li:nth-of-type(1):hover{ background-image: url(https://image.a-rt.com/art/editor/202606/1782450368110.png); transition: all 0.1s; } .content._game .game_wrap li:nth-of-type(2) { width: 322px; background-image: url(https://image.a-rt.com/art/editor/202606/1782450374567.png); } .content._game .game_wrap li:nth-of-type(2):hover { background-image: url(https://image.a-rt.com/art/editor/202606/1782450384756.png); transition: all 0.1s; } .content._game .game_wrap li span { margin-bottom: 17px !important; font-size: 16px; font-weight: 300; line-height: 160%; letter-spacing: -0.64px; color: #ffffff; } .content._game .md-cnt.notice { width: 504px !important; padding: 64px 40px 38px !important; border-radius: 20px; } .content._game .md-cnt .btn-close { width: 18px !important; height: 18px !important; top: 27px !important; right: 27px !important; background: unset !important; background-image: url(https://image.a-rt.com/art/editor/202606/1782376158762.png) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; } .content._game .md-cnt.notice .content_game_md_ttl { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1px; color: #000000; } .content._game .md-cnt.notice .content_game_md_ttl span { color: #346ADB; } .content._game .md-cnt.notice .content_game_md_txt { margin: 14px auto 0 !important; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: -1px; color: #545454; } .content._game .md-cnt.notice .content_game_md_txt span { font-weight: 500; color: #3465DA; } .content._game .md-cnt.notice .content_game_md_count_down { width: 418px; margin: 24px auto 0 !important; padding: 28px 0 !important; background-color: #ECF7FF; border-radius: 20px; } .content._game .md-cnt.notice .content_game_md_count_down_ttl { font-size: 24px; font-weight: 600; line-height: 100%; letter-spacing: -1px; color: #000000; } .content._game .md-cnt.notice .countdown_box { margin: 19px auto 0 !important; } .content._game .md-cnt.notice .countdown { gap: 13px; } .content._game .md-cnt.notice .countdown .time-box { width: 62px; } .content._game .countdown .num { font-size: 48px; letter-spacing: -1.44px; } .content._game .countdown .label { margin-top: 5px !important; font-size: 14px; letter-spacing: -0.28px; } .content._game .countdown .colon { font-size: 48px; letter-spacing: -1.44px; } .content._game .content_game_md_link_btn { display: flex; justify-content: center; align-items: center; width: 416px; height: 64px; margin: 24px auto 0 !important; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; border-radius: 12px; background: linear-gradient(90deg, #33A1E6 0%, #3455D7 100%); } /* content _event */ .content._event { background-image: url(https://image.a-rt.com/art/editor/202606/1782376114373.jpg); } .content._event .content_ttl_wrap { gap: 18px; } .content._event .content_ttl_wrap p:nth-of-type(1) { font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; } .content._event .content_ttl_wrap p:nth-of-type(2) { font-size: 32px; font-weight: 700; line-height: 100%; letter-spacing: -1.12px; color: #ffffff; } .content._event .content_event_img { max-width: 416px; margin: 32px auto 0 !important; } .content._event .content_event_prize_wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 416px; margin: 30px auto 0 !important; padding: 28px 0 !important; border-radius: 6px; background-color: #C80010; } .content._event .content_event_prize_ttl { font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -1px; color: #ffffff; } .content._event .content_event_prize_box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .content._event .content_event_prize_box p { display: flex; justify-content: center; align-items: center; gap: 8px; } .content._event .content_event_prize_box p span:nth-of-type(1) { font-size: 16px; font-weight: 700; line-height: 100%; color: #FF939C; } .content._event .content_event_prize_box p span:nth-of-type(2) { font-size: 16px; font-weight: 300; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; } .content._event .content_event_link_btn { display: flex; justify-content: center; align-items: center; width: 416px; height: 64px; margin: 30px auto 0 !important; font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: -0.64px; color: #ffffff; background-color: #000000; } /* banner_wrap */ .banner_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 64px 0 !important; font-size: 25px; font-weight: 700; line-height: 138%; letter-spacing: -0.64px; color: #ffffff; background-color: #191919; } .banner_wrap > span { font-size: 27px; } .banner_wrap > span span { color: #E60407; } /* 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; color: #000000; 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: -12px; padding-left: 12px; } .md-cnt.notice .md-txt li .spot { color: #ee1c25; font-weight: 600; } .md-cnt.notice .btn-close { position: absolute; top: 30px; right: 30px; background: url('https://image.a-rt.com/art/editor/202511/1762162521400.png') no-repeat center/contain; width: 27px; height: 27px; text-indent: 100%; padding: 0; border: 0; 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"> <div class="mv_wrap"> <div class="mv"><img alt="" src="https://image.a-rt.com/art/editor/202606/1782449514279.jpg" /></div> <div class="main_img"><img alt="블루 PASS" src="https://image.a-rt.com/art/editor/202606/1782376191769.png" /></div> <div class="mv_txt"> <p>상반기 최대 규모 세일</p> <p>블루 PASS 사전 혜택</p> <p>06. 29 - 07. 02 매일 오전 10시</p> </div> </div> <div class="content _copy"> <div class="content_ttl_wrap"> <p>블루 PASS 사전 혜택</p> <p>매일매일 받을 수 있는 쿠폰부터<br /> 이벤트 참여혜택까지</p> </div> <div class="event_timer_wrap"> <div class="event_timer_date"> <p data-end="2026-06-30 00:00" data-start="2026-06-29 10:00">6월 29일</p> <p data-end="2026-07-01 00:00" data-start="2026-06-30 10:00">6월 30일</p> <p data-end="2026-07-02 00:00" data-start="2026-07-01 10:00">7월 1일</p> <p data-end="2026-07-03 00:00" data-start="2026-07-02 10:00">7월 2일</p> </div> <div class="event_timer_progress"> <div class="event_timer_item"> <p>오픈런 5종 쿠폰팩</p> <p>블루ABC데이 굿즈</p> <p>텐퍼센트 커피교환권</p> </div> <div class="event_timer_bubble">진행중</div> </div> </div> </div> <div class="content _countdown"> <div class="content_ttl_wrap"> <p>블루ABC데이 시작까지</p> </div> <div class="countdown_box"> <div class="countdown" id="countdown"> <div class="time-box"><span class="num" id="days">00</span> <span class="label">days</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="hours">00</span> <span class="label">hours</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="minutes">00</span> <span class="label">minutes</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="seconds">00</span> <span class="label">seconds</span></div> </div> </div> </div> <div class="content _benefit"> <div class="content_ttl_wrap"> <p>블루 PASS 사전 혜택 라인업</p> <p>압도적 혜택 지금 살펴보기</p> </div> <ul class="lineup"> <li> <p>혜택 1</p> <p>블루 PASS<br /> <span>사전 쿠폰</span></p> </li> <li> <p>혜택 2</p> <p>썸머<br /> <span>밸런스 게임</span></p> </li> <li> <p>혜택 3</p> <p>기대평<br /> <span>댓글 이벤트</span></p> </li> </ul> </div> <div class="content _coupon"> <div class="content_ttl_wrap"> <p><span>블루 PASS</span> 사전 쿠폰</p> <p>혜택 위에 혜택, 오픈런 쿠폰 오픈 후 7일간 사용 가능</p> </div> <p class="pop_txt">매일 700명 선착순</p> <ul class="coupon_wrap"> <li class="hover"> <p>스니커즈</p> <p><span>9</span>%</p> <p>BLUE PASS COUPON</p> </li> <li class="hover"> <p>스포츠 슈즈</p> <p><span>7</span>%</p> <p>BLUE PASS COUPON</p> </li> <li class="hover"> <p>썸머 슈즈</p> <p><span>9</span>%</p> <p>BLUE PASS COUPON</p> </li> <li class="hover"> <p>캐주얼 슈즈</p> <p><span>13</span>%</p> <p>BLUE PASS COUPON</p> </li> <li class="hover"> <p>의류</p> <p><span>11</span>%</p> <p>BLUE PASS COUPON</p> </li> <li class="hover"> <p>매일 오전 10시<br /> <span>선착순</span><br /> 사전 쿠폰</p> </li> </ul> <div class="coupon_period_wrap"> <p>쿠폰 사용 기간</p> <p><span>07. 03</span><span>-</span><span>07. 09</span><span>단 7일간</span></p> </div> <a class="content_coupon_dl_btn hover" href="javascript:abc.couponDown('3000001226','3000001227','3000001228','3000001229','3000001230')"><span class="content_coupon_dl_btn_txt">쿠폰 다운로드</span> <span class="content_coupon_dl_btn_ico"> <img alt="" src="https://image.a-rt.com/art/editor/202512/1764898740612.png" /> </span> </a> <div class="content_caution"><a class="btn-md content_caution_btn" data-href="#modal1" href="javascript:void(0);"><span class="content_caution_btn_img"></span> <span class="content_caution_btn_txt">유의사항</span> </a></div> <!-- 모달창 --> <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>쿠폰 다운로드 기간<br /> 2026/06/29 10:00 - 2026/07/02 23:59 기간 내 다운로드 가능</li> <li>쿠폰 사용 기간<br /> 2026/07/03 10:00 - 2026/07/09 23:59 블루ABC데이 오픈 7일 이내 사용 가능</li> <li>1일 선착순 700명 한정 발급되며, 지정된 기간 내 미사용 시 자동 소멸됩니다.</li> <li>쿠폰은 통합멤버십 회원 대상이며, 각 쿠폰은 ID당 1회 다운로드 가능합니다.</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 class="content _game"> <div class="content_ttl_wrap"> <p>둘 중 하나를 눌러 투표해 주세요!</p> <p>썸머 슈즈 밸런스 게임</p> </div> <ul class="game_wrap"> <li class="btn-md" data-href="#modal2"><span>발끝까지 완벽한<br /> 스니커즈파</span></li> <li class="btn-md" data-href="#modal2"><span>여름만큼은 시원하게<br /> 샌들파</span></li> </ul> <!-- 모달창 --> <div aria-labelledby="mdTit1" aria-modal="true" class="md-cnt notice" id="modal2" role="dialog"> <p class="content_game_md_ttl">취향 선택 <span>완료!</span> 혜택 준비도 <span>완료!</span></p> <p class="content_game_md_txt"><span>APP PUSH ON</span> 하고 오픈 소식 가장 먼저 받기</p> <div class="content_game_md_count_down"> <div class="content_game_md_count_down_ttl"> <p>블루ABC데이 시작까지</p> </div> <div class="countdown_box"> <div class="countdown" id="countdown_02"> <div class="time-box"><span class="num" id="days_02">00</span> <span class="label">days</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="hours_02">00</span> <span class="label">hours</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="minutes_02">00</span> <span class="label">minutes</span></div> <span class="colon">:</span> <div class="time-box"><span class="num" id="seconds_02">00</span> <span class="label">seconds</span></div> </div> </div> </div> <a class="content_game_md_link_btn hover" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002220" target="_blank">알림 설정 방법 보기</a><button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <div class="content _event"> <div class="content_ttl_wrap"> <p>설레는 마음을 댓글로 남겨주세요!</p> <p>블루ABC데이 응원 이벤트</p> </div> <div class="content_event_img"><img alt="" src="https://image.a-rt.com/art/editor/202606/1782376125859.png" /></div> <div class="content_event_prize_wrap"> <p class="content_event_prize_ttl">이벤트 경품</p> <div class="content_event_prize_box"> <p><span>01</span><span>블루ABC데이 굿즈 가방 (50명)</span></p> <p><span>02</span><span>텐퍼센트 커피 교환권 5천원 (30명)</span></p> </div> </div> <a class="content_event_link_btn hover" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002278" target="_blank">이벤트 참여하기</a></div> <p class="banner_wrap">7월 3일 오전 11시<br /> <span><span>ABC마트</span>에서 만나보세요</span></p> </div> </div> <!-- e : art-container-event --><!-- event_item_wrap --><script> (function () { const ONE_HOUR = 1000 * 60 * 60; const TIMER_SELECTOR = '.content._copy .event_timer_wrap'; const RETRY_DELAY = 300; const MAX_RETRY_COUNT = 60; function parseDateTime(dateString) { if (!dateString) return null; const parts = dateString.trim().split(/[- :]/).map(Number); if (parts.length < 5) return null; const year = parts[0]; const month = parts[1] - 1; const day = parts[2]; const hour = parts[3]; const minute = parts[4]; const parsedDate = new Date(year, month, day, hour, minute, 0); if (isNaN(parsedDate.getTime())) return null; return parsedDate; } function getProgressPercentByHour(nowDate, startDate, endDate) { const startPercent = 10; const endPercent = 100; if (nowDate <= startDate) return startPercent; if (nowDate >= endDate) return endPercent; const totalHours = Math.max(1, Math.ceil((endDate - startDate) / ONE_HOUR)); const elapsedHours = Math.ceil((nowDate - startDate) / ONE_HOUR); const progressRatio = elapsedHours / totalHours; const progressPercent = startPercent + ((endPercent - startPercent) * progressRatio); return Math.min(endPercent, Math.max(startPercent, progressPercent)); } function resetTimer(wrap) { const dateItems = wrap.querySelectorAll('.event_timer_date p'); const progressBox = wrap.querySelector('.event_timer_progress'); dateItems.forEach(function (item) { item.classList.remove('_on'); }); if (progressBox) { progressBox.classList.remove('_active'); progressBox.style.setProperty('--timer-fill', '0%'); } } function updateTimer() { const timerWraps = document.querySelectorAll(TIMER_SELECTOR); if (!timerWraps.length) return false; const nowDate = new Date(); timerWraps.forEach(function (wrap) { const dateItems = wrap.querySelectorAll('.event_timer_date p'); const progressBox = wrap.querySelector('.event_timer_progress'); if (!dateItems.length || !progressBox) { resetTimer(wrap); return; } let activeItem = null; let progressPercent = 0; dateItems.forEach(function (item) { const startDate = parseDateTime(item.getAttribute('data-start')); const endDate = parseDateTime(item.getAttribute('data-end')); item.classList.remove('_on'); if (!startDate || !endDate) return; if (nowDate >= startDate && nowDate <= endDate) { activeItem = item; progressPercent = getProgressPercentByHour(nowDate, startDate, endDate); } }); if (activeItem) { activeItem.classList.add('_on'); progressBox.classList.add('_active'); progressBox.style.setProperty('--timer-fill', progressPercent + '%'); } else { progressBox.classList.remove('_active'); progressBox.style.setProperty('--timer-fill', '0%'); } }); return true; } function initTimer() { let retryCount = 0; updateTimer(); const retryTimer = setInterval(function () { const isUpdated = updateTimer(); retryCount += 1; if (isUpdated || retryCount >= MAX_RETRY_COUNT) { clearInterval(retryTimer); } }, RETRY_DELAY); window.addEventListener('load', updateTimer); if (window.__copyEventTimerInterval) { clearInterval(window.__copyEventTimerInterval); } window.__copyEventTimerInterval = setInterval(updateTimer, 60 * 1000); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initTimer); } else { initTimer(); } })(); </script><!-- 타이머 스크립트 --><script> const targetDate = new Date("2026-07-03T10:00:00").getTime(); function setCountdownText(ids, value) { ids.forEach(function (id) { const el = document.getElementById(id); if (el) { el.textContent = value; } }); } function updateCountdown() { const now = new Date().getTime(); const distance = targetDate - now; if (distance <= 0) { clearInterval(timerInterval); setCountdownText(["days", "days_02"], "00"); setCountdownText(["hours", "hours_02"], "00"); setCountdownText(["minutes", "minutes_02"], "00"); setCountdownText(["seconds", "seconds_02"], "00"); return; } const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); setCountdownText(["days", "days_02"], String(days).padStart(2, "0")); setCountdownText(["hours", "hours_02"], String(hours).padStart(2, "0")); setCountdownText(["minutes", "minutes_02"], String(minutes).padStart(2, "0")); setCountdownText(["seconds", "seconds_02"], String(seconds).padStart(2, "0")); } const timerInterval = setInterval(updateCountdown, 1000); updateCountdown(); </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><!-- 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 : 이벤트 복사영역 여기까지 -->