이전 페이지
[EDITION]
ABC SELECT DAYSOF DUAL THONG
<!-- s : 에디터 내용 입력 영역 --><style type="text/css">.interaction-footer-wrap .showcase-bgm, .interaction-footer-wrap .btn-showcase-music {display:block;} .wrap .contents-wrap.showcase-wrap .showcase-body-wrap .interaction-wrap .interaction-inner .interaction-slider .slider-item .slider-item-inner .slide-desc {left:50%;bottom:49%;transform:translate(-50%, 50%);width:100%;z-index:5;} .interaction-slider .swiper-slide:after {position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.3);content:"";z-index:3;} .interaction-slider .swiper-slide .any-area {position:absolute;left:0;width:100%;bottom:120px;top:0;} .interaction-slider .swiper-slide .slide-desc {bottom:40vh;} .interaction-slider .swiper-slide .slide-desc p span {font-family: Pretendard, -apple-system;} .interaction-slider .swiper-slide img {width:100%;} .interaction-slider .slide-num1 .slide-desc p img {width:100% !important;} .interaction-slider .slide-num1 .slide-desc p {position:absolute;left:50%;bottom:50%;width:100%;transform:translate(-50%, 50%);} .interaction-slider .slide-num1 .slide-desc p.any-txt1 {opacity:0;z-index:2;} .interaction-slider .slide-num1.swiper-slide-active .slide-desc p.any-txt1 {display:block;animation:any-num1-txt1 1s 2s both;} @keyframes any-num1-txt1 { 0% {opacity:1;} 80% {opacity:0;} 100% {opacity:0;} } .wrap .contents-wrap.showcase-wrap .showcase-body-wrap .interaction-wrap .interaction-footer-wrap .btn-showcase-music {display:none;}</style><div class="interaction-inner" data-auto-play="true"><div class="interaction-slider swiper-container"><div class="swiper-wrapper"><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/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3K43QO9A8iiSuVVtip844iihbfMxzxNx4FQQbTXDDCrsZPUfJkbLN3visrAieie.mp4" type="video/mp4" /></video></div></div></div></div><!-- s : 텍스트 시간차 노출 --><div class="swiper-slide slider-item slide-num1"><div class="slider-item-inner"><div class="slide-bg text"><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655348782480.jpg');"> </div></div><div class="slide-desc"><p class="any-txt1" data-duration="1000"><span data-style="display:block;width:100%;"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202206/1655355372393.png" /></span></p><p class="any-txt2" data-delay="2500" data-duration="1000"><span data-style="display:block;width:100%;"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202206/1655428226588.png" /></span></p><p class="any-txt3" data-delay="2000"><span> </span></p></div></div></div><!-- //e : 텍스트 시간차 노출 --><!-- s : 이미지 자동 흐름 --><div class="swiper-slide slider-item slide-num2" data-duration="12000"><div class="slider-item-inner"><div class="slide-bg img-marquee"><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353392675.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353394871.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353402964.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353400820.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353398531.jpg');"> </div></div></div></div><!-- //e : 이미지 자동 흐름 --><!-- s : 이미지 자동 흐름 --><div class="swiper-slide slider-item slide-num4" data-duration="12000"><div class="slider-item-inner"><div class="slide-bg img-marquee"><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353592754.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353595090.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353601305.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353599499.jpg');"> </div><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655353596920.jpg');"> </div></div></div></div><!-- //e : 이미지 자동 흐름 --><!-- s : 텍스트 시간차 노출 --><div class="swiper-slide slider-item"><div class="slider-item-inner"><div class="slide-bg text"><div class="background" data-style="background-image: url('https://image.a-rt.com//art/promotion/planningdisplay/202206/1655348782480.jpg');"> </div></div><div class="slide-desc"><p data-duration="1000"><span data-style="display:block;width:100%;"><img src="https://image.a-rt.com//art/promotion/planningdisplay/202206/1655360133836.png" /></span></p><p data-delay="2000"><span> </span></p></div></div></div><!-- //e : 텍스트 시간차 노출 --></div></div><!-- <a href="#" class="btn-showcase-event">Event</a> --></div><!-- e : 에디터 내용 입력 영역 -->
<!-- s : 중앙 인터렉션 영역, 에디터 내용 입력 영역 | DESC : 스크립트와 스타일 별도 작업해야 하는 부분 --><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: 10.1851vh 2.7777vh 0 4.6296vh; } .interaction-sub-inner .sub-title { font-size: 3.8888vh; letter-spacing: -.0972vh; font-weight: 900; line-height: 5.1851vh; } .interaction-sub-inner .sub-desc { color: #666; font-size: 1.3888vh; letter-spacing: -0.0694vh; line-height: 2.2222vh; } .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: 10vh; 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">ABC SELECT<br />DAYSOF DUAL THONG</p><p class="sub-desc">ABC SELECT브랜드는 ABC-MART에서<br />오랜시간의 노하우를 통해 양질의 상품을<br />생산하여 합리적인 가격으로 제공하는 브랜드 입니다.</p><div class="img-wrap"><img alt="" src="https://image.a-rt.com//art/promotion/planningdisplay/202206/1655354022903.jpg" /></div></div></div>
