ABC마트의 패션 컨텐츠 채널, 아트닷컴

<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; } .art-container-event { background: #000000; 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; } /* content */ .mv { position: relative; width: 100%; overflow: hidden; } .copy_wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 29px; padding: 80px 0; background-color: #3B4D1B; } .copy_ttl { max-width: 180px; } .copy_txt { font-size: 25px; font-weight: 400; line-height: 1.52; letter-spacing: -0.5px; } .content_video { padding: 164px 0 80px; background-image: url(https://image.a-rt.com/art/editor/202509/1759130287380.png); background-repeat: no-repeat; background-size: cover; } .content_video_txt01 { font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -1.08px; } .content_video_txt02 { margin-top: 32px !important; font-size: 25px; font-weight: 300; line-height: 1.6; letter-spacing: -0.5px; } .content_video_video_wrap { width: 800px; height: 450px; margin-top: 52px !important; } .content_video_video_wrap video { width: 800px; height: 450px; } .content_event { padding: 80px 0 93px; background-color: #1C1B19; } .content_event_sub_ttl_img { max-width: 108px; margin: 0 auto !important; } .content_event_ttl { margin-top: 24px !important; font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -0.84px; } .content_event_txt { margin-top: 32px !important; font-size: 25px; font-weight: 300; line-height: 1.6; letter-spacing: -0.5px; } .content_event_txt span { padding: 0 2px; font-weight: 700; color: #1C1B19; background-color: #FFEFCA; } .content_event_img { max-width: 423px; margin: 52px auto 0 !important; } .content_event_info_wrap { display: flex; flex-direction: column; align-items: flex-start; width: 370px; margin: 42px auto 0 !important; } .content_event_info_wrap p { display: flex; gap: 24px; font-size: 25px; font-weight: 300; line-height: 1.68; } .content_event_info_wrap p span:first-of-type { width: 93px; font-weight: 700; text-align-last: justify; } .content_event_caution_ttl_wrap { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 60px !important; } .content_event_caution_img { max-width: 22px; } .content_event_caution_ttl { font-size: 23px; font-weight: 600; line-height: 1; color: #929292; } .content_event_comment_wrap { display: flex; flex-direction: column; max-width: 499px; margin: 18px auto 0 !important; color: #929292; list-style: none; } .content_event_comment_wrap li { font-size: 19px; font-weight: 300; line-height: 1.84; letter-spacing: -0.76px; text-align: left; } .content_event_comment_wrap li::before { content: "•"; margin-right: 12px; } .content01 { padding: 100px 0 171px; background-image: url(https://image.a-rt.com/art/editor/202509/1759130297313.png); background-repeat: no-repeat; background-size: cover; } .content01_ttl_wrap { max-width: 560px; margin: 0 auto !important; } .content01_num_txt { width: 37px; padding-bottom: 1.5px !important; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.68px; color: #DAF0B3; border-bottom: #DAF0B3 solid 3px; } .content01_item_ttl { max-width: 187px; margin-top: 21.5px !important; margin-left: 4px; } .content01_img01 { max-width: 560px; margin: 61px auto 0 !important; } .content01_txt01 { margin-top: 50px !important; font-size: 25px; font-weight: 400; line-height: 1.6; letter-spacing: -0.5px; } .content01_flex_row_wrap { display: flex; gap: 53px; justify-content: center; width: 977px; margin: 104px auto 0 !important; } .content01_flex_col_wrap { display: flex; flex-direction: column; align-items: center; gap: 74px; } .content01_img02 { max-width: 364px; } .content01_img03 { max-width: 357px; } .content01_swiper { position: relative; width: 560px; height: 720px; overflow: hidden; } .content01_swiper .swiper-pagination { position: relative; bottom: 59px; left: unset; z-index: 1; line-height: 0; } .content01_swiper .swiper-pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.65); width: 10px; height: 10px; margin: 0 3px; vertical-align: bottom; opacity: unset; } .content01_swiper .swiper-pagination .swiper-pagination-bullet-active { background: #253142; opacity: unset; } .content01_txt02 { margin-top: 61px !important; font-size: 25px; font-weight: 400; line-height: 1.6; letter-spacing: -0.5px; text-align: right; } .content02 { padding: 100px 0 168px; background-image: url(https://image.a-rt.com/art/editor/202509/1759130375244.png); background-repeat: no-repeat; background-size: cover; } .content02_ttl_wrap { max-width: 560px; margin: 0 auto !important; } .content02_num_txt { width: 42px; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.68px; color: rgba(255, 255, 255, 0.5); border-bottom: rgba(255, 255, 255, 0.5) solid 3px; } .content02_item_ttl { max-width: 305px; margin-top: 23px !important; margin-left: 4px; } .content02_img01 { max-width: 560px; margin: 61px auto 0 !important; } .content02_txt01 { margin-top: 50px !important; font-size: 25px; font-weight: 400; line-height: 1.6; letter-spacing: -0.5px; } .content02_flex_row_wrap { display: flex; gap: 53px; justify-content: center; width: 977px; margin: 107px auto 0 !important; } .content02_flex_col_wrap { display: flex; flex-direction: column; align-items: center; gap: 61px; } .content02_img02 { max-width: 364px; } .content02_txt02 { font-size: 25px; font-weight: 400; line-height: 1.6; letter-spacing: -0.5px; text-align: left; white-space: nowrap; } .content02_swiper { position: relative; width: 560px; height: 720px; overflow: hidden; } .content02_swiper .swiper-pagination { position: relative; bottom: 59px; left: unset; z-index: 1; line-height: 0; } .content02_swiper .swiper-pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.65); width: 10px; height: 10px; margin: 0 3px; vertical-align: bottom; opacity: unset; } .content02_swiper .swiper-pagination .swiper-pagination-bullet-active { background: #253142; opacity: unset; } /* 애니메이션 */ .animationSection.animation01 { position: relative; width: 800px; height: 502px; margin: 0 auto; } .animationSection.animation02 { position: relative; width: 560px; height: 951px; margin: 0 auto; } .animationSection.animation03 { position: relative; width: 364px; height: 975px; margin: 0 auto; } .animationSection.animation04 { position: relative; width: 560px; height: 901px; margin: 0 auto; } .animationSection.animation05 { position: relative; width: 560px; height: 951px; margin: 0 auto; } .animationSection.animation06 { position: relative; width: 364px; height: 649px; margin: 0 auto; } .animationSection.animation07 { position: relative; width: 560px; height: 720px; margin: 0 auto; } /* footer */ .footer { padding: 49px 0 126px; background-color: #15181B; } .footer .btn { font-size: 20px; font-weight: bold; width: 774.19px; box-sizing: border-box; display: flex; text-align: center; align-items: center; justify-content: center; height: 80px; border: 2px solid #ffffff; transition: .3s ease; text-decoration: none; color: #ffffff; background-color: #15181B; margin: 0 auto; } .footer .btn:hover { color: #15181B; background: #ffffff; } .footer .btn .ico { display: inline-block; width: 40px; height: 40px; margin-left: 12px; background: url(https://image.a-rt.com/art/editor/202509/1759130458216.png) center/cover no-repeat; transition: .3s ease; } .footer .btn:hover .ico { background: url(https://image.a-rt.com/art/editor/202509/1759130465787.png) center/cover no-repeat; } .footer .copy { margin: 0; padding: 41px 0 0; text-align: center; font-size: 22px; color: #D3D3D3; } .footer .copy .attention { font-weight: bold; color: #ffffff; }</style><div class="art-container-event"><div class="art-content-inner"><div class="mv"><img alt="어느 가을날 나답게 걷기 시작한 하루 블랑이랑 스페지알과 함께" src="https://image.a-rt.com/art/editor/202509/1759130475970.jpg" /></div><div class="copy_wrap"><div class="copy_ttl"><img alt="LAUNCHING" src="https://image.a-rt.com/art/editor/202509/1759130447247.png" /></div><p class="copy_txt">지금 공개된 신상부터 주목받는 브랜드까지,<br />당신을 위한 첫 번째 소식을 지금 바로 만나보세요</p></div><div class="content_video"><p class="content_video_txt01">ABC마트 단독 발매<br />아디다스 블랑 · 핸드볼 스페지알</p><p class="content_video_txt02">오직 ABC마트에서만 선보이는 단독상품 컬렉션.<br />클래식한 무드와 트렌드를 동시에 아우르는<br />로우 프로파일 스니커즈 블랑과 핸드볼 스페지알을<br />지금 바로 만나보세요.</p><div class="animationSection animation01"><div class="aniWrap"><div class="aniImg aniImg01"><div class="content_video_video_wrap"><video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3295aE1N3NrxeFpjCvXrVBPMxzxNx4FQQvPZBl0RiscBiimBrcol7ipF7wieie.mp4" /></video></div></div></div></div></div><div class="content_event"><div class="content_event_sub_ttl_img"><img alt="PROMOTION" src="https://image.a-rt.com/art/editor/202509/1759130274614.png" /></div><p class="content_event_ttl">구매 사은품 증정 이벤트</p><p class="content_event_txt">프로모션 기간 내 <span>단독상품</span> 구매 시,<br />선착순 실버 리유저블 백 증정</p><div class="content_event_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130263772.png" /></div><div class="content_event_info_wrap"><p><span>기 간</span><span>2025.10.01 – 소진 시</span></p><p><span>대상 상품</span><span>콘텐츠 하단 연관상품 6족</span></p></div><div class="content_event_caution_ttl_wrap"><span class="content_event_caution_img"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130241805.png" /></span> <span class="content_event_caution_ttl">유의 사항</span></div><ul class="content_event_comment_wrap"> <li>사은품은 한정 수량으로, 소진 시 사전 고지 없이 종료될 수 있습니다.</li> <li>온라인 물류센터 출고 건에 한해서만 사은품이 증정됩니다.</li> <li>교환/반품 시에는 사은품도 함께 동봉해 주셔야 처리가 가능합니다.</li> <li>사은품 증정은 이벤트 기간 내 구매한 상품에 한해 적용됩니다.</li></ul></div><div class="content01"><div class="content01_ttl_wrap"><p class="content01_num_txt">01</p><div class="content01_item_ttl"><img alt="BLANC" src="https://image.a-rt.com/art/editor/202509/1759130336215.png" /></div></div><div class="animationSection animation02"><div class="aniWrap"><div class="aniImg aniImg02"><div class="content01_img01"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130307467.png" /></div><p class="content01_txt01">미니멀리즘에 뿌리를 둔 로우 프로파일?<br />스니커즈 블랑은 깔끔한 실루엣으로<br />정제된 레트로 무드를 선사합니다.</p></div></div></div><div class="content01_flex_row_wrap"><div class="animationSection animation03"><div class="aniWrap"><div class="aniImg aniImg03"><div class="content01_flex_col_wrap"><div class="content01_img02"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130316624.png" /></div><div class="content01_img03"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130326777.png" /></div></div></div></div></div><div class="animationSection animation04"><div class="aniWrap"><div class="aniImg aniImg04"><div class="swiper content01_swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130345419.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130353411.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130361807.png" /></div></div><div class="swiper-pagination"> </div></div><p class="content01_txt02">편안한 스웻 룩 또는 캐주얼 데님 룩과<br />자연스럽게 조화를 이루어 스타일리시한<br />데일리 룩을 완성합니다.</p></div></div></div></div></div><div class="content02"><div class="content02_ttl_wrap"><p class="content02_num_txt">02</p><div class="content02_item_ttl"><img alt="BLANC" src="https://image.a-rt.com/art/editor/202509/1759130407466.png" /></div></div><div class="animationSection animation05"><div class="aniWrap"><div class="aniImg aniImg02"><div class="content02_img01"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130387003.png" /></div><p class="content02_txt01">코트에서 출발해 전 세계 컬쳐씬에서 사랑받는<br />클래식 아이콘이 된 핸드볼 스페지알은<br />새틴 리본끈 연출로 우아한 분위기를 선사합니다.</p></div></div></div><div class="content02_flex_row_wrap"><div class="animationSection animation06"><div class="aniWrap"><div class="aniImg aniImg06"><div class="content02_flex_col_wrap"><div class="content02_img02"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130396354.png" /></div><p class="content02_txt02">애슬레저 무드의 쇼츠부터 페미닌한<br />맥시 스커트까지 자연스럽게 어우러져<br />개성을 살린 헤리티지 룩을 완성합니다.</p></div></div></div></div><div class="animationSection animation07"><div class="aniWrap"><div class="aniImg aniImg07"><div class="swiper content02_swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130419036.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130427817.png" /></div><div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202509/1759130436579.png" /></div></div><div class="swiper-pagination"> </div></div></div></div></div></div></div><div class="footer"><a class="btn" href="https://www.a-rt.com/display/webzine/magazine">더 많은 콘텐츠 보러가기<span class="ico"></span></a><p class="copy">콘텐츠가 마음에 들었다면 <span class="attention">좋아요</span>를 눌러주세요.</p></div></div></div><script> $(function () { $(window).on("scroll", function () { doAnimation(".animation01", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 700, 0.3, 0); doAnimation(".animation02", { opacity: 0, bottom: "-200px" }, { opacity: 1, bottom: "0px" }, 700, 0.3, 0); doAnimation(".animation03", { opacity: 0, left: "-200px" }, { opacity: 1, left: "0px" }, 700, 0.3, 0); doAnimation(".animation04", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 700, 0.3, 500); doAnimation(".animation05", { opacity: 0, bottom: "-200px" }, { opacity: 1, bottom: "0px" }, 700, 0.3, 0); doAnimation(".animation06", { opacity: 0, left: "-200px" }, { opacity: 1, left: "0px" }, 700, 0.3, 0); doAnimation(".animation07", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 700, 0.3, 500); }); function doAnimation(selector, startCSS, endCSS, duration, triggerRatio, delay) { var $section = $(selector); var $img = $section.find(".aniImg"); if ($img.length === 0) return; var ratio = (typeof triggerRatio === "number") ? triggerRatio : 0.5; var delayTime = (typeof delay === "number") ? delay : 0; var triggerPoint = $section.offset().top + ($section.outerHeight() * ratio); if ($section.data("shown") === undefined) { $section.data("shown", false); $img.css($.extend({}, startCSS, { position: "absolute" })); } if ($(window).scrollTop() + $(window).height() > triggerPoint) { if (!$section.data("shown")) { $section.data("shown", true); $img.stop(true, true) .delay(delayTime) .animate(endCSS, duration, "swing"); } } else { if ($section.data("shown")) { $section.data("shown", false); $img.stop(true, true) .delay(delayTime) .animate(startCSS, duration, "swing"); } } } $(window).trigger("scroll"); }); </script><script> $(function () { $('.swiper.content01_swiper').each(function (i) { const $this = $(this); const pagination = $this.find('.swiper-pagination'); pagination.addClass('type' + i); function getSpaceBetween(px = 10, base = 720) { if (window.innerWidth <= base) { return window.innerWidth * (px / base); } return px; } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const slideCount = $this.find('.swiper-slide').length; const swiper = new Swiper($this[0], { slidesPerView: 1, speed: 1500, allowTouchMove: true, loop: slideCount > 1, watchOverflow: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: pagination[0], clickable: true, }, spaceBetween: getSpaceBetween(10) }); window.addEventListener('resize', () => { swiper.params.spaceBetween = getSpaceBetween(10); swiper.update(); }); observer.unobserve(entry.target); } }); }, { threshold: 0.3 }); observer.observe(this); }); }); </script><script> $(function () { $('.swiper.content02_swiper').each(function (i) { const $this = $(this); const pagination = $this.find('.swiper-pagination'); pagination.addClass('type' + i); function getSpaceBetween(px = 10, base = 720) { if (window.innerWidth <= base) { return window.innerWidth * (px / base); } return px; } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const slideCount = $this.find('.swiper-slide').length; const swiper = new Swiper($this[0], { slidesPerView: 1, speed: 1500, allowTouchMove: true, loop: slideCount > 1, watchOverflow: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: pagination[0], clickable: true, }, spaceBetween: getSpaceBetween(10) }); window.addEventListener('resize', () => { swiper.params.spaceBetween = getSpaceBetween(10); swiper.update(); }); observer.unobserve(entry.target); } }); }, { threshold: 0.3 }); observer.observe(this); }); }); </script><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>

알림 받으실 사이즈
휴대폰 번호	입력한 내용은 회원정보에 반영되지 않습니다

관련상품 6