<script type="text/javascript" src="/static/common/plugins/gsap/3.7.1/gsap.min.js"></script><script type="text/javascript" src="/static/common/plugins/gsap/3.7.1/ScrollTrigger.min.js"></script> <style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); /* type3 */ @media screen and (min-width: 1440px){ .trend-editer-wrap .trend-main{height: min(40.938vw,786px);} .trend-editer-wrap .trend-main .img-box{height: min(16.042vw,308px);} } @-webkit-keyframes transformAni { 0% { -webkit-transform: translateX(10px); transform: translateX(10px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes transformAni { 0% { -webkit-transform: translateX(10px); transform: translateX(10px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } } .trend-editer-wrap { min-width: 1440px; width: 100%; overflow: clip; font-family: Pretendard, sans-serif !important; } .trend-editer-wrap .inner { position: relative; width: 1420px; margin: 0 auto; } .trend-editer-wrap .trend-main { position: relative; height: 586px; min-height: 40.938vw; margin: 0 auto; padding: 70px 0 50px; } .trend-editer-wrap .trend-main .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; height: 100%; } .trend-editer-wrap .trend-main .text-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding-top: 23px; color: #fff; } .trend-editer-wrap .trend-main .text-box .text-type1 { font-size: 18px; line-height: 21px; letter-spacing: 0; height: 1lh; font-weight: 600; overflow: hidden; } .trend-editer-wrap .trend-main .text-box .text-type2 { font-size: 18px; line-height: 21px; letter-spacing: 0; height: 1lh; margin-top: auto; font-weight: 600; overflow: hidden; } .trend-editer-wrap .trend-main .img-box { width: 556px; height: 234px; } .trend-editer-wrap .trend-main .img-box img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .trend-editer-wrap .trend-main .bg-box { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; } .trend-editer-wrap .trend-main .bg-box img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .trend-editer-wrap .trend-cont { position: relative; } .trend-editer-wrap .trend-cont.content1 { z-index: 2; padding: 156px 0 200px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .trend-editer-wrap .trend-cont.content1 .text-box1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .trend-editer-wrap .trend-cont.content1 .text-box1 .text-type1 { width: 560px; height: 111px; } .trend-editer-wrap .trend-cont.content1 .text-box2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; gap: 16px; margin-top: 60px; } .trend-editer-wrap .trend-cont.content1 .text-box2 .text-type1 { font-size: 30px; line-height: 35px; letter-spacing: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 36px; font-weight: 600; } .trend-editer-wrap .trend-cont.content1 .text-box2 .text-type1::before { content: ''; display: block; width: 36px; height: 36px; margin-left: 5px; margin-right: 25px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%23fff' stroke='%23707070' data-name='Rectangle 1183'%3E%3Cpath stroke='none' d='M0 0h36v36H0z'/%3E%3Cpath fill='none' d='M.5.5h35v35H.5z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; } .trend-editer-wrap .trend-cont.content1 .text-box2 .text-type1 .checkbox { position: absolute; left: 4px; bottom: 4px; width: 44px; height: 43px; } .trend-editer-wrap .trend-cont.content1 .text-box3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 30px; } .trend-editer-wrap .trend-cont.content1 .text-box3 .text-type1 { font-size: 17px; line-height: 25px; letter-spacing: 0; } .trend-editer-wrap .trend-cont.content1 .img-box { width: 400px; height: 250px; -webkit-filter: drop-shadow(1px 1px 3px #B2B2B2); filter: drop-shadow(1px 1px 3px #B2B2B2); } .trend-editer-wrap .trend-cont.content1 .img-box a { display: block; width: 100%; height: 100%; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .trend-editer-wrap .trend-cont.content1 .img-box a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .trend-editer-wrap .trend-cont.content2 .content2-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 1; padding: 323px 0 180px; } .trend-editer-wrap .trend-cont.content2 .content2-wrap::before { content: ''; display: block; position: absolute; z-index: -1; top: 0; max-width: 900px; min-width: 650px; width: 45.14%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#FFEDE6), to(white)); background: linear-gradient(180deg, #FFEDE6 0%, white 100%); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .trend-editer-wrap .trend-cont.content2 .sticky-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: -webkit-sticky; position: sticky; z-index: 1; width: 45.14%; height: 100%; max-width: 900px; min-width: 650px; min-height: 100vh; margin-top: -206px; padding-top: 20px; } .trend-editer-wrap .trend-cont.content2 .sticky-wrap .text-box1 { width: 400px; text-align: center; } .trend-editer-wrap .trend-cont.content2 .sticky-wrap .text-box1 .text-type1 { width: 96px; margin: 0 auto 30px; } .trend-editer-wrap .trend-cont.content2 .sticky-wrap .text-box1 .text-type2 { font-size: 25px; line-height: 30px; letter-spacing: 0; height: 1lh; margin-bottom: 9px; font-weight: 600; overflow: hidden; } .trend-editer-wrap .trend-cont.content2 .sticky-wrap .text-box1 .text-type3 { font-size: 16px; line-height: 19px; letter-spacing: 0; height: 1lh; margin-bottom: 50px; color: #4E4E4E; overflow: hidden; } .trend-editer-wrap .trend-cont.content2 .sticky-wrap .video-box { max-width: 400px; max-height: calc(100vh - 400px); } .trend-editer-wrap .trend-cont.content2 .sticky-wrap .video-box .video { max-height: inherit; } .header-wrap.a-rt-adv ~ .contents-wrap .trend-cont .sticky-wrap { top: 140px; min-height: calc(100vh - 140px); } .header-wrap.grand-stage ~ .contents-wrap .trend-cont .sticky-wrap { top: 135px; min-height: calc(100vh - 135px); } .header-wrap.abc-mart-adv ~ .contents-wrap .trend-cont .sticky-wrap { top: 120px; min-height: calc(100vh - 120px); } .trend-editer-wrap .trend-cont.content2 .cont-wrap { width: 720px; margin-right: auto; margin-left: 50px; } .trend-editer-wrap .trend-cont.content2 .text-box2 { width: 615px; } .trend-editer-wrap .trend-cont.content2 .text-box2 .text-type1 { font-size: 25px; line-height: 30px; letter-spacing: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; z-index: 1; height: 1lh; font-weight: 600; overflow: hidden; } .trend-editer-wrap .trend-cont.content2 .text-box2 .text-type2 { font-size: 17px; line-height: 26px; letter-spacing: 0; margin-top: 20px; } .trend-editer-wrap .trend-cont.content2 .text-box2 .motion-type6 { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; margin-left: -100%; background-color: #FFE5DE; } .trend-editer-wrap .trend-cont.content2 .img-box { position: relative; z-index: 1; width: 300px; height: 450px; } .trend-editer-wrap .trend-cont.content2 .img-box .text-info { font-size: 13px; line-height: 15px; letter-spacing: 0; position: absolute; top: -23px; width: 100%; text-align: center; color: #747474; } .trend-editer-wrap .trend-cont.content2 .memo-box { position: absolute; z-index: -1; bottom: 30px; left: -30px; padding: 25px 30px; background-color: #FFEDE6; border-radius: 5px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -webkit-transition: left ease-in-out 0.3s; transition: left ease-in-out 0.3s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-name: transformAni; animation-name: transformAni; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; cursor: pointer; } .trend-editer-wrap .trend-cont.content2 .memo-box.is-open { left: -167px; -webkit-animation: none; animation: none; } .trend-editer-wrap .trend-cont.content2 .memo-box .memo-title { font-size: 16px; line-height: 20px; letter-spacing: 0; margin-bottom: 17px; font-weight: 700; } .trend-editer-wrap .trend-cont.content2 .memo-box dl { font-size: 17px; line-height: 24px; letter-spacing: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .trend-editer-wrap .trend-cont.content2 .memo-box dl dt { width: 70px; } .trend-editer-wrap .trend-cont.content2 .memo-box dl dd { width: 68px; } .trend-editer-wrap .trend-cont.content2 .slide-box { width: 300px; } .trend-editer-wrap .trend-cont.content2 .slide-box .swiper-slide { width: 300px; height: 450px; } .trend-editer-wrap .trend-cont.content2 .slide-box .video { -o-object-fit: cover; object-fit: cover; } .trend-editer-wrap .trend-cont.content2 .slide-box2 { padding: 38px 0; width: 90px; margin-left: auto; } .trend-editer-wrap .trend-cont.content2 .slide-box2 .swiper-container { height: 490px; } .trend-editer-wrap .trend-cont.content2 .slide-box2 .swiper-slide { width: 90px; height: 90px; } .trend-editer-wrap .trend-cont [class*="motion-type"] { opacity: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .trend-editer-wrap .trend-cont [class*="img-box"], .trend-editer-wrap .trend-cont [class*="slide-box"] { position: relative; } .trend-editer-wrap .trend-cont [class*="img-box"] img, .trend-editer-wrap .trend-cont [class*="slide-box"] img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .trend-editer-wrap .trend-tab { position: -webkit-sticky; position: sticky; z-index: 3; top: 99px; background-color: #000; } .trend-editer-wrap .trend-tab .tab-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 1420px; margin: 0 auto; } .trend-editer-wrap .trend-tab .tab-list .list-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .trend-editer-wrap .trend-tab .tab-list .item-link { font-size: 18px; line-height: 21px; letter-spacing: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 40px; text-align: center; color: #717171; } .trend-editer-wrap .trend-tab .tab-list .item-link.active { background-color: #FF8858; color: #fff; } .trend-editer-wrap .trand-credit img { width: 100%; } .trend-editer-wrap .trand-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 60px; } .trend-editer-wrap .trand-btn .btn { width: 340px; height: 65px; font-family: Pretendard, sans-serif !important; font-weight: 700; line-height: 63px; } .trend-editer-wrap .motion-type3, .trend-editer-wrap .motion-type4 { margin-top: 100px; margin-bottom: -100px; } .trend-editer-wrap [class*="text-type"] img { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .trend-editer-wrap .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .trend-editer-wrap .d-flex.column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .trend-editer-wrap .d-flex.ai-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trend-editer-wrap .d-flex.ai-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .trend-editer-wrap .d-flex.jc-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .trend-editer-wrap .d-flex.jc-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .trend-editer-wrap .d-flex.gap15 { gap: 15px; } .trend-editer-wrap .d-flex.gap25 { gap: 25px; } .trend-editer-wrap .d-flex.gap20 { gap: 20px; } .trend-editer-wrap .d-flex.gap35 { gap: 35px; } .trend-editer-wrap .mlAuto { margin-left: auto; } .trend-editer-wrap .mtAuto { margin-top: auto; } .trend-editer-wrap .mt30 { margin-top: 30px; } .trend-editer-wrap .mt50 { margin-top: 50px; } .trend-editer-wrap .mt60 { margin-top: 60px; } .trend-editer-wrap .text { font-size: 18px; line-height: 25px; letter-spacing: 0; } .trend-editer-wrap .slide-box .swiper-button-next, .trend-editer-wrap .slide-box .swiper-button-prev { width: 13px; height: 34px; margin-top: -17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.848' height='33.936'%3E%3Cpath fill='%23e2e2e2' d='M-.001 17.121 10.872.001l1.975 1.06L2.668 17.119l10.095 15.734-1.879 1.084Z' data-name='Union 61'/%3E%3C/svg%3E"); background-size: contain; } .trend-editer-wrap .slide-box .swiper-button-prev { left: 27px; } .trend-editer-wrap .slide-box .swiper-button-next { right: 27px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .trend-editer-wrap .slide-box .swiper-pagination-bullets { bottom: 15px; } .trend-editer-wrap .slide-box .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 2px; background: #C8C8C8; opacity: 1; } .trend-editer-wrap .slide-box .swiper-pagination-bullet-active { background: #fff; } .trend-editer-wrap .slide-box2 .swiper-button-next, .trend-editer-wrap .slide-box2 .swiper-button-prev { top: auto; z-index: 1; width: 90px; height: 28px; margin-top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='28'%3E%3Cg data-name='Group 1706'%3E%3Cpath fill='%23fff' d='M0 0h90v28H0z' data-name='Rectangle 1476'/%3E%3Cpath d='m57.992 27.932-13.366-8.648L30.992 28l-.5-.946L44.626 18l13.866 9.054Z' data-name='Path 16'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; } .trend-editer-wrap .slide-box2 .swiper-button-prev { top: 0; left: 0; } .trend-editer-wrap .slide-box2 .swiper-button-next { right: 0; bottom: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .trend-editer-wrap .video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .trend-editer-wrap .cursor { position: absolute; width: 44px; height: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23fff' data-name='Group 1662' transform='translate(-490 -4362)'%3E%3Ccircle cx='22' cy='22' r='22' data-name='Ellipse 33' opacity='.4' transform='translate(490 4362)'/%3E%3Cpath d='M510.65 4391.96h2.73v-6.58h6.65v-2.8h-6.65V4376h-2.73v6.58H504v2.8h6.65Z' data-name='Path 1076'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; cursor: pointer; } </style> <!-- type3 --> <div class="trend-editer-wrap"> <section class="trend-main"> <div class="inner"> <div class="img-box"><img alt="" src="https://image.a-rt.com/art/editor/202502/1740010443180.gif" style="width: 1140px; height: 620px;" /></div> <div class="text-box"> <p class="text-type1">EP 1. 2025 트렌드는 하이브리드 슈즈</p> <p class="text-type2">더 나은 스타일링을 위한 둘러봄, 룩 어라운드</p> </div> </div> <div class="bg-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798897492.png" /></div> </section> <div class="trend-tab"> <ul class="tab-list"> <li class="list-item"><a class="item-link" href="#content1">Check List</a></li> <li class="list-item"><a class="item-link" href="#content2">Look Around Style</a></li> <li class="list-item"><a class="item-link prod-btn" href="#prodFocus">Look Around Item</a></li> </ul> </div> <section class="trend-cont content1" id="content1" style="background: linear-gradient(180deg, rgb(255,255,255) 0%, rgb(255,249,246) 100%);"> <div class="inner"> <div class="text-box1"> <p class="text-type1 motion-type3"><img src="https://image.a-rt.com/art/editor/202502/1740543702678.png" /></p> </div> <div class="text-box2 motion-box"> <div class="text-type1"> <div class="checkbox motion-type5"><img alt="" src="https://image.a-rt.com/art/editor/202502/1740101634708.gif" /></div> <p class="text">특별한 단독상품으로 차별화된 스타일링</p> </div> <div class="text-type1"> <div class="checkbox motion-type5"><img alt="" src="https://image.a-rt.com/art/editor/202502/1740101634708.gif" /></div> <p class="text">어디든 어울리는 세련된 캐주얼 룩</p> </div> </div> <div class="d-flex column motion-box"> <div class="d-flex gap25 mt50"> <div class="img-box motion-type4"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111213"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364184961.png" /> </a></div> <div class="img-box motion-type4"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110799"><img src="https://image.a-rt.com//art/display/webzine/202503/1742806237953.png" /> </a></div> <div class="img-box motion-type4"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110743"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799186497.png" /> </a></div> </div> <div class="text-box3"> <p class="text-type1 motion-type4">외출하기 전, 꾸꾸꾸 패션에 편안함을 더한다면 어떨까.<br /> 한껏 다가온 봄의 기운을 온몸으로 표현하기 좋은<br /> 특별한 슈즈로 나만의 스타일링 완성하기!</p> </div> </div> </div> </section> <section class="trend-cont content2" id="content2"> <div class="content2-wrap"> <div class="sticky-wrap"> <div class="text-box1"> <div class="text-type1"><img src="https://image.a-rt.com/art/editor/202502/1740638513751.png" /></div> <p class="text-type2">메리제인 : 로맨틱 무드의 정점</p> <p class="text-type3">시아 리본, 레이스 콤비, 웨빙 벨크로 메리제인</p> </div> <div class="video-box"> <video class="video" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3Eh2M47RbRuAZbtERqThdiivMxzxNx4FQQMipzZyGxEip0sr8dQGa5t89wieie.mp4" type="video/mp4" /></video> </div> </div> <div class="cont-wrap"> <div class="d-flex gap15"> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798127200.jpg" /></div> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798148575.jpg" /></div> </div> <div class="d-flex mt50"> <div class="text-box2"> <p class="text-type1"><span>레이스와 리본의 조화가 선사하는 로맨틱 무드</span> <span class="motion-type6"></span></p> <p class="text-type2">리본과 레이스 디테일이 돋보이는 메리제인 스타일은<br /> 둥근 앞코와 논슬립 아웃솔이 더해져 편안한 착화감을 선사하며,<br /> 벨크로 스트랩으로 실용성을 높였습니다.<br /> 발목을 드러내면 여리여리한 실루엣을,<br /> 루즈한 삭스와 매치하면 키치한 스타일을<br /> 완성할 수 있어 감각적인 연출이 가능합니다.</p> </div> <div class="slide-box2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111213"><img src="https://image.a-rt.com//art/display/webzine/202503/1742351920435.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111212"><img src="https://image.a-rt.com//art/display/webzine/202503/1742351920423.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111458"><img src="https://image.a-rt.com//art/display/webzine/202503/1742351920461.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111457"><img src="https://image.a-rt.com//art/display/webzine/202503/1742351920437.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111211"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364732182.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111210"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364732258.jpg" /> </a></li> </ul> </div> <div class="swiper-navigation"><button class="swiper-button-next"></button><button class="swiper-button-prev"></button></div> </div> </div> <div class="d-flex jc-end gap15 mt60"> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798208165.jpg" /> <p class="text-info">메모를 당겨보세요</p> <div class="memo-box"> <p class="memo-title">착용 아이템</p> <dl> <dt>슈즈</dt> <dd>230</dd> </dl> </div> </div> <div class="slide-box"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798256969.jpg" /></li> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798255918.jpg" /></li> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798255047.jpg" /></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> </div> </div> <div class="content2-wrap"> <div class="sticky-wrap"> <div class="text-box1"> <div class="text-type1"><img src="https://image.a-rt.com/art/editor/202502/1740543827764.png" /></div> <p class="text-type2">청키 플랫폼 : 빈티지의 새로운 정의</p> <p class="text-type3">시아 청키 메리제인, 청키 로퍼 6</p> </div> <div class="video-box"> <video class="video" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3Eh2M47RbRuBWlN1HoHJlKfMxzxNx4FQQMipzZyGxEip0uN1VPS93Pczwieie.mp4" type="video/mp4" /></video> </div> </div> <div class="cont-wrap"> <div class="d-flex gap15"> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798308895.jpg" /></div> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798332326.jpg" /></div> </div> <div class="d-flex mt50"> <div class="text-box2"> <p class="text-type1"><span>빈티지와 캐주얼의 믹스매치</span> <span class="motion-type6"></span></p> <p class="text-type2">청키한 아웃솔이 돋보이는 메리제인과 로퍼의 클래식한<br /> 매력에 빠져보세요. 일반적인 메리제인의 걸리시한 감성보다는<br /> 캐주얼하면서도 가볍고 편안한 착화감에 초점을 맞추어<br /> 장시간 착용해도 부담이 없습니다. 벌룬 스커트와 매치하면<br /> 세련된 분위기를, 데님과 매치하면 트렌디한<br /> 일상룩을 완성할 수 있습니다.</p> <p>&nbsp;</p> </div> <div class="slide-box2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110798"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364771422.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110799"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364771428.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110797"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364771421.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110801"><img src="https://image.a-rt.com//art/display/webzine/202503/1742366241169.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110800&amp;rcmdProdYn=N"><img src="https://image.a-rt.com//art/display/webzine/202503/1742803043234.jpg" /> </a></li> </ul> </div> <div class="swiper-navigation"><button class="swiper-button-next"></button><button class="swiper-button-prev"></button></div> </div> </div> <div class="d-flex jc-end gap15 mt60"> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742364925331.jpg" /> <p class="text-info">메모를 당겨보세요</p> <div class="memo-box"> <p class="memo-title">착용 아이템</p> <dl> <dt>슈즈</dt> <dd>230</dd> </dl> </div> </div> <div class="slide-box"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798602163.jpg" /></li> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798600031.jpg" /></li> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798600516.jpg" /></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> </div> </div> <div class="content2-wrap"> <div class="sticky-wrap"> <div class="text-box1"> <div class="text-type1"><img src="https://image.a-rt.com/art/editor/202502/1740543848147.png" /></div> <p class="text-type2">하이브리드 : 편안함 속 포멀함</p> <p class="text-type3">마자마 로퍼, 레이스</p> </div> <div class="video-box"> <video class="video" loop="" muted="" playsinline="" preload="auto"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3Ke4LZjT9e2W1sVgQm7wg7vMxzxNx4FQQKdbJcoproeo5WgvaMipfHywieie.mp4" type="video/mp4" /></video> </div> </div> <div class="cont-wrap"> <div class="d-flex gap15"> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742863459485.JPG" /></div> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798781374.jpg" /></div> </div> <div class="d-flex mt50"> <div class="text-box2"> <p class="text-type1"><span>하이브리드의 끝판왕, 구두와 운동화의 만남</span> <span class="motion-type6"></span></p> <p class="text-type2">봄, 가을이면 사랑받는 로퍼. 이 스타일의 클래식한 매력에<br /> 스니커즈의 편안함과 스포티한 무드를 더한 하이브리드 슈즈,<br /> 일명 &#39;구동화&#39;가 주목받고 있습니다. 일반 로퍼보다 가벼워<br /> 장시간 착용해도 부담이 없고, 슬랙스와 매치하면<br /> 편안하면서도 포멀한 분위기의 출근 룩을 연출할 수 있습니다.</p> </div> <div class="slide-box2"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110743"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799288844.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110744"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799288887.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110741&amp;page=1"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799341136.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010110742"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799341138.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111902"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799372531.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010111903"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799372536.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010107099"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799401540.jpg" /> </a></li> <li class="swiper-slide"><a href="https://abcmart.a-rt.com/product/new?prdtNo=1010107010"><img src="https://image.a-rt.com//art/display/webzine/202503/1742799401556.jpg" /> </a></li> </ul> </div> <div class="swiper-navigation"><button class="swiper-button-next"></button><button class="swiper-button-prev"></button></div> </div> </div> <div class="d-flex jc-end gap15 mt60"> <div class="img-box"><img src="https://image.a-rt.com//art/display/webzine/202503/1742863410883.JPG" /> <p class="text-info">메모를 당겨보세요</p> <div class="memo-box"> <p class="memo-title">착용 아이템</p> <dl> <dt>슈즈</dt> <dd>250</dd> </dl> </div> </div> <div class="slide-box"> <div class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798735933.jpg" /></li> <li class="swiper-slide"><img src="https://image.a-rt.com//art/display/webzine/202503/1742798781393.jpg" /></li> </ul> <div class="swiper-pagination">&nbsp;</div> </div> </div> </div> </div> </div> </section> <div class="trand-credit"><img alt="" src="https://image.a-rt.com//art/display/webzine/202503/1742366569560.png" /></div> <div class="trand-btn"><a class="btn btn-lg btn-line" href="https://www.a-rt.com/display/webzine/trend">더 많은 매거진 보러가기 &gt;</a></div> </div> <script> $(document).ready(function () { var scrolling = false; // 스크롤 상태 관리 플래그 // 탭 클릭 및 스크롤 이벤트를 통합 function updateActiveTab(targetId) { $('.tab-list a').removeClass('active'); if (targetId) { // 대상 ID가 있을 때만 active 추가 $('.tab-list a[href="#' + targetId + '"]').addClass('active'); } } // 스크롤 위치에 따른 활성 탭 업데이트 function onScroll() { if (!scrolling) { scrolling = true; var scrollPosition = $(window).scrollTop(); var activeTabFound = false; if (scrollPosition === 0) { var firstSectionId = $('.trend-cont').first().attr('id'); updateActiveTab(firstSectionId); activeTabFound = true; } else { $('.trend-cont').each(function () { var sectionOffset = $(this).offset().top - 139; var sectionHeight = $(this).outerHeight(); var sectionId = $(this).attr('id'); if (scrollPosition >= sectionOffset && scrollPosition < sectionOffset + sectionHeight) { updateActiveTab(sectionId); activeTabFound = true; return false; // 현재 섹션을 찾으면 루프 종료 } }); } if (!activeTabFound) { // trend-cont를 모두 벗어난 경우 active 제거 updateActiveTab(null); } setTimeout(function () { scrolling = false; }, 100); } } // 탭 클릭 이벤트 처리 $('.tab-list a').on('click', function (event) { if (this.hash !== "") { event.preventDefault(); scrolling = true; var targetId = this.hash.substring(1); var offset = (targetId === 'content2') ? 20 : 138; $('html, body').animate({ scrollTop: $('#' + targetId).offset().top - offset }, 300, 'easeInOutExpo', function () { scrolling = false; }); updateActiveTab(targetId); } }); // 스크롤 이벤트 처리 $(window).on('scroll', onScroll); // memo-box 이벤트 $('.memo-box').on('click', function(){ $(this).toggleClass('is-open'); }); // siwper 이벤트 $('.slide-box').each(function(index, element) { var $this = $(element); var autoplayOption = $this.hasClass('autoplay') ? { delay: 3000, disableOnInteraction: false } : false; var influencerSwiper = new Swiper($this.find('.swiper-container'), { allowTouchMove: true, resistanceRatio: 0, watchSlidesProgress: true, loop: true, spaceBetween: 20, autoplay: autoplayOption, pagination: { el: '.swiper-pagination', clickable: true, } }); }); $('.slide-box2').each(function(index, element) { var $this = $(element); var influencerSwiper = new Swiper($this.find('.swiper-container'), { allowTouchMove: true, resistanceRatio: 0, slidesPerView: 5, slidesPerGroup: 4, watchSlidesProgress: true, spaceBetween: 10, mousewheel: true, direction: "vertical", navigation: { nextEl: $this.find('.swiper-button-next'), prevEl: $this.find('.swiper-button-prev'), } }); }); // gsap js gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); $(".motion-type1").each(function(index) { var triggerElement = $(this); var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top bottom", end: "+=40%", // toggleActions: "play none none none", // scrub: 1, } }); tl.to(targetElement, { opacity: 1, duration: 1 }); }); $(".motion-box").each(function() { var container = $(this); var motionElements = container.find(".motion-type2"); motionElements.each(function(index) { var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: container, start: `top+=${index * 40} bottom`, end: "+=30%", toggleActions: "play none none none", // scrub: 1, // once: true, } }); tl.to(targetElement, { opacity: 1, duration: 1, delay: index * 1.2 }); }); }); $(".motion-type3").each(function(index) { var triggerElement = $(this); var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top-=50 bottom", end: "+=20%", toggleActions: "play none none none", // scrub: 1, } }); tl.to(targetElement, { y: "-100px", opacity: 1, duration: 1, delay: index * 0.5 }); }); $(".motion-box").each(function() { var container = $(this); var motionElements = container.find(".motion-type4"); motionElements.each(function(index) { var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: container, start: `top+=${index * 40} bottom`, end: "+=50%", toggleActions: "play none none none", // scrub: 1, } }); tl.to(targetElement, { y: "-100px", opacity: 1, duration: 1, delay: index * 0.8 }); }); }); $(".motion-box").each(function() { var container = $(this); var motionElements = container.find(".motion-type5"); motionElements.each(function(index) { var triggerElement = $(this); var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top 60%", once: true, toggleActions: "play none none none", onEnter: function () { var img = targetElement.find("img"); // GIF 이미지 선택 var src = img.attr("src"); img.attr("src", src + "?t=" + new Date().getTime()); // 캐시 방지하여 새로 로드 } } }); tl.to(targetElement, { opacity: 1, duration: 1, delay: index * 0.8 }); }); }); $(".motion-type6").each(function (index) { var triggerElement = $(this); var targetElement = $(this); var tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top-=50 bottom", end: "+=40%", toggleActions: "play none none none", // scrub: 1, } }); tl.to(targetElement, { x: "100%", opacity: 1, duration: 2, // delay: index * 0.5 }); }); // 비디오 재생 var videoBoxes = document.querySelectorAll('.video-box'); if (videoBoxes.length > 0) { var observerOptions = { root: null, threshold: 0.5, }; var observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { var video = entry.target.querySelector('video'); if (entry.isIntersecting && entry.intersectionRatio >= 0.5) { playActiveVideo(video); } else { pauseVideo(video); } }); }, observerOptions); videoBoxes.forEach((box) => { observer.observe(box); }); } // 활성 비디오 재생 function playActiveVideo(video) { if (video && video.paused) { video.currentTime = 0; video.play(); } } // 비디오 멈추기 function pauseVideo(video) { if (video) { video.pause(); video.currentTime = 0; } } }); </script>