<style type="text/css">a.btn-showcase-event{display: none;} .wrap .contents-wrap.showcase-wrap .showcase-body-wrap .interaction-wrap .interaction-inner .interaction-slider .slider-item .slider-item-inner .slide-bg .background img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: 50% 50% no-repeat; background-size: auto 100%;}</style><div class="interaction-inner" data-auto-play="true"><div class="interaction-slider swiper-container"><div class="swiper-wrapper"><!-- s : 동영상 케이스 : 동영상 BGM 있는 케이스(mp3 bgm fade out) --><div class="swiper-slide slider-item"><div class="slider-item-inner"><div class="slide-bg video use-bgm"><div class="background"><video playsinline=""><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3au9fTeWdCtUogvccG8oLXfMxzxNx4FQQ2OrKwaA0mipHstOR4iibeUTQieie.mp4" type="video/mp4" /></video></div></div></div></div><!-- e : 동영상 케이스 : 동영상 BGM 있는 케이스(mp3 bgm fade out) --><!-- s : 이미지 중첩 노출 --><div class="swiper-slide slider-item"><div class="slider-item-inner"><div class="slide-bg stack" style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378480475.jpg); background-size: auto 100%;"><div class="background"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630378261020.png" /></div><div class="background" data-duration="1500"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630378278522.jpg" /></div><div class="background" data-delay="1800" data-duration="1000"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630378296160.jpg" /></div></div></div></div><!-- e : 이미지 중첩 노출 --><!-- s : 페이드 인 아웃 --><div class="swiper-slide slider-item"><div class="slider-item-inner"><div class="slide-bg fade"><div class="background" data-style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378312299.jpg); background-size: auto 100%;">&nbsp;</div><div class="background" data-style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378337764.jpg); background-size: auto 100%;">&nbsp;</div><div class="background" data-style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378364695.jpg); background-size: auto 100%;">&nbsp;</div><div class="background" data-style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378350950.jpg); background-size: auto 100%;">&nbsp;</div><div class="background" data-style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378377271.jpg); background-size: auto 100%;">&nbsp;</div></div></div></div><!-- e : 페이드 인 아웃 --><!-- s : 이미지 중첩 노출 --><div class="swiper-slide slider-item"><div class="slider-item-inner"><div class="slide-bg stack" style="background-image: url(https://image.a-rt.com/art/editor/202108/1630378416365.jpg); background-size: auto 100%;"><div class="background"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630378391581.png" /></div><div class="background" data-delay="1500" data-duration="1500"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630378441287.jpg" /></div></div></div></div><!-- e : 이미지 중첩 노출 --></div></div><a class="btn-showcase-event" href="">Event</a></div>
<div class="interaction-sub-wrap"><style type="text/css">/* 세로 1080인 디자인 기준 여백, 폰트사이즈 vh값으로 설정 (여백 또는 폰트사이즈) / 1080 * 100 예) .interaction-sub-inner의 padding-top 값은 디자인 기준 110px -> 110 / 1080 * 100 = 10.1851851... */ .wrap .contents-wrap.showcase-wrap .showcase-body-wrap .interaction-wrap .interaction-inner .interaction-slider .slider-item .slider-item-inner .slide-bg.video video{width: 101%;} .interaction-sub-inner { padding: 5.4vh 2.7777vh 0 4.6296vh; } .interaction-sub-inner .sub-title { font-size: 3.8888vh; letter-spacing: -.0972vh; font-weight: 900; line-height: 5.1851vh; font-family: "Montserrat",sans-serif; } .interaction-sub-inner .sub-desc { color: #666; font-size: 1.3888vh; letter-spacing: -0.0694vh; line-height: 2.2222vh; font-family: "Montserrat",sans-serif; } .interaction-sub-inner .sub-title + .sub-desc { margin-top: 2.7777vh; } .interaction-sub-inner .img-wrap { width: 41.4815vh; max-width: 100%; margin: 5.5555vh auto 0; } .interaction-sub-inner .img-wrap img { width: 100%; } .interaction-sub-inner .pagination-box { margin-top: 2.2222vh; text-align: right; } .interaction-sub-inner .pagination-box .swiper-pagination-bullet { width: 10px; height: 10px; background: transparent; border: 1px solid #000; margin: 0 6px 0 0; opacity: 1; } .interaction-sub-inner .pagination-box .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #000; }</style><!-- 스크립트 수정되면 따로 등록 --><script> $(function() { var swiper = new Swiper('.interaction-sub-inner .swiper-container', { loop: true, speed: 1000, parallax: true, autoplay: { delay: 2500, disableOnInteraction: false, }, watchSlidesProgress: true, slidesPerView: 1, pagination: { el: '.interaction-sub-inner .swiper-container .pagination-box', clickable: true, }, }); }); </script><!-- 여기까지 --><div class="interaction-sub-inner"><p class="sub-title">ADIDAS</p><p class="sub-title">LOVE YOUR CITY</p><p class="sub-desc">우리가 사랑하는 이 도시를 더욱 사랑스럽게,</p><p class="sub-desc">#러브유어시티 #시티마라톤</p><div class="img-wrap"><div class="swiper-container"><ul class="swiper-wrapper"> <li class="swiper-slide"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630377718430.jpg" /></li> <li class="swiper-slide"><img alt="대체 텍스트" src="https://image.a-rt.com/art/editor/202108/1630377736830.jpg" /></li></ul><div class="pagination-box">&nbsp;</div></div></div></div></div>