<!-- S : 이벤트 복사영역 여기서부터 -->
<style type="text/css">/* webfont */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
/* default */
.art-container-event {
position: relative;
width: 100%;
max-width: 1920px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.art-content-inner {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.art-content-inner img {
display: block;
width: 100%;
}
/* keyframes */
@keyframes scale-in {
0% {
scale: 1.2;
}
100% {
scale: 1;
}
}
@keyframes dark-in {
0% {
background-color: rgba(0, 0, 0, 0.4);
}
100% {
background-color: rgba(0, 0, 0, 0);
}
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-out {
0% {
opacity: 0;
transform: translateY(-40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes move-in {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes move-out {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(10%);
}
}
@keyframes right-in {
0% {
opacity: 0;
transform: translateX(50%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes right-out {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(50%);
}
}
@keyframes left-in {
0% {
opacity: 0;
transform: translateX(-25%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes left-out {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
/* common */
.art-content-inner .ani {
opacity: 0;
}
.art-content-inner .ani:not(.fix) {
animation: move-out 0.6s ease-in-out forwards;
}
.art-content-inner .ani.active {
animation: move-in 0.6s ease-in-out forwards;
}
.art-content-inner .ani.active.delay {
animation-delay: 0.4s;
}
.art-content-inner [class*='txt'] {
font-family: Pretendard, sans-serif !important;
word-break: keep-all;
}
.art-content-inner .main-txt {
font-size: 50px;
font-weight: 800;
line-height: 60px;
}
.art-content-inner .sub-txt {
font-size: 20px;
font-weight: 500;
line-height: 30px;
}
.art-content-inner[class*='cnt'] {
margin-bottom: 300px;
}
.art-content-inner .blind {
width: 1px;
height: 1px;
overflow: hidden;
border: none;
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
/* main */
.art-content-inner.main {
margin-bottom: 150px;
}
.art-content-inner.main .img-wrap {
position: relative;
overflow: hidden;
}
.art-content-inner.main .img-wrap img {
animation: scale-in 1s ease-out forwards;
}
.art-content-inner.main .img-wrap::after {
content: '';
position: absolute;
top: 0;
left: 0;
animation: dark-in 1s ease-in-out forwards;
width: 100%;
height: 100%;
}
.art-content-inner.main .txt-wrap {
margin-top: 150px;
}
.art-content-inner.main .main-txt {
padding-bottom: 60px;
}
.art-content-inner.main .sub-txt:first-child {
padding-bottom: 20px;
}
.art-content-inner.main .txt-wrap.ani.active .fade-in {
animation: fade-in 0.8s ease-in-out forwards;
}
.art-content-inner.main .txt-wrap.ani.active .fade-out {
animation: fade-out 0.8s ease-in-out forwards;
}
/* cnt1 */
.art-content-inner.cnt1 {
max-width: 640px;
}
.art-content-inner.cnt1 .video-wrap {
position: relative;
width: 100%;
margin-bottom: 50px;
}
.art-content-inner.cnt1 .video-wrap video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.art-content-inner.cnt1 .btn-sound.active {
background-position: 0 0;
}
.art-content-inner.cnt1 .sub-txt {
padding-top: 100px;
}
/* cnt2 */
.art-content-inner.cnt2 {
display: flex;
justify-content: space-between;
gap: 20px;
max-width: 1300px;
margin-bottom: 200px;
}
/* cnt3 */
.art-content-inner.cnt3 {
max-width: 640px;
}
.art-content-inner.cnt3 .swiper {
width: 100%;
padding-bottom: 108px;
overflow: hidden;
cursor: pointer;
}
.art-content-inner.cnt3 .swiper .swiper-pagination {
bottom: 0;
height: 8px;
}
.art-content-inner.cnt3 .swiper .swiper-pagination .swiper-pagination-bullet {
background: #000;
border-radius: unset;
width: 100px;
height: 8px;
margin: 0;
transition: all 0.5s;
}
/* cnt4 */
.art-content-inner.cnt4 [class*='img-wrap'] {
position: relative;
max-width: 960px;
}
.art-content-inner.cnt4 .img-wrap-1 {
margin-left: auto;
margin-bottom: 300px;
}
.art-content-inner.cnt4 .img-wrap-1 [class*='caption'] {
position: absolute;
left: -40px;
font-size: 20px;
font-weight: 500;
line-height: 1;
writing-mode: vertical-rl;
}
.art-content-inner.cnt4 .img-wrap-1 .caption-1 {
top: 0;
}
.art-content-inner.cnt4 .img-wrap-1 .caption-2 {
bottom: 0;
}
.art-content-inner.cnt4 .img-wrap-1.ani {
animation: right-out 0.8s ease-in-out forwards;
}
.art-content-inner.cnt4 .img-wrap-1.ani.active {
animation: right-in 0.8s ease-in-out forwards;
}
.art-content-inner.cnt4 .flex-wrap {
display: flex;
align-items: center;
}
.art-content-inner.cnt4 .flex-wrap.ani {
animation: left-out 0.8s ease-in-out forwards;
}
.art-content-inner.cnt4 .flex-wrap.ani.active {
animation: left-in 0.8s ease-in-out forwards;
}
.art-content-inner.cnt4 .flex-wrap .sub-txt {
flex-grow: 1;
}
/* cnt5 */
.art-content-inner.cnt5 {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.art-content-inner.cnt5 .img-wrap {
max-width: 640px;
}
.art-content-inner.cnt5 .flex-wrap {
display: flex;
flex-direction: column;
gap: 20px;
}
.art-content-inner.cnt4 .flex-wrap.ani {
animation: left-out 0.8s ease-in-out forwards;
}
.art-content-inner.cnt4 .flex-wrap.ani.active {
animation: left-in 0.8s ease-in-out forwards;
}
.art-content-inner.cnt4 .flex-wrap .sub-txt {
flex-grow: 1;
}
/* cnt6 */
.art-content-inner.cnt6 {
max-width: 960px;
margin-bottom: 100px;
}
/* credit */
.art-content-inner.credit {
margin-bottom: 200px;
}
.art-content-inner.credit .sub-txt {
font-size: 20px;
line-height: 30px;
letter-spacing: -0.02em;
}
/* banner */
.art-content-inner.banner .banner-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.art-content-inner.banner .banner-wrap .banner-trend {
grid-column: 1 / span 4;
}
.art-content-inner.banner .banner-wrap [class*='banner'] {
position: relative;
cursor: pointer;
overflow: hidden;
}
.art-content-inner.banner .banner-wrap [class*='banner'] img {
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.art-content-inner.banner .banner-wrap [class*='banner']:hover img {
transform: scale(1.1);
}
.art-content-inner.banner .banner-wrap [class*='banner']::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.art-content-inner.banner .banner-wrap [class*='banner']:hover::before {
background: rgba(0, 0, 0, 0.6);
}
.art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap {
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
color: #fff;
text-align: left;
z-index: 2;
}
.art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap .caption {
font-size: 20px;
font-weight: 300;
margin-bottom: 46px;
}
.art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap .main {
font-size: 40px;
font-weight: 800;
line-height: 50px;
}
.art-content-inner.banner .banner-wrap [class*='banner'] .txt-wrap .sub {
font-size: 20px;
font-weight: 400;
margin-top: 30px;
}
.art-content-inner.banner .banner-wrap .banner-trend .txt-wrap {
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.art-content-inner.banner .banner-wrap .banner-trend .txt-wrap .main {
font-size: 48px;
line-height: 70px;
}
.art-content-inner.banner .banner-wrap .banner-trend .txt-wrap .sub {
font-size: 20px;
line-height: 45px;
margin: 0;
}
</style>
<!-- s : art-container-event -->
<div class="art-container-event">
<div class="art-content-inner main">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728610176653.jpg" /></div>
<div class="txt-wrap ani fix">
<div class="fade-in">
<p class="sub-txt">DISCOVER</p>
<p class="main-txt">빠질 수 없는<br />
스타일 키워드 #레트로</p>
</div>
<p class="sub-txt fade-out">과거의 패션 요소를 현대적인 감각으로<br />
재해석한 레트로 스타일은 이제 단순한 트렌드를 넘어,<br />
꾸준히 사랑받는 스테디셀러로 자리 잡았습니다.<br />
<br />
가을이 깊어지면서 스타일링에 대한 고민이 많아진 요즘,<br />
그런 걱정을 덜어줄 완벽한 데일리 룩을 소개합니다.<br />
누구나 따라 할 수 있는 이지 코디, 지금 바로 만나보세요.</p>
</div>
</div>
<div class="art-content-inner cnt1">
<div class="video-wrap ani">
<video autoplay="" class="video" id="videoPlayer" loop="" muted="" playsinline="" preload=""><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3KFnmPLkfisWx8LK7ydiizXGisMxzxNx4FQQ9dAplt3TJYAsENXisPj5Bowieie.mp4" /></video>
<button class="btn-sound" id="soundBtn" onclick="handleMute()" type="button"><span class="blind">음소거 해제</span></button></div>
<div class="img-wrap ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728547629620.jpg" /></div>
<p class="sub-txt ani">90년대 스니커즈에서 영감을 받아 탄생한 AL8은<br />
패브릭 스우시 로고를 포인트로, 노스텔지어 무드와<br />
현대적인 감각이 완벽하게 어우러진 모델입니다.<br />
<br />
스트라이프 반팔과 얇은 후디의 레이어드 연출로<br />
시선을 사로잡고, 여기에 힘을 뺀 스웻 오버팬츠와 모자를 더해<br />
무심한 듯 멋스러운 스타일을 완성할 수 있습니다.</p>
</div>
<div class="art-content-inner cnt2">
<div class="img-wrap ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728610458458.jpg" /></div>
<div class="img-wrap ani delay"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728610458616.jpg" /></div>
</div>
<div class="art-content-inner cnt3">
<div class="swiper swiper1 ani">
<div class="swiper-wrapper">
<div class="swiper-slide"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728544784796.jpg" /></div>
<div class="swiper-slide"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728544794351.jpg" /></div>
<div class="swiper-slide"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728544794440.jpg" /></div>
</div>
<div class="swiper-pagination"> </div>
</div>
</div>
<div class="art-content-inner cnt4">
<div class="img-wrap-1 ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728610532268.jpg" /> <span class="caption-1 txt"></span> <span class="caption-2 txt"></span></div>
<div class="flex-wrap ani">
<div class="img-wrap-2"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728610532490.jpg" /></div>
<p class="sub-txt">러닝화에서 출발한 이니시에이터는<br />
미니멀한 모노톤부터 맥시멀한 컬러웨이로<br />
취향에 따라 선택하기 좋아요. 여기에 후드티와<br />
봄버 재킷을 함께 매치하면, 드라마 속 90년대<br />
캠퍼스의 청춘, 향수가 전해지는 듯합니다.<br />
<br />
빅 나이키 로우는 빈티지 농구화 실루엣으로,<br />
미니멀한 색감의 스웻 셋업과 비니로 스트릿을<br />
가미한 레트로 스타일을 완성해 보세요.</p>
</div>
</div>
<div class="art-content-inner cnt5">
<p class="sub-txt ani">시간이 흘러도 변치 않는 매력을 지닌<br />
레트로 바이브 스니커즈로 고민 없이<br />
가을 데일리 룩에 활기를 더해볼까요?</p>
<div class="flex-wrap ani">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728548340112.jpg" /></div>
<div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728548340124.jpg" /></div>
</div>
</div>
<div class="art-content-inner cnt6">
<div class="img-wrap ani"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728545004398.jpg" /></div>
</div>
<div class="art-content-inner credit">
<p class="sub-txt ani">콘텐츠가 마음에 들었다면 ♥를 눌러주세요.<br />
본 콘텐츠에서 소개된 브랜드의 더 많은 상품을 만나보세요.</p>
</div>
<div class="art-content-inner banner">
<div class="banner-wrap">
<div class="banner-trend" onclick="window.open('https://www.a-rt.com/display/webzine/trend');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728545053352.jpg" />
<div class="txt-wrap">
<p class="main">TREND</p>
<p class="sub">매거진 바로가기 ></p>
</div>
</div>
<div class="banner-editorial" onclick="window.open('https://abcmart.a-rt.com/product/brand/page/main?brandNo=000050&page=1');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728546523833.jpg" />
<div class="txt-wrap">
<p class="caption">BRAND</p>
<p class="main">JUST DO IT.<br />
나이키 브랜드 홈</p>
<p class="sub">전 세계 1위 브랜드</p>
</div>
</div>
<div class="banner-launching" onclick="window.open('https://abcmart.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000005232');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728545123261.jpg" />
<div class="txt-wrap">
<p class="caption">PROMOTION</p>
<p class="main">HAVE A NIKE DAY<br />
신상부터 특가까지</p>
<p class="sub">혜택이 쏟아지는 쇼핑 맛집 줄 서기!</p>
</div>
</div>
<div class="banner-style" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1732&wbznType=N');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728545123288.jpg" />
<div class="txt-wrap">
<p class="caption">DISCOVER</p>
<p class="main">패션 인플루언서<br />
나이키 스타일링.zip</p>
<p class="sub">포털, 어떻게 연출할래?</p>
</div>
</div>
<div class="banner-news" onclick="window.open('https://player.sauceclip.com/player?partnerUniqueId=abcmart&clipId=3855');"><img alt="" src="https://image.a-rt.com//art/display/webzine/202410/1728545123294.jpg" />
<div class="txt-wrap">
<p class="caption">RECOMMEND</p>
<p class="main">머리부터 발끝까지<br />
나이키 P.A.R.T.Y</p>
<p class="sub">ALWAYS, 활동적인 하루를 위해</p>
</div>
</div>
</div>
</div>
</div>
<!-- e : art-container-event --><!-- 이미지맵 반응형 스크립트 --><script>
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;
</script><!-- 스크롤 이벤트 스크립트 --><script>
$(function () {
$(window).on('scroll', function () {
const scrollY = $(this).scrollTop() + $(this).height() * 0.7;
$('.ani').each(function () {
if (scrollY > $(this).offset().top) $(this).addClass('active');
else $(this).removeClass('active');
});
});
});
</script><!-- 음소거 제어 스크립트 --><script>
function handleMute() {
const video = document.getElementById('videoPlayer');
const btn = document.getElementById('soundBtn');
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
btn.classList.toggle('active');
btn.querySelector('.blind').innerText = video.muted ? '음소거 해제' : '음소거';
}
</script><!-- 버튼 슬라이드 스크립트 --><script>
$(function () {
$('.swiper').each(function (i) {
$(this)
.find('.swiper-pagination')
.addClass('type' + i);
const mySwiper = new Swiper($(this), {
slidesPerView: 1,
speed: 1500,
allowTouchMove: true,
loop: $('.swiper-slide').length > 1,
watchOverflow: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: $(this).find('.swiper-pagination.type' + i),
clickable: true,
},
});
});
});
</script><!-- E : 이벤트 복사영역 여기까지 --><img alt="" src="https://image.a-rt.com/art/editor/202406/1720054159226.jpg" style="width: 1920px; height: 50px;" />
