<!-- S : 이벤트 복사영역 여기서부터 --> <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; } .art-container-event { background: #000000; 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 { position: relative; width: 100%; overflow: hidden; } .copy_wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 72px 0; background-color: #77865B; } .copy_ttl { font-size: 40px; font-weight: 600; line-height: 1; color: #ffffff; } .copy_txt { font-size: 25px; font-weight: 300; line-height: 40px; letter-spacing: -1px; color: #ffffff; } .content_intro { padding: 80px 0 50px; background-image: url(https://image.a-rt.com/art/editor/202510/1760506691463.png); background-repeat: no-repeat; background-size: cover; } .content_intro_img01 { max-width: 314px; margin: 0 auto !important; } .content_intro_txt { margin-top: 34px !important; font-size: 25px; font-weight: 400; line-height: 1.6; letter-spacing: -1px; color: #000000; } .content_intro_video_wrap { width: 403px; height: 578px; margin: 40px auto 0 !important; padding: 26px 0 132px; line-height: 0; background-image: url(https://image.a-rt.com/art/editor/202510/1760507106812.png); background-repeat: no-repeat; background-size: cover; } .content_intro_video_wrap video { width: 320px; height: 425px; } .content00 { padding: 80px 0 131px; background-color: #382925; } .content00_sub_ttl { width: 148px; margin: 0 auto !important; font-size: 25px; font-weight: 600; line-height: 2.16; color: #ffffff; border-bottom: 0.14vw solid #ffffff; } .content00_main_ttl { margin-top: 34px !important; font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -1.26; color: #ffffff; } .content00_main_txt { margin-top: 5px !important; font-size: 25px; font-weight: 500; line-height: 2.16; letter-spacing: -0.75px; color: #ffffff; } .content00_coupon_img { position: relative; max-width: 394px; margin: 38px auto 0 !important; } .content00_coupon_img::after { content: ''; position: absolute; width: 94px; height: 94px; top: -35px; right: -18px; background-image: url(https://image.a-rt.com/art/editor/202510/1760507152446.png); background-repeat: no-repeat; background-size: cover; } .content00_coupon_dl { display: flex; justify-content: center; align-items: center; gap: 6px; width: 364px; height: 67px; margin: 38px auto 0 !important; font-size: 24px; font-weight: 500; line-height: 1; letter-spacing: -0.96px; background-color: #A27E69; color: #ffffff; text-decoration: unset; } .content00_coupon_dl_img { max-width: 24px; } .content00_coupon_period_wrap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; width: 497px; margin: 67px auto 0 !important; } .content00_coupon_period_txt_wrap { display: flex; justify-content: center; align-items: center; gap: 18px; } .content00_coupon_period_ttl { display: flex; justify-content: center; align-items: center; width: 148px; height: 46px; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.48px; background-color: #000000; border-radius: 6px; } .content00_coupon_period_txt { font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: -1.04px; color: #EDDFD3; } .content00_coupon_period_txt span { font-weight: 200; } .content00_caution_wrap { margin-top: 38px !important; } .content00_caution_ttl_wrap { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 auto !important; } .content00_caution_ttl_img { max-width: 30px; } .content00_caution_ttl { font-size: 25px; font-weight: 600; line-height: 2.16; color: #A18A77; } .content00_caution_txt_wrap { display: flex; justify-content: center; align-items: center; margin: 10px auto 0 !important; font-size: 20px; font-weight: 400; line-height: 1.5; color: #A18A77; } .content01_01 { position: relative; height: 862px; background-image: url(https://image.a-rt.com/art/editor/202510/1760507161495.png); background-repeat: no-repeat; background-size: cover; } .content01_01_ttl_img_wrap { position: absolute; display: flex; width: 874px; top: 0; left: 50%; transform: translateX(-50%); } .content01_01_ttl_img01 { max-width: 140px; } .content01_01_ttl_img02 { max-width: 63px; margin-top: 47px !important; margin-left: 4px; } .content01_01_ttl_img03 { max-width: 83px; margin-top: 47px !important; margin-left: 12px; } .content01_01_ttl { position: absolute; width: 874px; margin-left: 36px; top: 119px; left: 50%; transform: translateX(-50%); font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -1.26px; text-align: left; } .content01_01_img_wrap { position: absolute; top: 109px; left: 66%; transform: translateX(-66%); } .content01_01_img01 { position: relative; max-width: 242px; } .content01_01_img01 img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25)); } .content01_01_img02 { position: relative; max-width: 267px; margin-top: -43px; } .content01_01_img02 img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25)); } .content02_01 { position: relative; height: 862px; background-image: url(https://image.a-rt.com/art/editor/202510/1760507234129.png); background-repeat: no-repeat; background-size: cover; } .content02_01_ttl_img_wrap { position: absolute; display: flex; width: 874px; top: 0; left: 50%; transform: translateX(-50%); } .content02_01_ttl_img01 { max-width: 140px; } .content02_01_ttl_img02 { max-width: 153px; margin-top: 47px !important; margin-left: 5px; } .content02_01_ttl_img03 { max-width: 70px; margin-top: 47px !important; margin-left: 12px; } .content02_01_ttl { position: absolute; width: 874px; margin-left: 36px; top: 119px; left: 50%; transform: translateX(-50%); font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -1.26px; text-align: left; } .content02_01_img_wrap { position: absolute; top: 131px; left: 66%; transform: translateX(-66%); } .content02_01_img01 { position: relative; max-width: 242px; } .content02_01_img01 img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25)); } .content02_01_img02 { position: relative; max-width: 267px; margin-top: -43px; } .content02_01_img02 img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25)); } .content03_01 { position: relative; height: 862px; background-image: url(https://image.a-rt.com/art/editor/202510/1760507306155.png); background-repeat: no-repeat; background-size: cover; } .content03_01_ttl_img_wrap { position: absolute; display: flex; width: 874px; top: 0; left: 50%; transform: translateX(-50%); } .content03_01_ttl_img01 { max-width: 140px; } .content03_01_ttl_img02 { max-width: 109px; margin-top: 47px !important; margin-left: 5px; } .content03_01_ttl { position: absolute; width: 874px; margin-left: 36px; top: 119px; left: 50%; transform: translateX(-50%); font-size: 42px; font-weight: 700; line-height: 1.29; letter-spacing: -1.26px; text-align: left; } .content03_01_img_wrap { position: absolute; top: 438.19px; left: 66%; transform: translateX(-66%); } .content03_01_img01 { position: relative; max-width: 289px; } .content03_01_img01 img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25)); } .content03_01_img02 { position: relative; max-width: 267px; margin-top: -43px; } .content03_01_img02 img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25)); } /* 애니메이션 */ .animationSection.animation01 { position: relative; width: 403px; height: 618px; margin: 0 auto; } .animationSection.animation02 { position: relative; width: 242px; height: 349px; margin: 0 auto; } .animationSection.animation03 { position: relative; width: 267px; height: 322px; margin: 0 auto; } .animationSection.animation04 { position: relative; width: 242px; height: 349px; margin: 0 auto; } .animationSection.animation05 { position: relative; width: 267px; height: 322px; margin: 0 auto; } .animationSection.animation06 { position: relative; width: 289px; height: 377px; margin: 0 auto; } /* footer */ .footer { padding: 182px 0 258px; background-color: #000000; } .footer .btn { font-size: 20px; font-weight: bold; width: 800px; height: 80px; box-sizing: border-box; display: flex; text-align: center; align-items: center; justify-content: center; border: 2px solid #ffffff; transition: .3s ease; text-decoration: none; color: #ffffff; background-color: #000000; margin: 0 auto; } .footer .btn:hover { color: #000000; background: #ffffff; } .footer .btn .ico { display: inline-block; width: 28px; height: 28px; margin-left: 8px; background: url(https://image.a-rt.com/art/editor/202510/1760507374654.png) center/cover no-repeat; transition: .3s ease; } .footer .btn:hover .ico { background: url(https://image.a-rt.com/art/editor/202510/1760507380621.png) center/cover no-repeat; } .footer .copy { margin: 0; padding: 60px 0 0; text-align: center; font-size: 22px; color: #D3D3D3; } .footer .copy .attention { font-weight: bold; color: #ffffff; } </style> <!-- s : art-container-event --> <div class="art-container-event"> <div class="art-content-inner"> <div class="mv"><img alt="SEASONAL FOCUS EP.3 가을 무드 닥터마틴 룩 Autumn Daily Look" src="https://image.a-rt.com/art/editor/202510/1760507394061.jpg" /></div> <div class="copy_wrap"> <p class="copy_ttl">SEASONAL FOCUS</p> <p class="copy_txt">시즌 무드를 반영한<br /> 카테고리별 감도 높은 큐레이션</p> </div> <div class="content_intro"> <div class="content_intro_img01"><img alt="with Dr.Martens Style Note" src="https://image.a-rt.com/art/editor/202510/1760507096690.png" /></div> <p class="content_intro_txt">계절을 닮은 클래식 무드의 로퍼부터 빈티지한 스웨이드 부츠까지.<br /> 브랜드 닥터마틴과 함께한 데일리 룩을 지금 만나보세요.</p> <div class="animationSection animation01"> <div class="aniWrap"> <div class="aniImg aniImg01"> <div class="content_intro_video_wrap"> <video autoplay="" controls="" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3hB7EPjEgtkhCAVYfNkjCFPMxzxNx4FQQ7yAT7FIYUPO3JyhS9Nmt9wieie.mp4" /></video> </div> </div> </div> </div> </div> <div class="content00"> <p class="content00_sub_ttl">PROMOTION</p> <p class="content00_main_ttl">매거진 단독 쿠폰</p> <p class="content00_main_txt">시크릿 쿠폰과 함께 가을을 준비하세요</p> <div class="content00_coupon_img"><img alt="DR.MARTENS COUPON 20% 매거진 단독 추가 할인 선착순 100명" src="https://image.a-rt.com/art/editor/202510/1760507141530.png" /></div> <a class="content00_coupon_dl" href="javascript:abc.couponDown('3000000728')"><span>쿠폰 다운로드</span> <span class="content00_coupon_dl_img"><img alt="" src="https://image.a-rt.com/art/editor/202510/1760507130107.png" /></span> </a> <div class="content00_coupon_period_wrap"> <div class="content00_coupon_period_txt_wrap"> <p class="content00_coupon_period_ttl">기간</p> <p class="content00_coupon_period_txt">25. 10. 17 ~ 25. 10. 30</p> </div> <div class="content00_coupon_period_txt_wrap"> <p class="content00_coupon_period_ttl">대상 상품</p> <p class="content00_coupon_period_txt">페이지 하단 관련상품 <span></span></p> </div> </div> <div class="content00_caution_wrap"> <p class="content00_caution_ttl_wrap"><span class="content00_caution_ttl_img"> <img alt="" src="https://image.a-rt.com/art/editor/202510/1760507118289.png" /> </span> <span class="content00_caution_ttl"> 유의 사항 </span></p> <p class="content00_caution_txt_wrap">- 해당 쿠폰은 ID 당 최대 1회 한정 발급됩니다.<br /> - 쿠폰은 해당 기간 내 다운로드 및 사용 가능합니다.<br /> - 일부 상품은 혜택 제외될 수 있습니다.<br /> - 당사 사정으로 쿠폰 발급이 조기 종료될 수 있습니다.</p> </div> </div> <div class="content01"> <div class="content01_01"> <div class="content01_01_ttl_img_wrap"> <div class="content01_01_ttl_img01"><img alt="01" src="https://image.a-rt.com/art/editor/202510/1760507193849.png" /></div> <div class="content01_01_ttl_img02"><img alt="#939" src="https://image.a-rt.com/art/editor/202510/1760507199673.png" /></div> <div class="content01_01_ttl_img03"><img alt="#8053" src="https://image.a-rt.com/art/editor/202510/1760507206770.png" /></div> </div> <div class="content01_01_ttl">스웨이드 슈즈로<br /> 캐주얼 룩 완성하기</div> <div class="content01_01_img_wrap"> <div class="animationSection animation02"> <div class="aniWrap"> <div class="aniImg aniImg02"> <div class="content01_01_img01"><img alt="" src="https://image.a-rt.com/art/editor/202510/1760507172486.png" /></div> </div> </div> </div> <div class="animationSection animation03"> <div class="aniWrap"> <div class="aniImg aniImg03"> <div class="content01_01_img02"><img alt="" src="https://image.a-rt.com/art/editor/202510/1760507183430.png" /></div> </div> </div> </div> </div> </div> <div class="content01_02"> <div class="content01_02_img01"><img alt="빈티지한 멋이 가미된 고급 소재 부드러운 터치감에 유연한 착화감" src="https://image.a-rt.com/art/editor/202510/1760507218958.png" /></div> </div> </div> <div class="content02"> <div class="content02_01"> <div class="content02_01_ttl_img_wrap"> <div class="content02_01_ttl_img01"><img alt="02" src="https://image.a-rt.com/art/editor/202510/1760507270002.png" /></div> <div class="content02_01_ttl_img02"><img alt="#Brookline Lo" src="https://image.a-rt.com/art/editor/202510/1760507276192.png" /></div> <div class="content02_01_ttl_img03"><img alt="#1461" src="https://image.a-rt.com/art/editor/202510/1760507284120.png" /></div> </div> <div class="content02_01_ttl">레더 슈즈로<br /> 클래식 룩 완성하기</div> <div class="content02_01_img_wrap"> <div class="animationSection animation04"> <div class="aniWrap"> <div class="aniImg aniImg04"> <div class="content02_01_img01"><img alt="" src="https://image.a-rt.com/art/editor/202510/1760507247444.png" /></div> </div> </div> </div> <div class="animationSection animation05"> <div class="aniWrap"> <div class="aniImg aniImg05"> <div class="content02_01_img02"><img alt="" src="https://image.a-rt.com/art/editor/202510/1760507259259.png" /></div> </div> </div> </div> </div> </div> <div class="content02_02"> <div class="content02_02_img01"><img alt="클래식한 6홀에 고급스러운 가죽 닥터마틴의 아이코닉한 실루엣" src="https://image.a-rt.com/art/editor/202510/1760507295919.png" /></div> </div> </div> <div class="content03"> <div class="content03_01"> <div class="content03_01_ttl_img_wrap"> <div class="content03_01_ttl_img01"><img alt="03" src="https://image.a-rt.com/art/editor/202510/1760507347322.png" /></div> <div class="content03_01_ttl_img02"><img alt="#REEDER" src="https://image.a-rt.com/art/editor/202510/1760507356570.png" /></div> </div> <div class="content03_01_ttl">하이브리드 슈즈로<br /> 놈코어 룩 완성하기</div> <div class="content03_01_img_wrap"> <div class="animationSection animation06"> <div class="aniWrap"> <div class="aniImg aniImg06"> <div class="content03_01_img01"><img alt="" src="https://image.a-rt.com/art/editor/202510/1760507316262.png" /></div> </div> </div> </div> </div> </div> <div class="content03_02"> <div class="content03_02_img01"><img alt="소재의 변주로 가벼워진 스타일 고유의 포멀함과 기능성을 동시에" src="https://image.a-rt.com/art/editor/202510/1760507366187.png" /></div> </div> </div> <div class="footer"><a class="btn" href="https://www.a-rt.com/display/webzine/magazine">더 많은 콘텐츠 보러가기<span class="ico"></span></a> <p class="copy">콘텐츠가 마음에 들었다면 <span class="attention">좋아요</span>를 눌러주세요.</p> </div> </div> </div> <!-- e : art-container-event --><!-- 애니메이션 --><script> $(function () { $(window).on("scroll", function () { doAnimation(".animation01", { opacity: 0, bottom: "0px" }, { opacity: 1, bottom: "0px" }, 700, 0.4, 0); doAnimation(".animation02", { opacity: 0, bottom: "-50px" }, { opacity: 1, bottom: "0px" }, 700, 0.4, 0); doAnimation(".animation03", { opacity: 0, bottom: "-50px" }, { opacity: 1, bottom: "0px" }, 700, 0.4, 200); doAnimation(".animation04", { opacity: 0, bottom: "-50px" }, { opacity: 1, bottom: "0px" }, 700, 0.4, 0); doAnimation(".animation05", { opacity: 0, bottom: "-50px" }, { opacity: 1, bottom: "0px" }, 700, 0.4, 200); doAnimation(".animation06", { opacity: 0, bottom: "-50px" }, { opacity: 1, bottom: "0px" }, 700, 0.4, 0); }); function doAnimation(selector, startCSS, endCSS, duration, triggerRatio, delay) { var $section = $(selector); var $img = $section.find(".aniImg"); if ($img.length === 0) return; var ratio = (typeof triggerRatio === "number") ? triggerRatio : 0.5; var delayTime = (typeof delay === "number") ? delay : 0; var triggerPoint = $section.offset().top + ($section.outerHeight() * ratio); if ($section.data("shown") === undefined) { $section.data("shown", false); $img.css($.extend({}, startCSS, { position: "absolute" })); } if ($(window).scrollTop() + $(window).height() > triggerPoint) { if (!$section.data("shown")) { $section.data("shown", true); $img.stop(true, true) .delay(delayTime) .animate(endCSS, duration, "swing"); } } else { if ($section.data("shown")) { $section.data("shown", false); $img.stop(true, true) .delay(delayTime) .animate(startCSS, duration, "swing"); } } } $(window).trigger("scroll"); }); </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><!-- E : 이벤트 복사영역 여기까지 -->