<!-- 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%;
}
/* 기획전 상단 타이틀 영역 제거 */
.wrap .contents-wrap .top-title-wrap {
display: none !important;
}
.wrap .special-sub-wrap .sub-top {
margin-top: 0 !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.03em;
word-break: keep-all !important;
}
.art-content-inner .swiper .swiper-slide {
cursor: pointer;
}
/* 메인 로고 */
.art-content-inner.main-logo {
display: flex;
flex-direction: column;
align-items: center;
/* 타이틀 하단 공통 스타일 공백(44px) 제외 */
padding: 86px 0;
}
.art-content-inner.main-logo .img-wrap {
width: 343px;
margin-left: 30px;
}
.art-content-inner.main-logo > p {
font-size: 26px;
font-weight: 500;
line-height: 38px;
padding-top: 33px;
}
/* 메인 배너 */
.art-content-inner .swiper1 {
width: 100%;
height: 560px;
overflow: hidden;
}
.art-content-inner .swiper1 .swiper-slide {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.art-content-inner .swiper1 .swiper-slide::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
/* 메인 배너 - 텍스트 */
.art-content-inner .swiper1 .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 .swiper1 .swiper-slide .tit-wrap strong {
font-size: 58px;
font-weight: 800;
line-height: 70px;
width: 500px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.art-content-inner .swiper1 .swiper-slide .tit-wrap p {
font-size: 20px;
margin-top: 36px;
width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.art-content-inner .swiper1 .swiper-slide-active .tit-wrap {
animation: fade-in 0.8s ease-in-out forwards;
animation-delay: 0.6s;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 메인 배너 - 버튼 */
.art-content-inner .swiper1 .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 .swiper1 .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 .swiper1 .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 .swiper1 .swiper-util-wrap .swiper-button-prev,
.art-content-inner .swiper1 .swiper-util-wrap .swiper-button-next {
transform: translateY(-50%);
background-size: 100%;
margin-top: 0;
width: 8px;
height: 12px;
}
.art-content-inner .swiper1 .swiper-util-wrap .swiper-pagination {
position: relative;
bottom: auto;
color: #888;
font-size: 16px;
font-weight: bold;
width: auto;
}
.art-content-inner .swiper1 .swiper-util-wrap .swiper-pagination .swiper-pagination-current {
color: #000;
}
/* 아이콘(시리즈) */
.art-content-inner.cnt-icon {
max-width: 1200px;
padding: 170px 0 280px;
}
.art-content-inner .swiper2 .swiper-slide .img-wrap {
width: 595px;
height: 760px;
overflow: hidden;
}
.art-content-inner .swiper2 .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s;
}
.art-content-inner .swiper2 .swiper-slide:hover img {
transform: scale(1.05);
}
/* 아이콘(시리즈) - 텍스트 */
.art-content-inner .swiper2 .swiper-slide .tit-wrap {
text-align: left;
padding-top: 40px;
}
.art-content-inner .swiper2 .swiper-slide .tit-wrap strong {
font-size: 42px;
font-weight: 800;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.art-content-inner .swiper2 .swiper-slide .tit-wrap p {
font-size: 32px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 20px;
}
/* 메인 배너 - 버튼 */
.art-content-inner .swiper2 .swiper-pagination {
bottom: 170px;
height: 10px;
}
.art-content-inner .swiper2 .swiper-pagination .swiper-pagination-bullet {
background-color: #000;
width: 40px;
height: 10px;
margin: 0 5px;
border-radius: unset;
}
/* 롤링 배너 */
.art-content-inner.marquee {
display: block;
background: url('https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/marquee/bg.jpg') no-repeat;
cursor: pointer;
}
.art-content-inner.marquee .img-box {
display: flex;
align-items: center;
animation: marquee 30s linear infinite;
width: 4136px;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* 카테고리 */
.art-content-inner.cnt-ctg {
font-family: 'Montserrat', sans-serif;
max-width: 1200px;
padding: 170px 0;
}
.art-content-inner.cnt-ctg .ctg-item {
cursor: pointer;
}
.art-content-inner.cnt-ctg .ctg-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px 9px;
padding-bottom: 100px;
}
.art-content-inner.cnt-ctg .ctg-wrap .img-wrap {
overflow: hidden;
}
.art-content-inner.cnt-ctg .ctg-wrap .img-wrap img {
transition: all 0.4s;
}
.art-content-inner.cnt-ctg .ctg-wrap .ctg-item:hover .img-wrap img {
transform: scale(1.05);
}
.art-content-inner.cnt-ctg .ctg-wrap .tit-wrap {
font-size: 20px;
font-weight: 800;
line-height: 1;
padding-top: 30px;
}
.art-content-inner.cnt-ctg .ctg-wrap .ctg-item:hover .tit-wrap {
color: #00d463;
text-decoration: underline;
}
.art-content-inner.cnt-ctg .ctg-wrap-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
}
.art-content-inner.cnt-ctg .ctg-wrap-2 .ctg-item {
position: relative;
border-radius: 50%;
overflow: hidden;
}
.art-content-inner.cnt-ctg .ctg-wrap-2 .tit-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 28px;
font-weight: 800;
z-index: 2;
}
.art-content-inner.cnt-ctg .ctg-wrap-2 .img-wrap img {
transition: all 0.4s;
}
.art-content-inner.cnt-ctg .ctg-wrap-2 .ctg-item:hover .img-wrap img {
transform: scale(1.05);
}
.art-content-inner.cnt-ctg .ctg-wrap-2 .ctg-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.4s;
z-index: 1;
}
.art-content-inner.cnt-ctg .ctg-wrap-2 a:hover::after {
background-color: rgba(0, 0, 0, 0.5);
}
/* 채널 배너 */
.art-content-inner.banner {
display: flex;
gap: 1px;
padding-bottom: 170px;
}
.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 {
display: flex;
align-items: center;
justify-content: center;
}
.art-content-inner.video .video-wrap {
width: 1200px;
}
.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%;
}
/* 매거진 */
.art-content-inner.cnt-mgz {
max-width: 1200px;
padding: 170px 0;
}
.art-content-inner.cnt-mgz .mgz-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 9px;
}
.art-content-inner.cnt-mgz .mgz-wrap .mgz-item {
width: 394px;
cursor: pointer;
}
.art-content-inner.cnt-mgz .mgz-wrap .img-wrap {
overflow: hidden;
}
.art-content-inner.cnt-mgz .mgz-wrap img {
transition: all 0.4s;
}
.art-content-inner.cnt-mgz .mgz-wrap .mgz-item:hover img {
transform: scale(1.05);
}
.art-content-inner.cnt-mgz .mgz-wrap .tit-wrap {
text-align: left;
}
.art-content-inner.cnt-mgz .mgz-wrap .tit-wrap p {
color: #999;
font-size: 20px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 40px 0 24px;
}
.art-content-inner.cnt-mgz .mgz-wrap .tit-wrap h2 {
font-size: 34px;
font-weight: 800;
line-height: 44px;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.art-content-inner.cnt-mgz .mgz-wrap .mgz-item:hover .tit-wrap h2 {
text-decoration: underline;
text-decoration-thickness: 2px;
}
/* SNS 배너 */
.art-content-inner.sns-banner {
display: grid;
grid-template-columns: repeat(2, 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: 21px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
transition: all 0.4s;
cursor: pointer;
}
.art-content-inner.sns-banner .link-wrap .img-wrap img {
height: 120px;
}
.art-content-inner.sns-banner .link-wrap .tit-wrap {
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">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/main-logo.png" /></div>
<p>100년 이상의 역사를 자랑하는 글로벌 러닝화.<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=1850&wbznType=L');" style="background-image: url('https://image.a-rt.com/art/editor/202503/1742286281725.jpg')"><!-- 검정색 텍스트 사용 시, 하단 'tit-wrap'옆에 'black' 추가 -->
<div class="tit-wrap"><strong>ENDORPHIN<br />
ELITE 2 </strong>
<p>한계를 넘는 최고의 퍼포먼스</p>
</div>
</div>
<!-- 2번 슬라이드 -->
<div class="swiper-slide" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1836&contentsType=10016&wbznType=N');" style="background-image: url('https://image.a-rt.com/art/editor/202503/1742286301412.jpg')">
<div class="tit-wrap"><strong>GUIDE 18<br />
LAUNCHING </strong>
<p>부드러움과 안정감을 동시에</p>
</div>
</div>
<!-- 3번 슬라이드 -->
<div class="swiper-slide" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1847&wbznType=L');" style="background-image: url('https://image.a-rt.com/art/editor/202503/1742286321762.jpg')">
<div class="tit-wrap"><strong>RIDE 18<br />
LAUNCHING </strong>
<p>완벽에 가까운 쿠셔닝</p>
</div>
</div>
</div>
<div class="swiper-util-wrap">
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
<div class="swiper-pagination"> </div>
</div>
</div>
</div>
<!-- 아이콘(시리즈) -->
<div class="art-content-inner cnt-icon">
<h1 class="sub-title">MEET OUR ICONS</h1>
<div class="swiper swiper2">
<div class="swiper-wrapper"><!-- 1번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent1'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287490998.jpg" /></div>
<div class="tit-wrap"><strong>타이드 2</strong>
<p>일상속에서 느끼는 최상의 쿠션감</p>
</div>
</div>
<!-- 2번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent2'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287463266.jpg" /></div>
<div class="tit-wrap"><strong>랜서 3</strong>
<p>라이프 스타일의 러닝화</p>
</div>
</div>
<!-- 3번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent3'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287512972.jpg" /></div>
<div class="tit-wrap"><strong>허리케인 24</strong>
<p>안정적이고 부드러운 쿠셔닝</p>
</div>
</div>
<!-- 4번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent4'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287543503.jpg" /></div>
<div class="tit-wrap"><strong>엔돌핀 스피드 4</strong>
<p>업그레이드 된 안정성과 반발력</p>
</div>
</div>
<!-- 5번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent5'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287566586.jpg" /></div>
<div class="tit-wrap"><strong>엔돌핀 프로 4</strong>
<p>완벽한 러닝을 위한 편안한 착용감</p>
</div>
</div>
<!-- 6번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent6'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287363809.jpg" /></div>
<div class="tit-wrap"><strong>엔돌핀 엘리트 2</strong>
<p>한계를 넘는 최고의 퍼포먼스</p>
</div>
</div>
<!-- 7번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent7'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287582870.jpg" /></div>
<div class="tit-wrap"><strong>트라이엄프 22</strong>
<p>시그니처 폼이 더 업그레이드된 러닝화</p>
</div>
</div>
<!-- 8번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent8'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287397696.jpg" /></div>
<div class="tit-wrap"><strong>가이드 18</strong>
<p>맥시멈 쿠셔닝 트레이닝 슈즈</p>
</div>
</div>
<!-- 9번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent9'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287409280.jpg" /></div>
<div class="tit-wrap"><strong>라이드 18</strong>
<p>편안한 착화감을 완성하는 디테일</p>
</div>
</div>
<!-- 10번 슬라이드 -->
<div class="swiper-slide" onclick="location.href='#prodContent10'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742287601794.jpg" /></div>
<div class="tit-wrap"><strong>액손 3</strong>
<p>더 빨라진 거침없는 추진력</p>
</div>
</div>
</div>
<div class="swiper-pagination"> </div>
</div>
</div>
<!-- 롤링 배너 -->
<div class="art-content-inner marquee">
<div class="img-box" onclick="window.open('https://grandstage.a-rt.com/promotion/planning-display/detail?plndpNo=2000004004');">
<div><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/marquee/obj.png" /></div>
<div class="clone"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/marquee/obj.png" /></div>
<div class="clone"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/marquee/obj.png" /></div>
<div class="clone"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/marquee/obj.png" /></div>
</div>
</div>
<!-- 카테고리 -->
<div class="art-content-inner cnt-ctg">
<h1 class="sub-title">CATEGORY</h1>
<div class="ctg-wrap">
<div class="ctg-item" onclick="location.href='#prodContent11'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288782202.jpg" /></div>
<p class="tit-wrap">ENDORPHINS</p>
</div>
<div class="ctg-item" onclick="location.href='#prodContent12'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288791808.jpg" /></div>
<p class="tit-wrap">CUSHIONED</p>
</div>
<div class="ctg-item" onclick="location.href='#prodContent13'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288799946.jpg" /></div>
<p class="tit-wrap">FAST & LIGHT</p>
</div>
<div class="ctg-item" onclick="location.href='#prodContent14'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288808851.jpg" /></div>
<p class="tit-wrap">STABILITY</p>
</div>
<div class="ctg-item" onclick="location.href='#prodContent15'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288818560.jpg" /></div>
<p class="tit-wrap">TRAIL</p>
</div>
<div class="ctg-item" onclick="location.href='#prodContent16'">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288828167.jpg" /></div>
<p class="tit-wrap">LIFE STYLE</p>
</div>
</div>
<div class="ctg-wrap-2">
<div class="ctg-item" onclick="location.href='#prodContent17'">
<p class="tit-wrap">MEN</p>
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288847775.jpg" /></div>
</div>
<div class="ctg-item" onclick="location.href='#prodContent18'">
<p class="tit-wrap">WOMEN</p>
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288857654.jpg" /></div>
</div>
<div class="ctg-item" onclick="location.href='#prodContent19'">
<p class="tit-wrap">APPAREL<br />
&<br />
ACC</p>
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742288867156.jpg" /></div>
</div>
</div>
</div>
<!-- 채널 배너 -->
<div class="art-content-inner banner"><a class="banner-gs" href="https://grandstage.a-rt.com/product/brand/page/main?brandNo=000062" target="_blank"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/banner/gs.png" /> </a> <a class="banner-abc" href="https://abcmart.a-rt.com/product/brand/page/main?ntab&brandNo=000062" target="_blank"> <img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/banner/abc.png" /> </a></div>
<!-- 비디오 -->
<div class="art-content-inner video">
<div class="video-wrap">
<div class="video-ratio"><iframe src="https://play.wecandeo.com/playlist/?playlistKey=n4ACCxv8QZZ7W8WXRufqMisdnpA8I43sqQCu51iiopoJwie&playerKey=GH4f7mv0FtxhisK1vepXXIAieie"></iframe></div>
</div>
</div>
<!-- 매거진 -->
<div class="art-content-inner cnt-mgz">
<h1 class="sub-title">MAGAZINE</h1>
<div class="mgz-wrap">
<div class="mgz-item" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1850&wbznType=L');">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742361324015.jpg" /></div>
<div class="tit-wrap">
<p>TREND</p>
<h2>최상의 레이싱 퍼포먼스<br />
엔돌핀 엘리트 2</h2>
</div>
</div>
<div class="mgz-item" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1836&contentsType=10016&wbznType=N');">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742361335987.jpg" /></div>
<div class="tit-wrap">
<p>TREND</p>
<h2>편안함과 부드러운 착용감<br />
가이드 18</h2>
</div>
</div>
<div class="mgz-item" onclick="window.open('https://www.a-rt.com/display/webzine/detail/main?wbznSeq=1847&wbznType=L');">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/editor/202503/1742361348521.jpg" /></div>
<div class="tit-wrap">
<p>TREND</p>
<h2>완성된 쿠셔닝<br />
라이드 18</h2>
</div>
</div>
</div>
</div>
<!-- SNS 배너 -->
<div class="art-content-inner sns-banner">
<div class="link-wrap" onclick="window.open('https://grandstage.a-rt.com/display/category/main?genderGbnCode=10001&ctgrNo=1000000288');">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/sns-banner/01.png" /></div>
<p class="tit-wrap">러닝화 더보기</p>
</div>
<div class="link-wrap" onclick="window.open('https://www.youtube.com/channel/UCc4F7KUbGaEGIw3wrukaZpQ');">
<div class="img-wrap"><img alt="" src="https://image.a-rt.com/art/managing/event/20240112_saucony_guide/pc/sns-banner/02.png" /></div>
<p class="tit-wrap">유튜브</p>
</div>
</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/event/20240112_saucony_guide/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,
'margin-left': -(width_size - 1200) / 2,
});
}
}
</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: $('.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 ($('.swiper-slide').length <= 1) {
$(this).find('.swiper-util-wrap').css('display', 'none');
}
});
$('.swiper2').each(function (i) {
$(this)
.find('.swiper-pagination')
.addClass('type' + i);
const mySwiper2 = new Swiper($(this), {
slidesPerView: 2,
spaceBetween: 10,
speed: 1500,
allowTouchMove: true,
loop: $('.swiper-slide').length > 1,
watchOverflow: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: $(this).find('.swiper-pagination.type' + i),
clickable: true,
},
});
});
});
</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 : 이벤트 복사영역 여기까지 -->