<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; } /* content */ .mv_wrap { position: relative; } .mv { position: relative; width: 100%; overflow: hidden; } .mv_txt { position: absolute; width: 100%; bottom: clamp(48px, 3.33vw, 64px); left: 50%; transform: translateX(-50%); font-size: clamp(32px, 2.19vw, 42px); font-weight: 700; line-height: 120%; letter-spacing: -1.12px; color: #ffffff; } .content { padding: 64px 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .content .ttl { font-size: 32px; font-weight: 700; line-height: 132%; color: #000000; } .content .txt { margin: 18px auto 0 !important; font-size: 16px; font-weight: 300; line-height: 160%; letter-spacing: -0.64px; color: #000000; } /* content _copy */ .content._copy { display: flex; justify-content: center; align-items: center; gap: 76px; padding: 80px 0; background-color: #65795B; } .content._copy .ttl { font-size: 28px; font-weight: 700; line-height: 100%; color: #ffffff; } .content._copy .txt { margin: 0 !important; font-size: 16px; font-weight: 400; line-height: 160%; letter-spacing: -0.64px; text-align: left; color: #ffffff; } /* content _01 */ .content._01 { background-color: #D0DBCB; } .content._01 .logo { max-width: 82.5px; margin: 0 auto !important; } .content._01 .ttl { margin: 36px auto 0 !important; } .content._01 .video_wrap { position: relative; max-width: 720px; margin: 48px auto 0 !important; } .content._01 .video_wrap video { width: 720px; } /* content _02 */ .content._02 { background-image: url(https://image.a-rt.com/art/editor/202606/1780559830259.jpg); } .content._02 .img { max-width: 940px; margin: 48px auto 0 !important; } </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/1780559875673.jpg" /></div> <p class="mv_txt">PLAKNIT<br /> GO TO THE EXTRA MILE</p> </div> <div class="content _copy"> <p class="ttl">ABC PLUS는?</p> <p class="txt">ABC PLUS는 오직 온라인에서만 만날 수 있는 브랜드들로,<br /> 다양한 카테고리를 통해 패션과 트렌드를 선도합니다.</p> </div> <div class="content _01"> <div class="logo"><img alt="PLAKNIT" src="https://image.a-rt.com/art/editor/202606/1780559864373.png" /></div> <p class="ttl">한 걸음 더 가볍게<br /> 플래니트 러닝웨어</p> <p class="txt">소재부터 움직임까지 연구한 러닝웨어 브랜드입니다.<br /> 가볍고 쾌적한 기능성 소재와 정교한 패턴으로<br /> 일상과 러닝을 더 편안하게 만들어주는 컬렉션을 만나보세요.</p> <div class="ani video_wrap" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y="10%"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3zf2u71LPKDHzV7LoAipOMTfMxzxNx4FQQ6pXEiss8MMiics9yXbSCO8rQieie.mp4" /></video> </div> </div> <div class="content _02"> <p class="ttl">새로운 러닝 루틴의 시작<br /> 운동부터 일상까지 산뜻하게</p> <p class="txt">흡습속건, 통기성, 쿨링 기능을 갖춘 기능성 러닝웨어로<br /> 운동할 때도 일상에서도 산뜻하게 입기 좋은 데일리 스포츠웨어입니다.</p> <div class="ani img" data-delay="" data-speed="0.7s" data-threshold="0.3" data-x="" data-y="10%"><img alt="" src="https://image.a-rt.com/art/editor/202606/1780559850873.png" /></div> </div> </div> </div> <!-- e : art-container-event --><!-- 애니메이션 --><script> (function () { function waitImagesLoaded(container, callback) { const imgs = Array.from(container.querySelectorAll('img')); if (!imgs.length) return callback(); let loaded = 0; function check() { loaded++; if (loaded === imgs.length) callback(); } imgs.forEach(img => { if (img.complete) { check(); } else { img.addEventListener('load', check, { once: true }); img.addEventListener('error', check, { once: true }); } }); } function initAni() { const style = document.createElement("style"); style.textContent = ` .ani{ --ani-x:0; --ani-y:0; --ani-speed:.7s; --ani-delay:0s; opacity:0; transform:translate(var(--ani-x),var(--ani-y)); transition: opacity var(--ani-speed) var(--ani-delay), transform var(--ani-speed) var(--ani-delay); } .ani.on{ opacity:1; transform:translate(0,0); } .ani.z_index1{position:relative;z-index:1;} .ani.z_index2{position:relative;z-index:2;} .ani.z_index3{position:relative;z-index:3;} @keyframes aniMove{ from{ opacity:0; transform:translate(var(--ani-x),var(--ani-y)); } to{ opacity:1; transform:translate(0,0); } }`; document.head.appendChild(style); document.querySelectorAll(".ani").forEach(el => { if (el.dataset.x) el.style.setProperty("--ani-x", el.dataset.x); if (el.dataset.y) el.style.setProperty("--ani-y", el.dataset.y); if (el.dataset.speed) el.style.setProperty("--ani-speed", el.dataset.speed); if (el.dataset.delay) el.style.setProperty("--ani-delay", el.dataset.delay); const threshold = parseFloat(el.dataset.threshold) || 0; const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("on"); io.unobserve(e.target); } }); }, { threshold: threshold }); io.observe(el); }); } const container = document.querySelector('.art-container-event'); if (!container) return; waitImagesLoaded(container, initAni); })(); </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>