<!-- S : 이벤트 복사영역 여기서부터 -->
<style type="text/css">.art-container-event {
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.art-content-inner {
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
overflow: hidden;
}
.art-content-inner img {
display: block;
width: 100%;
}
@keyframes ani1 {
0% {
top: 8.72%;
left: 7.81%;
transform: scale(0);
opacity: 0;
z-index: 0;
}
100% {
top: 7.84%;
left: -2.5%;
transform: scale(1);
opacity: 1;
z-index: 1;
}
}
@keyframes ani2 {
0% {
top: 9.45%;
left: 19.84%;
transform: scale(0);
opacity: 0;
}
100% {
top: 5.96%;
left: 9.43%;
transform: scale(1);
opacity: 1;
}
}
@keyframes ani3 {
0% {
top: 14.82%;
left: 14.06%;
transform: scale(0);
opacity: 0;
}
100% {
top: 13.07%;
left: -1.72%;
transform: scale(1);
opacity: 1;
}
}
@keyframes ani4 {
0% {
top: 3.49%;
left: 21.41%;
transform: scale(0);
opacity: 0;
}
100% {
top: 0;
left: 10.99%;
transform: scale(1);
opacity: 1;
}
}
@keyframes ani5 {
0% {
top: 7.7%;
right: 14.48%;
transform: scale(0);
opacity: 0;
}
100% {
top: 4.22%;
right: 4.06%;
transform: scale(1);
opacity: 1;
}
}
@keyframes ani6 {
0% {
top: 14.01%;
right: 15.63%;
transform: scale(0);
opacity: 0;
}
100% {
top: 10.53%;
right: -0.63%;
transform: scale(1);
opacity: 1;
}
}
@keyframes ani7 {
0% {
top: 15.93%;
right: 24.11%;
transform: scale(0);
opacity: 0;
}
100% {
top: 12.45%;
right: 8.49%;
transform: scale(1);
opacity: 1;
}
}
@keyframes moving {
0% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
100% {
transform: translateY(0);
}
}
.art-content-inner .obj {
position: absolute;
opacity: 0;
transition: all 0.3s;
}
.art-content-inner .obj-wrap .obj1 {
width: 35.1%;
animation: ani1 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.7s ease-in-out infinite;
}
.art-content-inner .obj-wrap .obj2 {
width: 14.43%;
animation: ani2 0.7s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.9s ease-in-out infinite;
}
.art-content-inner .obj-wrap .obj3 {
width: 10.47%;
animation: ani3 0.7s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.9s ease-in-out infinite;
}
.art-content-inner .obj-wrap .obj4 {
width: 8.7%;
animation: ani4 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.7s ease-in-out infinite;
}
.art-content-inner .obj-wrap .obj5 {
width: 14.22%;
animation: ani5 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.7s ease-in-out infinite;
}
.art-content-inner .obj-wrap .obj6 {
width: 12.5%;
animation: ani6 0.7s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.9s ease-in-out infinite;
}
.art-content-inner .obj-wrap .obj7 {
width: 9.11%;
animation: ani7 0.7s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards, moving 1.2s 0.7s ease-in-out infinite;
}
.video-wrap {
position: absolute;
top: 10.62%;
left: 50%;
transform: translateX(-50%);
width: 56.25%;
}
.video-wrap .video-ratio {
position: relative;
height: 0;
padding-top: 56.25%;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.art-content-inner .float-banner {
position: fixed;
bottom: 220px;
right: 30px;
display: none;
width: 185px;
opacity: 0;
z-index: 99;
}
.art-content-inner .float-banner.active {
display: none !important;
}
</style>
<!-- s : art-container-event -->
<div class="art-container-event">
<div class="art-content-inner">
<img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/bg.jpg" usemap="#map1" />
<map name="map1">
<!-- 카테고리 -->
<area shape="rect" alt="카테고리 - 샌들" coords="470,1687,710,1904"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-샌들"
data-tag-title="ABC_블루ABC데이"
href="#prodContent1" />
<area shape="rect" alt="카테고리 - 슬라이드" coords="716,1687,956,1905"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-슬라이드"
data-tag-title="ABC_블루ABC데이"
href="#prodContent2" />
<area shape="rect" alt="카테고리 - 클로그" coords="961,1686,1201,1904"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-클로그"
data-tag-title="ABC_블루ABC데이"
href="#prodContent3" />
<area shape="rect" alt="카테고리 - 레인부츠" coords="1204,1685,1444,1905"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-레인부츠"
data-tag-title="ABC_블루ABC데이"
href="#prodContent4" />
<area shape="rect" alt="카테고리 - 스니커즈" coords="471,1914,709,2131"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-스니커즈"
data-tag-title="ABC_블루ABC데이"
href="#prodContent5" />
<area shape="rect" alt="카테고리 - 러닝화" coords="715,1912,955,2129"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-러닝화"
data-tag-title="ABC_블루ABC데이"
href="#prodContent6" />
<area shape="rect" alt="카테고리 - 캐주얼" coords="961,1914,1200,2132"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-캐주얼"
data-tag-title="ABC_블루ABC데이"
href="#prodContent7" />
<area shape="rect" alt="카테고리 - 키즈" coords="1202,1913,1444,2130"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="카테고리-키즈"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004947" />
<!-- 브랜드 -->
<area shape="rect" alt="브랜드 - 크록스" coords="503,2432,804,2529"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-크록스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004886" />
<area shape="rect" alt="브랜드 - 나이키" coords="808,2432,1107,2527"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-나이키"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004887" />
<area shape="rect" alt="브랜드 - 아디다스" coords="1116,2433,1414,2527"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-아디다스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004888" />
<area shape="rect" alt="브랜드 - 뉴발란스" coords="351,2533,648,2626"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-뉴발란스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004889" />
<area shape="rect" alt="브랜드 - 반스" coords="658,2533,953,2625"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-반스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004890" />
<area shape="rect" alt="브랜드 - 컨버스" coords="958,2536,1260,2629"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-컨버스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004891" />
<area shape="rect" alt="브랜드 - 스케쳐스" coords="1271,2533,1566,2625"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-스케쳐스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004892" />
<area shape="rect" alt="브랜드 - 푸마" coords="350,2633,648,2728"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-푸마"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004893" />
<area shape="rect" alt="브랜드 - 휠라" coords="654,2634,954,2725"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-휠라"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004894" />
<area shape="rect" alt="브랜드 - 누오보" coords="962,2636,1264,2728"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-누오보"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004895" />
<area shape="rect" alt="브랜드 - ABC셀렉트" coords="1270,2635,1568,2726"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-ABC셀렉트"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004896" />
<area shape="rect" alt="브랜드 - 호킨스" coords="351,2734,649,2824"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-호킨스"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004897" />
<area shape="rect" alt="브랜드 - 스테파노로시" coords="658,2735,954,2825"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-스테파노로시"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004898" />
<area shape="rect" alt="브랜드 - 테바" coords="961,2734,1262,2829"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-테바"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004899" />
<area shape="rect" alt="브랜드 - 벤시몽" coords="1268,2734,1565,2829"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="브랜드-벤시몽"
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004900" />
<!-- 온라인 브랜드 -->
<area shape="rect" alt="온라인 브랜드 상품 더 보러가기" coords="854,3415,1060,3500"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="온라인브랜드
data-tag-title="ABC_블루ABC데이"
href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004907" />
<!-- 이벤트 -->
<area shape="rect" alt="이벤트 - 잭팟" coords="752,4350,1174,4462"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="이벤트-잭팟"
data-tag-title="ABC_블루ABC데이"
href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002066" />
<area shape="rect" alt="이벤트 - 크록스" coords="753,5019,1167,5126"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="이벤트-크록스"
data-tag-title="ABC_블루ABC데이"
href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002069" target="_blank" />
<area shape="rect" alt="이벤트 - 네이버페이" coords="649,5520,858,5596"
data-tag-id="2000004873"
data-tag-index="click_event_element"
data-tag-label="이벤트-네이버페이"
data-tag-title="ABC_블루ABC데이"
href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002070" target="_blank" />
<!-- <area shape="rect" alt="이벤트 - GS25" coords="973,5226,1354,5620" href="#" target="_blank" /> -->
</map>
<!-- 애니메이션 -->
<div class="obj-wrap">
<div class="obj obj1"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/1.png" /></div>
<div class="obj obj2"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/2.png" /></div>
<div class="obj obj3"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/3.png" /></div>
<div class="obj obj4"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/4.png" /></div>
<div class="obj obj5"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/5.png" /></div>
<div class="obj obj6"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/6.png" /></div>
<div class="obj obj7"><img src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/obj/7.png" /></div>
</div>
<!-- 비디오 -->
<div class="video-wrap">
<div class="video-ratio"><iframe src="https://play.wecandeo.com/playlist/?playlistKey=n4ACCxv8QZZ7W8WXRufqMisdnpA8I43sqYlLKR8n99mkie&playerKey=GH4f7mv0FtxhisK1vepXXIAieie"></iframe></div>
</div>
<!-- 플로팅 배너 -->
<div class="float-banner" id="floBnr"><a data-tag-id="2000004873" data-tag-index="click_event_element" data-tag-label="플로팅 배너" data-tag-title="ABC_블루ABC데이" href="https://www.a-rt.com/promotion/event/detail?eventNo=2000002066" target="_blank"><img alt="100% 당첨! 5% 추가 할인 쿠폰 받기" src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/abc/float-banner.png" /> </a></div>
</div>
<!-- 하단 띠배너 -->
<div class="art-content-inner banner"><a data-tag-id="2000004873" data-tag-index="click_event_element" data-tag-label="띠배너-키즈 기획전 랜딩" data-tag-title="ABC_블루ABC데이" href="https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004947"><img alt="키즈 상품 보러 가기" src="https://image.a-rt.com/art/editor/202407/1720145624846.jpg" /> </a></div>
<div class="art-content-inner banner"><a data-tag-id="2000004873" data-tag-index="click_event_element" data-tag-label="띠배너-GS채널 랜딩" data-tag-title="ABC_블루ABC데이" href="https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000004874"><img alt="GRAND STAGE 전용 상품 보러 가기" src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/banner-gs.jpg" /> </a></div>
<div class="art-content-inner banner"><a data-tag-id="2000004873" data-tag-index="click_event_element" data-tag-label="띠배너-의류역시즌 랜딩" data-tag-title="ABC_블루ABC데이" href="https://grandstage.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004934"><img alt="의류 역시즌 특가 상품 보러 가기" src="https://image.a-rt.com/art/managing/event/20240704_blue_abc/pc/banner-cloth.jpg" /> </a></div>
</div>
<!-- e : art-container-event --><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js" integrity="sha512-qF6akR/fsZAB4Co1QDDnUXWnaQseLGXoniuSuSlPQK6+aWhlMZcHzkasCSlnWoe+TJuudlka1/IQ01Dnhgq95g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><script>
$(function () {
editorCalcWidth();
});
$(window).on({
resize: function () {
editorCalcWidth();
},
});
function editorCalcWidth() {
var width_size = $(window).width();
if (width_size > 1200) {
$('.editor-wrap').css({
width: width_size,
});
}
}
function fixImageMaps(force) {
var imgs = document.querySelectorAll('img[usemap]');
[].forEach.call(imgs, function (img) {
if (!img.naturalHeight) {
return;
}
var h = img.height / img.naturalHeight;
var w = img.width / img.naturalWidth;
var map = document.getElementsByName(img.useMap.slice(1))[0];
if (!map) {
return;
}
for (var i = 0; i < map.children.length; i++) {
var area = map.children[i];
if (!area.coords) {
continue;
}
var coords = area.coords;
if (!area.originalCoords) {
area.originalCoords = coords;
} else {
coords = area.originalCoords;
}
var split = coords.split(',');
var fixed = '';
split.forEach(function (coord, n) {
if (n != 0) {
fixed += ',';
}
fixed += n % 2 == 0 ? Number(coord) * w : Number(coord) * h;
});
area.coords = fixed;
}
});
}
window.onresize = fixImageMaps;
window.onload = fixImageMaps;
$(function () {
$(window).on('scroll', function () {
if ($(this).scrollTop() < 100) {
gsap.to('#floBnr', {
opacity: 0,
display: 'none',
});
} else {
gsap.to('#floBnr', {
opacity: 1,
display: 'block',
});
}
});
});
$('.btn-close').on('click', function () {
$('.float-banner').addClass('active');
});
</script><!-- E : 이벤트 복사영역 여기까지 -->