<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); body { margin: 0; padding: 0; } .art-container-event { width: 100%; max-width: 1200px; background: #ffffff; color: #000000; font-family: Pretendard, sans-serif !important; position: relative; margin: 0 auto; text-align: center; overflow: hidden; } .art-content-inner { position: relative; width: 100%; margin: 0 auto; } .art-content-inner img { display: block; width: 100%; } .art-content-inner p, .art-content-inner ul { margin: 0; padding: 0; } .art-content-inner li { list-style: none; } /* content */ .mv { position: relative; overflow: hidden; } .copy_wrap { padding: 80px 0; background-color: #4B3836; color: #ffffff; } .copy_ttl { font-size: 24px; font-weight: 400; line-height: 40px; } .copy_img { max-width: 338px; margin: 0 auto !important; } .copy_txt { margin-top: 20px !important; font-size: 20px; font-weight: 300; line-height: 33px; letter-spacing: -0.4px; } .content01 { padding: 80px 0; background-color: #BEA8A3; } .content_sub_ttl { font-size: 25px; font-weight: 500; line-height: 40px; color: #7B5747; } .content_main_ttl { margin-top: 10px !important; font-size: 42px; font-weight: 700; line-height: 54px; letter-spacing: -0.84px; color: #000000; } .content_comment_txt { margin-top: 16px !important; font-size: 20px; font-weight: 300; line-height: 36px; letter-spacing: -0.4px; color: #555555; } .content02 { padding: 80px 0; background-color: #F4E7E6; } .content02_coupon { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 363px; height: 172px; margin: 50px auto 0 !important; padding: 18px 42px 27px; background-image: url(https://image.a-rt.com/art/editor/202511/1762938058654.png); background-repeat: no-repeat; background-size: cover; color: #ffffff; box-sizing: border-box; } .content02_coupon_ttl { font-size: 20px; font-weight: 500; line-height: 1; } .content02_coupon_flex_row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; } .content02_coupon_discount { display: flex; align-items: flex-end; } .content02_coupon_discount_num { font-size: 75px; font-weight: 700; line-height: 0.8; letter-spacing: -3.75px; } .content02_coupon_discount_per { font-size: 40px; font-weight: 700; line-height: 1; } .content02_coupon_name { font-size: 20px; font-weight: 500; line-height: 1.2; text-align: right; } .content02_coupon_dl { display: flex; justify-content: center; align-items: center; gap: 6px; width: 364px; height: 80px; margin: 24px auto 0 !important; background-color: #000000; color: #ffffff; text-decoration: unset; } .content02_coupon_dl_txt { font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -0.96px; } .content02_coupon_dl_ico { width: 24px; height: 24px; } .content02 .btn-md { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 32px auto 0 !important; text-decoration: unset; } .content02_caution_img { max-width: 22px; } .content02_caution_txt { font-size: 23px; font-weight: 600; line-height: 1; color: #000000; } .content03 { padding: 80px 0; background-color: #846159; } .content03_main_ttl { font-size: 42px; font-weight: 700; line-height: 54px; letter-spacing: -0.84px; color: #ffffff; } .content03_sub_ttl_wrap { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 14px auto 0 !important; } .content03_sub_ttl_img { width: 67px; height: 67px; } .content03_sub_ttl_txt { font-size: 24px; font-weight: 500; line-height: 40px; color: #ffffff; } .content03 .swiper { max-width: 834px; margin: 60px auto 0 !important; overflow: hidden; } .content03 .swiper-txt { display: inline-block; margin-top: 36px !important; font-size: 20px; font-weight: 400; line-height: 1.58; letter-spacing: -0.4px; color: #ffffff; } .content03 .swiper-txt::before { content: ''; display: inline-block; width: 9px; height: 8px; margin-bottom: 8px; background-image: url(https://image.a-rt.com/art/editor/202511/1762938134929.png); background-size: contain; background-repeat: no-repeat; } .content03 .swiper-txt::after { content: ''; display: inline-block; width: 9px; height: 8px; margin-bottom: 8px; background-image: url(https://image.a-rt.com/art/editor/202511/1762938125155.png); background-size: contain; background-repeat: no-repeat; } .content03 .swiper .swiper-pagination { position: relative; margin-top: 46px !important; left: unset !important; bottom: unset !important; line-height: 0; } .content03 .swiper .swiper-pagination .swiper-pagination-bullet { background: rgba(221, 186, 178, 0.5); width: 10px; height: 10px; margin: 0 4px; opacity: unset; } .content03 .swiper .swiper-pagination .swiper-pagination-bullet-active { background-color: #FFE7E2; } /* modal */ .md-cnt.notice { visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Pretendard', sans-serif !important; background-color: #fff; padding: 30px; width: 800px; height: auto; z-index: 1000; } .md-cnt.notice .md-tit .main { font-size: 28px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; border-bottom: 2px solid #000; padding-bottom: 30px; } .md-cnt.notice .md-txt { font-size: 18px; letter-spacing: -0.05em; line-height: 1.8; text-align: left; padding-top: 30px; } .md-cnt.notice .md-txt ul { list-style: inside; list-style-type: '- '; text-indent: -12px; padding-left: 12px; } .md-cnt.notice .md-txt li.spot { color: #ee1c25; font-weight: 600; } .md-cnt.notice .btn-close { position: absolute; top: 30px; right: 30px; background: url('https://image.a-rt.com/art/managing/event/20230302_NIKE_AIR_MAX_DAY_CAMPAIGN/pc/md/btn2.png') no-repeat center/contain; width: 27px; height: 27px; text-indent: 100%; white-space: nowrap; overflow: hidden; } #dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; cursor: pointer; } .md-open { overflow-y: hidden; padding-right: 17px; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner"> <div class="mv"><img alt="OUTFIT OF THE MONTH OOTM Nov" src="https://image.a-rt.com/art/editor/202511/1762938154254.jpg" /></div> <div class="copy_wrap"> <p class="copy_ttl">OUTFIT OF THE MONTH</p> <div class="copy_img"><img alt="OOTM : Nov" src="https://image.a-rt.com/art/editor/202511/1762938143824.png" /></div> <p class="copy_txt">MD의 사심을 담아 매달 신상 의류 추천드려요.<br /> 기간 한정 특별 할인은 덤! 매일매일 즐겁게 코디해 보세요.</p> </div> <div class="content01"> <p class="content_sub_ttl">BENEFIT 1</p> <p class="content_main_ttl">신상품 10% 즉시 할인</p> <p class="content_comment_txt">*정상가 상품 대상</p> </div> <div class="content02"> <p class="content_sub_ttl">BENEFIT 2</p> <p class="content_main_ttl">더블 혜택 할인 쿠폰</p> <div class="content02_coupon"> <p class="content02_coupon_ttl">OOTM:Nov COUPON</p> <div class="content02_coupon_flex_row"> <p class="content02_coupon_discount"><span class="content02_coupon_discount_num">14</span> <span class="content02_coupon_discount_per">%</span></p> <p class="content02_coupon_name">신상 의류<br /> 추가 할인</p> </div> </div> <a class="content02_coupon_dl" href="javascript:abc.couponDown('3000000795')"><span class="content02_coupon_dl_txt">쿠폰 다운로드</span> <span class="content02_coupon_dl_ico"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762938068974.png" /></span> </a> <a class="btn-md" data-href="#modal1" href="javascript:void(0);"> <span class="content02_caution_img"> <img alt="" src="https://image.a-rt.com/art/editor/202511/1762938049616.png" /> </span> <span class="content02_caution_txt">유의 사항</span> </a> <!-- 모달창 --> <div aria-labelledby="mdTit1" aria-modal="true" class="md-cnt notice" id="modal1" role="dialog"> <div class="md-tit"> <h4 class="main" id="mdTit1">유의 사항</h4> </div> <div class="md-txt"> <ul> <li>쿠폰 다운로드 및 사용 기간 2025/11/14 17:00 - 2025/11/27 23:59</li> <li>쿠폰은 통합멤버십 회원 대상이며, 할인 쿠폰은 ID당 2회 다운로드 가능합니다.</li> <li>일부 상품의 경우 쿠폰 적용 대상에서 제외될 수 있습니다.</li> <li>다운로드한 쿠폰은 마이 페이지 &gt; 쇼핑 혜택 &gt; 쿠폰 리스트에서 확인 가능합니다.</li> <li>본 행사는 당사 사정에 의해 사전 고지 없이 내용 변경 및 조기 종료 될 수 있습니다.</li> <li>쿠폰을 사용하여 주문하신 후 취소/반품 하신 경우, 재발급되지 않습니다.</li> </ul> </div> <button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <div class="content03"> <p class="content03_main_ttl">이달의 추천 코디</p> <div class="content03_sub_ttl_wrap"> <div class="content03_sub_ttl_img"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762938116150.png" /></div> <p class="content03_sub_ttl_txt">MD&rsquo;S PICK</p> </div> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762938077433.png" /> <p class="swiper-txt">오버사이즈 핏의 패딩조끼와 데님 팬츠로<br /> 코 앞까지 다가온 겨울을 따뜻하고 멋스럽게 즐겨보아요.</p> </div> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762938086806.png" /> <p class="swiper-txt">스포티한 무드의 집업 가디건은 자칫 화려해 보일 수 있는<br /> 스커트와 믹스 매치되어 편안한 조화를 이룰 거예요.</p> </div> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762938096440.png" /> <p class="swiper-txt">따스한 컬러감의 반집업과, 뒷면 종아리 로고가<br /> 돋보이는 팬츠로 폭닥한 플리스 룩을 완성해보세요.</p> </div> <div class="swiper-slide"><img alt="" src="https://image.a-rt.com/art/editor/202511/1762938105615.png" /> <p class="swiper-txt">스타일과 보온성을 둘 다 포기할 수 없다면? 활용도가 높은<br /> 봄버 재킷과 패딩 소재의 팬츠를 추천드려요.</p> </div> </div> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> </div> <!-- e : art-container-event --><!-- 모달 스크립트 --><script> $(document).ready(function () { $('.btn-md').on('click', function () { const openBtn = $(this); const mdCnt = $($(this).attr('data-href')); const closeBtn = mdCnt.find('.btn-close'); const first = mdCnt.find('[data-link="first"]'); const last = mdCnt.find('[data-link="last"]'); const mainHeight = $('.art-container-event').outerHeight(); $('body').css({ height: mainHeight }).addClass('md-open'); mdCnt.siblings().attr({ 'aria-hidden': true, inert: '' }); mdCnt.before('<div id="dim"></div>'); const dim = $('#dim'); dim.stop().fadeIn().next().css('visibility', 'visible'); first.on('keydown', function (e) { if (e.shiftKey && e.keyCode === 9) { e.preventDefault(); last.focus(); } }); last.on('keydown', function (e) { if (!e.shiftKey && e.keyCode === 9) { e.preventDefault(); first.focus(); } }); closeBtn.on('click', function () { $(this).parent('.md-cnt').find('iframe').attr('src', $(this).parent('.md-cnt').find('iframe') .attr('src')); $('body').css({ height: '' }).removeClass('md-open'); dim.stop().fadeOut(function () { $(this).remove(); }); mdCnt.css('visibility', 'hidden').siblings().removeAttr('aria-hidden inert'); openBtn.focus(); }); dim.on('click', function () { closeBtn.trigger('click'); }); $(window).on('keydown', function (e) { if (e.keyCode === 27) closeBtn.click(); }); }); }); </script><!-- 버튼 슬라이드 스크립트 --><script> $(function () { const target = document.querySelector('.swiper'); if (!target) return; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting && !target.classList.contains('initialized')) { target.classList.add('initialized'); $('.swiper').each(function (i) { $(this).find('.swiper-pagination').addClass('type' + i); const mySwiper = new Swiper($(this)[0], { slidesPerView: 1, speed: 1000, allowTouchMove: true, loop: $('.swiper-slide').length > 1, watchOverflow: true, autoplay: { delay: 3000, disableOnInteraction: false, }, spaceBetween: 10, pagination: { el: $(this).find('.swiper-pagination.type' + i), clickable: true, }, }); function updateSpaceBetween() { const vw = window.innerWidth; const baseSpace = mySwiper.originalSpaceBetween || mySwiper.params.spaceBetween; if (vw <= 720) { const converted = (baseSpace / 720) * vw; mySwiper.params.spaceBetween = converted; } else { mySwiper.params.spaceBetween = baseSpace; } mySwiper.update(); } mySwiper.originalSpaceBetween = mySwiper.params.spaceBetween; updateSpaceBetween(); $(window).on('resize', updateSpaceBetween); }); observer.unobserve(entry.target); } }); }, { threshold: 0.3 }); observer.observe(target); }); </script><!-- E : 이벤트 복사영역 여기까지 -->