<!-- S : 이벤트 복사영역 여기서부터 --> <style type="text/css">/* 웹폰트 설정 */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); /* 레이아웃 */ .art-container-event { position: relative; width: 100%; max-width: 1920px; margin: 0 auto; text-align: center; overflow: hidden; } .art-content-inner { position: relative; margin: 0 auto; overflow: hidden; word-break: keep-all; font-family: Pretendard, sans-serif !important; width: 100%; } .art-content-inner img { display: block; width: 100%; } /* 기획전 상단 타이틀 영역 제거 */ :is(.wrap .contents-wrap) .top-title-wrap, .breadcrumb-wrap { display: none !important; } /* 공통 */ .art-content-inner .sub-title { font-family: 'Montserrat', sans-serif; font-size: 54px; font-weight: 900; letter-spacing: -0.01em; padding-bottom: 50px; } .art-content-inner :is(p, strong, span, h2, h3, button) { letter-spacing: -0.01em; word-break: keep-all !important; } .art-content-inner .swiper .swiper-slide { cursor: pointer; } /* 메인 로고 */ .art-content-inner.main-logo { background: url('https://image.a-rt.com/art/managing/template/danner/pc/main-logo.png') no-repeat 50% 0; background-size: 158px 69px; /* 상세 최상단 여백(44px) 제외 + 로고 영역 높이(69px) 추가 */ margin: 86px 0 130px; padding-top: 69px; } .art-content-inner.main-logo > p { font-size: 26px; font-weight: 500; line-height: 38px; margin-top: 40px; } /* 메인 배너 */ .art-content-inner.main-banner .swiper { width: 100%; height: 560px; overflow: hidden; } .art-content-inner.main-banner .swiper .swiper-slide { background-size: cover; background-repeat: no-repeat; background-position: center; } .art-content-inner.main-banner .swiper .swiper-slide::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .art-content-inner.main-banner .swiper .swiper-slide .tit-wrap { position: absolute; top: 150px; left: 50%; margin-left: -600px; color: #fff; text-align: left; opacity: 0; z-index: 1; } .art-content-inner.main-banner .swiper .swiper-slide .tit-wrap .main-tit { font-size: 58px; font-weight: 800; line-height: 70px; } .art-content-inner.main-banner .swiper .swiper-slide .tit-wrap .sub-tit { font-size: 20px; margin-top: 36px; } @keyframes fade-in { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } .art-content-inner.main-banner .swiper .swiper-slide-active .tit-wrap { animation: fade-in 0.8s ease-in-out forwards; animation-delay: 0.6s; } .art-content-inner.main-banner .swiper .swiper-util-wrap { position: absolute; bottom: 120px; left: 50%; margin-left: -600px; display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 26px; width: 128px; height: 52px; z-index: 1; } .art-content-inner.main-banner .swiper .swiper-util-wrap .swiper-button-prev { background: url('https://image.a-rt.com/art/managing/event/20220114_kidsmart/pc/ico_prev.png') no-repeat; left: 20px; } .art-content-inner.main-banner .swiper .swiper-util-wrap .swiper-button-next { background: url('https://image.a-rt.com/art/managing/event/20220114_kidsmart/pc/ico_next.png') no-repeat; right: 20px; } .art-content-inner.main-banner .swiper .swiper-util-wrap .swiper-button-prev, .art-content-inner.main-banner .swiper .swiper-util-wrap .swiper-button-next { transform: translateY(-50%); background-size: 100%; margin-top: 0; width: 8px; height: 12px; } .art-content-inner.main-banner .swiper .swiper-util-wrap .swiper-pagination { position: relative; bottom: auto; color: #888; font-size: 16px; font-weight: bold; width: auto; } .art-content-inner.main-banner .swiper .swiper-util-wrap .swiper-pagination .swiper-pagination-current { color: #000; } /* 브랜드 스토리 */ .art-content-inner.cnt-brand { max-width: 1200px; padding: 150px 0 160px; } .art-content-inner.cnt-brand .img-wrap { margin-bottom: 80px; } .art-content-inner.cnt-brand p { font-size: 24px; font-weight: 500; line-height: 36px; opacity: 0; } .art-content-inner.cnt-brand .ani.active { animation: fade-in 1s ease-in-out forwards; } /* 기능 소개 */ .art-content-inner.cnt-ftr { padding: 160px 0; color: #fff; background: #000; } .art-content-inner.cnt-ftr .swiper { width: 100%; overflow: hidden; } .art-content-inner.cnt-ftr .swiper-slide .tit-wrap { color: #000; background: #fff; text-align: left; height: 246px; padding: 40px 34px; } .art-content-inner.cnt-ftr .swiper-slide .tit-wrap .main-tit { font-size: 30px; font-weight: 900; } .art-content-inner.cnt-ftr .swiper-slide .tit-wrap .sub-txt { font-size: 20px; line-height: 28px; margin-top: 26px; } /* 카테고리 */ .art-content-inner.cnt-ctg { font-family: 'Montserrat', sans-serif; max-width: 1200px; padding: 160px 0; } .art-content-inner.cnt-ctg .ctg-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .art-content-inner.cnt-ctg .ctg-wrap .tit-wrap { display: inline-block; font-size: 28px; font-weight: 700; line-height: 1; padding-top: 40px; } .art-content-inner.cnt-ctg .ctg-wrap a:hover .tit-wrap { color: #00d463; text-decoration: underline; } /* 채널 배너 */ .art-content-inner.banner { display: flex; gap: 1px; } .art-content-inner.banner [class|='banner'] { background-color: #000; transition: all 0.5s; } .art-content-inner.banner .banner-gs { width: 959px; } .art-content-inner.banner .banner-abc { width: 960px; } .art-content-inner.banner .banner-gs:hover { background-color: #568643; } .art-content-inner.banner .banner-abc:hover { background-color: #90853b; } /* 비디오 */ .art-content-inner.video { max-width: 1200px; padding: 160px 0; } .art-content-inner.video .video-ratio { position: relative; height: 0; padding-top: 56.25%; } .art-content-inner.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* SNS 배너 */ .art-content-inner.sns-banner { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid #000; border-left: 3px solid #000; } .art-content-inner.sns-banner .link-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; border-right: 3px solid #000; border-bottom: 3px solid #000; transition: all 0.4s; height: 120px; } .art-content-inner.sns-banner .link-wrap img { height: 50px; width: auto; } .art-content-inner.sns-banner .link-wrap .tit-wrap { display: inline-block; font-size: 28px; font-weight: 700; } .art-content-inner.sns-banner .link-wrap:hover { background-color: #00d463; } /* 오프라인 매장 */ .art-content-inner.offline { background-color: #000; padding: 68px 0; } .art-content-inner.offline h3 { color: #fff; font-size: 32px; line-height: 1; font-weight: 700; padding-bottom: 28px; } .art-content-inner.offline .btn-md { color: #fff; font-family: Pretendard, sans-serif !important; font-size: 24px; font-weight: 600; line-height: 54px; border: 2px solid #fff; width: 346px; transition: all 0.3s; } .art-content-inner.offline .btn-md:hover { color: #000; background-color: #00d463; border-color: #00d463; } /* 오프라인 매장 팝업 */ #dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; cursor: pointer; } .md-cnt { visibility: hidden; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1200px; z-index: 1000; } .md-cnt .btn-close { position: absolute; top: 30px; right: 30px; width: 44px; height: 44px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .md-open { overflow-y: hidden; padding-right: 17px; } </style> <!-- s : art-container-event --> <div class="art-container-event"><!-- 메인 로고 --> <div class="art-content-inner main-logo"> <p>완벽한 품질에 대한 집념과 장인 정신에서 탄생한<br /> 하이퀄리티 아웃도어 부츠 브랜드 대너.</p> </div> <!-- 메인 배너 --> <div class="art-content-inner main-banner"> <div class="swiper swiper1"> <div class="swiper-wrapper"><!-- 1번 슬라이드 --> <div class="swiper-slide" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1605&amp;wbznType=L');" style="background-image: url('https://image.a-rt.com/art/editor/202406/1718603486433.jpg')"> <div class="tit-wrap"><strong class="main-tit">대너와 데니안의<br /> 완벽한 하루 </strong> <p class="sub-tit">대너로 완성한 다양한 룩을 만나보세요.</p> </div> </div> <!-- 2번 슬라이드 --> <div class="swiper-slide" onclick="window.open('https://grandstage.a-rt.com/promotion/planning-display/detail/main?plndpNo=2000004009');" style="background-image: url('https://image.a-rt.com/art/managing/template/danner/pc/main-banner.jpg')"> <div class="tit-wrap"><strong class="main-tit">하이퀄리티 워커부츠<br /> DANNER </strong> <p class="sub-tit">비브람 아웃솔과 고어텍스를 만나보세요.</p> </div> </div> </div> <div class="swiper-util-wrap"> <div class="swiper-button-prev">&nbsp;</div> <div class="swiper-button-next">&nbsp;</div> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> <!-- 브랜드 스토리 --> <div class="art-content-inner cnt-brand"> <h1 class="sub-title">BRAND STORY</h1> <div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-brand.jpg" /></div> <p class="ani">1932년 미국 중북부 위스콘신주의 작은 마을에서<br /> 벌목꾼들이 신는 로거 부츠를 제작하며 탄생한 대너는<br /> 1936년 오리건주로 터전을 옮기면서 본격적인 성장을 이루었습니다.<br /> <br /> 워크 부츠 영역에서 쌓은 노하우와 고집스레 지켜낸 크래프트맨십은<br /> 오랜 시간 동안 대너의 명성을 굳건하게 지켜온 원동력입니다.</p> </div> <!-- 기능 소개 --> <div class="art-content-inner cnt-ftr"> <h1 class="sub-title">DANNER FEATURES</h1> <div class="swiper swiper2"> <div class="swiper-wrapper"><!-- 1번 슬라이드 --> <div class="swiper-slide"> <div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ftr/01.jpg" /></div> <div class="tit-wrap"><strong class="main-tit">GORE-TEX&reg;</strong> <p class="sub-txt">대너는 부츠 브랜드 중 최초로 방수 소재인 고어텍스를 사용했습니다.<br /> 덕분에 궂은 날씨에 신어도 거뜬한 부츠가 탄생했습니다.</p> </div> </div> <!-- 2번 슬라이드 --> <div class="swiper-slide"> <div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ftr/02.jpg" /></div> <div class="tit-wrap"><strong class="main-tit">Vibram OUTSOLE</strong> <p class="sub-txt">비브람의 아웃솔을 적용하여 어떤 지형에서도 끄떡없는<br /> 강한 내구성은 물론 편안한 착용감까지 갖추게 되었습니다.</p> </div> </div> <!-- 3번 슬라이드 --> <div class="swiper-slide"> <div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ftr/03.jpg" /></div> <div class="tit-wrap"><strong class="main-tit">STITCH DOWN PROCESS</strong> <p class="sub-txt">어퍼가 안창을 감싼 형태로 재봉하는 스티치 다운 기법을 사용하여<br /> 뒤틀리지 않고 장기간 착용해도 손상되지 않습니다.</p> </div> </div> <!-- 4번 슬라이드 --> <div class="swiper-slide"> <div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ftr/04.jpg" /></div> <div class="tit-wrap"><strong class="main-tit">FULL GRAIN LEATHER</strong> <p class="sub-txt">조직이 치밀하고 튼튼하며 유연성도 뛰어난<br /> 은면을 살려 가공한 최상급 풀 그레인 레더를 사용해<br /> 오래 신어도 자연스러운 멋을 풍깁니다.</p> </div> </div> </div> <div class="swiper-pagination">&nbsp;</div> </div> </div> <!-- 카테고리 --> <div class="art-content-inner cnt-ctg"> <h1 class="sub-title">CATEGORY</h1> <div class="ctg-wrap"><a data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="워크부츠" data-tag-title="대너전문관" href="#prodContent1"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ctg/01.png" /> <span class="tit-wrap">WORK BOOTS</span> </a> <a data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="하이킹슈즈" data-tag-title="대너전문관" href="#prodContent2"> <img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ctg/02.png" /> <span class="tit-wrap">HIKING SHOES</span> </a> <a data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="스니커즈&amp;샌들" data-tag-title="대너전문관" href="#prodContent3"> <img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/cnt-ctg/03.png" /> <span class="tit-wrap">SNEAKERS &amp; SANDAL</span> </a></div> </div> <!-- 채널 배너 --> <div class="art-content-inner banner"><a class="banner-gs" data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="상품 더보기 (GS)" data-tag-title="대너전문관" href="https://grandstage.a-rt.com/product/brand/page/main?ntab&amp;brandNo=000216&amp;page=1&amp;channel=10002&amp;chnnlNo=10002" target="_blank"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/banner/gs.png" /> </a> <a class="banner-abc" data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="상품 더보기 (ABC)" data-tag-title="대너전문관" href="https://abcmart.a-rt.com/product/brand/page/main?brandNo=000216&amp;page=1" target="_blank"> <img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/banner/abc.png" /> </a></div> <!-- 비디오 --> <div class="art-content-inner video"> <div class="video-ratio"><iframe src="https://play.wecandeo.com/playlist/?playlistKey=n4ACCxv8QZZ7W8WXRufqMisdnpA8I43sqvIFd6gLST1oie&amp;playerKey=GH4f7mv0FtxhisK1vepXXIAieie"></iframe></div> </div> <!-- SNS 배너 --> <div class="art-content-inner sns-banner"><a class="link-wrap" data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="워크부츠 더보기" data-tag-title="대너전문관" href="https://grandstage.a-rt.com/display/category/main?ntab&amp;genderGbnCode=10000&amp;page=1&amp;channel=10002&amp;chnnlNo=10002&amp;ctgrNo=1000000581" target="_blank"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/sns-banner/01.png" /> <span class="tit-wrap">워크부츠 더보기</span> </a> <a class="link-wrap" data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="인스타그램" data-tag-title="대너전문관" href="https://www.instagram.com/dannerkorea/" target="_blank"> <img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/sns-banner/02.png" /> <span class="tit-wrap">INSTAGRAM</span> </a> <a class="link-wrap" data-tag-id="2000004213" data-tag-index="click_event_element" data-tag-label="토픽" data-tag-title="대너전문관" href="https://dannerkorea.co.kr/topics/" target="_blank"> <img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/sns-banner/03.png" /> <span class="tit-wrap">DANNER TOPICS</span> </a></div> <!-- 오프라인 매장 --> <div class="art-content-inner offline"> <h3>오프라인 매장에서도 대너를 만나보세요.</h3> <button aria-haspopup="dialog" class="btn-md" data-href="#modal1" type="button">매장 재고 확인 방법</button></div> <!-- 오프라인 매장 팝업 --> <div aria-labelledby="mdTit1" aria-modal="true" class="art-content-inner md-cnt" id="modal1" role="dialog"><img alt="" src="https://image.a-rt.com/art/managing/template/danner/pc/md.jpg" /><button class="btn-close" data-link="last" type="button">닫기</button></div> </div> <!-- e : art-container-event --><!-- 1920px 스크립트 --><script> $(function () { editorCalcWidth(); }); $(window).on({ resize: function () { editorCalcWidth(); }, }); function editorCalcWidth() { var width_size = $(window).width(); if (width_size > 1200) { $('.editor-wrap').css({ width: width_size, }); } } </script><!-- 스크롤 이벤트 스크립트 --><script> $(function () { $(window).on('scroll', function () { const scrollY = $(this).scrollTop() + $(this).height() * 1; $('.ani').each(function () { if (scrollY > $(this).offset().top) $(this).addClass('active'); else $(this).removeClass('active'); }); }); }); </script><!-- 슬라이드 스크립트 --><script> $(function () { $('.swiper1').each(function (i) { $(this) .find('.swiper-pagination') .addClass('type' + i); $(this) .find("[class*='swiper-button']") .addClass('type' + i); const mainSwiper1 = new Swiper($(this), { slidesPerView: 1, speed: 900, allowTouchMove: true, loop: $('.swiper1 .swiper-slide').length > 1, watchOverflow: true, autoplay: { delay: 3000, disableOnInteraction: false, }, pagination: { el: $(this).find('.swiper-pagination.type' + i), type: 'fraction', }, navigation: { nextEl: $(this).find('.swiper-button-next.type' + i), prevEl: $(this).find('.swiper-button-prev.type' + i), }, }); if ($('.swiper1 .swiper-slide').length <= 1) { $(this).find('.swiper-util-wrap').css('display', 'none'); } }); $('.swiper2').each(function (i) { const mySwiper2 = new Swiper($(this), { slidesPerView: 2.6, spaceBetween: 30, speed: 1500, allowTouchMove: true, loop: true, loopedSlides: 4, }); }); }); </script><!-- 모달 스크립트 --><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><!-- E : 이벤트 복사영역 여기까지 -->