<!-- S : FILA ILLIT 최종 콘텐츠 -->
<style type="text/css">@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
#fila-illit{--ink:#233744;color:var(--ink);font-family:Pretendard,'Malgun Gothic',sans-serif;max-width:1920px;min-width:1200px;margin:auto;background:#faf8f1;overflow:hidden;text-align:center}#fila-illit *{box-sizing:border-box}#fila-illit h1,#fila-illit h2,#fila-illit h3,#fila-illit p,#fila-illit figure{margin:0}#fila-illit img{display:block;width:100%;height:auto}#fila-illit .eyebrow{font-size:13px;letter-spacing:2.5px;font-weight:600}#fila-illit .serif{font-family:Georgia,serif;font-weight:400}#fila-illit .hero{height:870px;position:relative;background:#dbeaf0;text-align:left}#fila-illit .topline{position:absolute;top:40px;left:5%;right:5%;display:flex;justify-content:space-between;z-index:3;font-size:12px;letter-spacing:2px}#fila-illit .brand{display:flex;align-items:center;gap:22px}#fila-illit .brand img{width:100px;filter:brightness(0) saturate(100%);opacity:.8}#fila-illit .brand img:last-child{width:120px}#fila-illit .hero-copy{position:absolute;left:9%;top:240px;z-index:2}#fila-illit .hero h1{font-size:58px;letter-spacing:-3px;line-height:1.22;margin:26px 0 26px;font-weight:600}#fila-illit .hero h1 em{font-family:Georgia,serif;font-weight:400;font-size:78px;letter-spacing:-3px}#fila-illit .hero .desc{font-size:17px;line-height:1.9}#fila-illit .hero-photo{position:absolute;right:8%;top:130px;width:41%;height:650px;object-fit:cover;object-position:center;border-radius:220px 220px 0 0}#fila-illit .hero-bottom{position:absolute;left:9%;bottom:62px;font:italic 24px Georgia,serif}#fila-illit .ghost{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;opacity:.065;mix-blend-mode:multiply;pointer-events:none}#fila-illit .hero>.ghost{width:43%;object-fit:cover;object-position:bottom;opacity:.055}#fila-illit .hero-stamp{position:absolute;right:4%;bottom:45px;border:1px solid #637980;border-radius:50%;width:130px;height:130px;display:grid;place-content:center;text-align:center;font-size:12px;line-height:1.6;transform:rotate(12deg);background:#f8e6e0}#fila-illit .launch{padding:43px 10%;background:#fff0bf;display:flex;align-items:center;justify-content:center;gap:90px;text-align:left}#fila-illit .launch h2{font-size:17px;letter-spacing:2px}#fila-illit .launch p{font-size:16px;line-height:1.8}#fila-illit .intro{padding:95px 0 85px}#fila-illit .intro h2{font-size:36px;line-height:1.4;letter-spacing:-1.3px;margin:22px 0}#fila-illit .intro p{font-size:17px;line-height:1.9}#fila-illit .chapter{position:relative;padding:80px 0 100px;isolation:isolate}#fila-illit .puffer{background:#f7e1e7}#fila-illit .rulz{background:#e2eddb}#fila-illit .chapter>.ghost{z-index:-1;object-position:center 65%;opacity:.09}#fila-illit .chapter h2{font-size:39px;letter-spacing:-1px;margin:18px 0 12px}#fila-illit .chapter .lead{font-size:17px;line-height:1.8}#fila-illit .video-wrap{position:relative;width:800px;margin:40px auto 18px}#fila-illit video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#d3c9be}#fila-illit .badge{position:absolute;right:-40px;top:-33px;width:112px;height:112px;border-radius:50%;background:#d6e8f5;display:grid;place-content:center;font-size:14px;font-weight:700;line-height:1.6;box-shadow:0 2px 9px #0001}#fila-illit .rulz .badge{background:#fff0ba}#fila-illit .caption{font-size:14px;line-height:1.8}#fila-illit .editorial{display:grid;grid-template-columns:450px 490px;gap:75px;width:1015px;margin:65px auto 0;align-items:center;text-align:left}#fila-illit .photo{background:white;padding:12px 12px 30px;box-shadow:0 12px 24px #30303a10;position:relative}#fila-illit .photo:after{content:'';position:absolute;inset:0;background:white;transform:rotate(3deg);z-index:-1}#fila-illit .editorial>.photo{transform:rotate(-4deg)}#fila-illit .editorial .right .photo{transform:rotate(3deg);width:420px;margin-left:30px}#fila-illit .photo img{aspect-ratio:4/5;object-fit:cover}#fila-illit .photo small{display:block;font-size:11px;letter-spacing:2px;margin-top:14px}#fila-illit .story{padding:36px 10px 0 32px}#fila-illit .story h3{font-size:27px;line-height:1.5;letter-spacing:-1px;margin-bottom:16px}#fila-illit .story p{font-size:16px;line-height:1.9}#fila-illit .features{display:flex;gap:30px;border-top:1px solid #23374430;padding-top:22px;margin-top:25px;font-size:12px;letter-spacing:1px}#fila-illit .features strong{display:block;font:24px Georgia,serif;margin-bottom:7px}#fila-illit .details{background:#f8f3e8;padding:85px 0}#fila-illit .section-head{display:flex;align-items:end;justify-content:space-between;width:1040px;margin:0 auto 40px;text-align:left}#fila-illit .section-head h2{font-size:36px;letter-spacing:-1px;margin-top:14px}#fila-illit .section-head p{font-size:15px;line-height:1.8}#fila-illit .detail-pair{width:1040px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}#fila-illit .detail-pair img{aspect-ratio:4/3;object-fit:cover;object-position:center 57%}#fila-illit .detail-pair figcaption{padding-top:20px;line-height:1.9;font-size:14px}#fila-illit .detail-pair strong{font-size:19px}#fila-illit .lineup{padding:80px 0;background:#e6edf6}#fila-illit .product-row{display:flex;justify-content:center;gap:18px;width:1040px;margin:30px auto 44px}#fila-illit .product{width:190px;text-align:left}#fila-illit .product img{aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}#fila-illit .product p{font-size:11px;line-height:1.8;padding-top:10px}#fila-illit .line-title{font-size:17px;letter-spacing:1px}#fila-illit .ending{padding:95px 0 100px;background:linear-gradient(#e6edf6,#f6e1e7)}#fila-illit .ending-inner{width:1000px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:65px;text-align:left}#fila-illit .ending img{border:12px solid white}#fila-illit .ending h2{font-size:38px;line-height:1.4;letter-spacing:-1.8px;margin:20px 0}#fila-illit .ending p{font-size:16px;line-height:1.9}#fila-illit .ending .serif{font-size:34px;font-style:italic}#fila-illit a:focus-visible{outline:3px solid #8bcbe8;outline-offset:6px}
#fila-illit .footer {
padding: 146.8px 0 106.8px;
background-color: #000000;
}
#fila-illit .footer .btn {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: 800px;
height: 80px;
margin: 0 auto;
font-size: 20px;
font-weight: 700;
line-height: 100%;
letter-spacing: -0.8px;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #000000;
border: 1px solid #ffffff;
transition: .3s ease;
box-sizing: border-box;
}
#fila-illit .footer .btn:hover {
color: #000000;
background: #ffffff;
}
#fila-illit .footer .btn .ico {
display: inline-block;
width: 32px;
height: 32px;
background: url(https://image.a-rt.com/art/editor/202511/1762486356070.png) center/cover no-repeat;
transition: .3s ease;
}
#fila-illit .footer .btn:hover .ico {
background: url(https://image.a-rt.com/art/editor/202511/1762486365218.png) center/cover no-repeat;
}
#fila-illit .footer .copy {
margin-top: 32.4px !important;
text-align: center;
font-size: 18px;
font-weight: 500;
line-height: 100%;
color: #D3D3D3;
}
#fila-illit .footer .copy .attention {
font-weight: 700;
color: #ffffff;
}
/* Motion edition: lightweight CSS + IntersectionObserver */
#fila-illit{--motion:running}
#fila-illit.motion-paused{--motion:paused}
#fila-illit .hero{isolation:isolate;background:linear-gradient(120deg,#dbeaf0 5%,#e0edf1 45%,#eadfe9 75%,#dbeaf0);background-size:220% 220%;animation:fi-wash 20s ease-in-out infinite;animation-play-state:var(--motion)}
#fila-illit .hero:before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;left:-220px;top:80px;background:radial-gradient(circle,#fff7d47a,transparent 68%);filter:blur(18px);z-index:-1;animation:fi-drift 16s ease-in-out infinite alternate;animation-play-state:var(--motion)}
#fila-illit .hero-photo{box-shadow:22px 26px 65px #5376851a;animation:fi-photo-enter 1.5s cubic-bezier(.2,.65,.3,1) both;animation-play-state:var(--motion)}
#fila-illit .hero-copy{animation:fi-copy-enter 1.1s .15s both;animation-play-state:var(--motion)}
#fila-illit .hero-copy h1 em{background:linear-gradient(110deg,#233744 10%,#547180 44%,#233744 65%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:fi-type-glow 12s ease-in-out infinite;animation-play-state:var(--motion)}
#fila-illit .hero-stamp{animation:fi-stamp 7s ease-in-out infinite;animation-play-state:var(--motion)}
#fila-illit .ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
#fila-illit .ambient i{display:block;position:absolute;border:1px solid #ffffff75;border-radius:50%;width:185px;height:185px;left:41%;top:9%;box-shadow:inset 0 0 25px #ffffff28;animation:fi-orbit 18s ease-in-out infinite alternate;animation-play-state:var(--motion)}
#fila-illit .ambient i:nth-child(2){width:340px;height:340px;left:80%;top:68%;border-color:#ffffff55;animation-delay:-7s;animation-duration:23s}
#fila-illit .ambient i:nth-child(3){width:12px;height:12px;left:46%;top:78%;background:#fff8d8a8;border:0;animation-delay:-4s;animation-duration:13s}
#fila-illit .ambient i:nth-child(4){width:7px;height:7px;left:30%;top:18%;background:#ffffffad;border:0;animation-delay:-9s}
#fila-illit .hero-orbit{position:absolute;left:43%;top:125px;width:65px;height:65px;color:#fff9d8;pointer-events:none;animation:fi-spin 40s linear infinite;animation-play-state:var(--motion)}
#fila-illit .hero-orbit:before,#fila-illit .hero-orbit:after{content:'';position:absolute;background:currentColor;left:31px;top:0;width:2px;height:65px;border-radius:100%}
#fila-illit .hero-orbit:after{transform:rotate(90deg)}
#fila-illit .motion-toggle{position:absolute;left:9%;bottom:26px;border:0;border-bottom:1px solid #23374445;background:transparent;color:#405762;padding:5px 0;font:11px Pretendard,sans-serif;letter-spacing:.5px;cursor:pointer;z-index:5}
#fila-illit .ribbon{overflow:hidden;background:#fcf7ed;padding:18px 0;border-top:1px solid #23374412;border-bottom:1px solid #23374412;color:#4f6670}
#fila-illit .ribbon-track{display:flex;width:max-content;animation:fi-marquee 46s linear infinite;animation-play-state:var(--motion)}
#fila-illit .ribbon-track span{display:block;white-space:nowrap;padding-right:65px;font:italic 26px Georgia,serif;letter-spacing:1px}
#fila-illit .ribbon-track b{font:11px Pretendard,sans-serif;letter-spacing:2px;vertical-align:middle;margin:0 50px;font-weight:500}
#fila-illit .chapter{overflow:hidden}
#fila-illit .chapter:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 20% 22%,#ffffff65,transparent 48%),radial-gradient(ellipse at 90% 80%,#fff6cf38,transparent 42%);background-size:130% 130%;animation:fi-wash 22s ease-in-out infinite;animation-play-state:var(--motion)}
#fila-illit .chapter>.ghost{transform:translateY(var(--ghost-offset,0px)) scale(1.055);will-change:transform}
#fila-illit .video-wrap{box-shadow:0 16px 45px #333b4020;transition:box-shadow .6s ease}
#fila-illit .video-wrap:hover{box-shadow:0 22px 55px #333b4030}
#fila-illit .badge{animation:fi-badge 7s ease-in-out infinite;animation-play-state:var(--motion)}
#fila-illit .photo{transition:box-shadow .65s ease,translate .65s ease}
#fila-illit .photo:hover{translate:0 -7px;box-shadow:0 22px 40px #30303a22}
#fila-illit .product img{transition:transform .65s cubic-bezier(.2,.65,.3,1)}
#fila-illit .product:hover img{transform:translateY(-8px) scale(1.035)}
#fila-illit .fi-reveal{opacity:1;transform:none}
#fila-illit.fi-motion-ready .fi-reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1.15s cubic-bezier(.16,.7,.3,1);transition-delay:var(--reveal-delay,0ms)}
#fila-illit.fi-motion-ready .fi-reveal.fi-in{opacity:1;transform:translateY(0)}
#fila-illit .ending{background:linear-gradient(135deg,#e6edf6,#f6e1e7,#f8edd2);background-size:180% 180%;animation:fi-wash 20s ease-in-out infinite;animation-play-state:var(--motion)}
@keyframes fi-wash{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fi-drift{to{transform:translate(300px,80px) scale(1.2)}}
@keyframes fi-orbit{to{transform:translate(25px,-28px)}}
@keyframes fi-spin{to{transform:rotate(360deg)}}
@keyframes fi-stamp{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-9px) rotate(14deg)}}
@keyframes fi-badge{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes fi-type-glow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes fi-copy-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fi-photo-enter{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fi-marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#fila-illit *,#fila-illit *:before,#fila-illit *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#fila-illit.fi-motion-ready .fi-reveal{opacity:1;transform:none}#fila-illit .chapter>.ghost{transform:none;will-change:auto}#fila-illit .hero-copy h1 em{color:#233744}#fila-illit .motion-toggle{display:none}}
/* 2026-10-26 PPT revision */
#fila-illit .hero{padding:0;min-height:0;height:auto;background:#c8bfb5;text-align:center;isolation:isolate}
#fila-illit .hero:before,#fila-illit .hero>.ghost,#fila-illit .hero>.ambient,#fila-illit .hero>.hero-orbit,#fila-illit .hero-stamp,#fila-illit .hero-bottom{display:none}
#fila-illit .hero-media{position:relative;width:100%;padding-top:80px;padding-bottom:160px;overflow:hidden;background:#dcd4ca}
#fila-illit .hero-media>img{position:relative;width:100%;height:auto;aspect-ratio:1.497/1;object-fit:cover;object-position:center;animation:none;border-radius:0;box-shadow:none;margin:0}
#fila-illit .hero .topline{top:42px;left:5%;right:5%;display:flex;justify-content:center;z-index:4}
#fila-illit .hero .topline>span{display:none}
#fila-illit .hero .brand{gap:22px;color:#fff;font-size:25px}
#fila-illit .hero .brand img{filter:none;opacity:1;width:105px}
#fila-illit .hero .brand img:last-child{width:125px}
#fila-illit .hero-copy{position:absolute;top:auto;bottom:0;left:0;right:0;z-index:3;padding:150px 30px 54px;background:linear-gradient(transparent,rgba(30,27,29,.38) 42%,rgba(30,27,29,.82));color:#fff;text-align:center;animation:fi-copy-enter 1.1s .15s both}
#fila-illit .hero-copy .eyebrow{font-size:15px;letter-spacing:2px}
#fila-illit .hero h1{font-size:40px;font-weight:650;line-height:1.35;letter-spacing:-1.5px;margin:16px 0 10px}
#fila-illit .hero .desc{font-size:16px;line-height:1.8;color:#fff}
#fila-illit .hero .motion-toggle{left:auto;right:30px;bottom:18px;color:#fff;border-color:#ffffff70;font-size:10px}
#fila-illit .hero .motion-toggle{z-index:6}
#fila-illit .rolling{position:relative;overflow:hidden;isolation:isolate}
#fila-illit .rolling .roll-slide{animation:fi-roll 12s ease-in-out infinite;animation-play-state:var(--motion)}
#fila-illit .rolling .roll-slide:nth-child(2){animation-delay:-6s}
#fila-illit .rolling .roll-slide:first-child{opacity:1}
#fila-illit .rolling .roll-slide:nth-child(2){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#fila-illit .roll-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
#fila-illit .roll-dots i{display:block;width:18px;height:2px;background:currentColor;opacity:.7}
#fila-illit .hero .roll-dots{color:#fff;margin-top:20px}
#fila-illit .ending-inner .rolling{width:100%;aspect-ratio:4/5;border:12px solid #fff;background:#e6ded4}
#fila-illit .ending-inner .rolling img{width:100%;height:100%;object-fit:cover;border:0}
@keyframes fi-roll{0%,43%{opacity:1}50%,93%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){#fila-illit .rolling .roll-slide{animation:none!important}#fila-illit .rolling .roll-slide:nth-child(2){opacity:0!important}#fila-illit .hero-copy{animation:none}}
/* Reference-size lock-in: PC 1920 x 1068 / MO 720 x 1064 */
#fila-illit .hero{height:auto;aspect-ratio:1920/1068;width:100%;padding:0;background:#dcd4c9;overflow:hidden}
#fila-illit .hero-media{position:absolute;inset:0;width:100%;height:100%;padding:0;background:linear-gradient(#dcd4c9 0%,#dcd4c9 74%,#777069 87%,#3c3837 100%);aspect-ratio:auto}
#fila-illit .hero .hero-media>img,#fila-illit .hero .hero-media.rolling .roll-slide:nth-child(2){position:absolute;left:0;right:auto;top:9%;bottom:auto;width:100%;height:70%;aspect-ratio:auto;object-fit:contain;object-position:center;margin:0}
#fila-illit .hero .hero-media>img{mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 94%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 94%,transparent)}
#fila-illit .hero .topline{top:1%;left:0;right:0;height:10%;align-items:center}
#fila-illit .hero .brand{gap:15px;color:#233744;font-size:clamp(13px,1.3vw,25px)}
#fila-illit .hero .brand img{width:clamp(62px,5.4vw,104px);filter:brightness(0);opacity:.86}
#fila-illit .hero .brand img:last-child{width:clamp(74px,6.5vw,125px)}
#fila-illit .hero-copy{top:80%;bottom:3%;left:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 20px;background:none;animation:none}
#fila-illit .hero-copy .eyebrow{font-size:clamp(10px,1.1vw,21px);line-height:1.2;font-weight:400;letter-spacing:1.4px}
#fila-illit .hero h1{font-size:clamp(23px,2.2vw,42px);letter-spacing:-1px;line-height:1.18;margin:10px 0 0}
#fila-illit .hero .motion-toggle{bottom:1%;right:2%;font-size:9px;padding:4px 0}
#fila-illit .hero .roll-dots{position:absolute;bottom:2.3%;left:0;right:0;margin:0;z-index:4;color:#fff}
#fila-illit .story p{white-space:normal;word-break:keep-all}
#fila-illit .story p .copy-line{display:block}
#fila-illit .hero .hero-media{background:linear-gradient(#d9d0c5 0%,#d9d0c5 78%,#777069 87%,#3c3837 100%)}
#fila-illit .hero .hero-media .scene-slide{position:absolute;left:0;right:0;top:7%;width:100%;height:74%;overflow:hidden;background:#d9d0c5}
#fila-illit .hero .hero-media .scene-slide:nth-child(2){position:absolute;inset:auto;left:0;right:0;top:7%;width:100%;height:74%;object-fit:initial}
#fila-illit .scene-slide .scene-edge{position:absolute;top:-5%;width:60%;height:110%;display:block;pointer-events:none;filter:blur(24px)}
#fila-illit .scene-slide .edge-left{left:0}#fila-illit .scene-slide .edge-right{right:0}
#fila-illit .hero .hero-media .scene-slide>img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:auto;height:100%;max-width:none;object-fit:fill;margin:0;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
#fila-illit .hero-copy{top:83%;bottom:2%;}
#fila-illit .hero .topline{top:0;height:9%}
#fila-illit .launch{justify-content:center;text-align:center}
#fila-illit .launch p{text-align:center}
/* Blend the header and footer into the photographic backdrop. */
#fila-illit .hero .hero-media{background:#d9d0c5}
#fila-illit .hero .hero-media .scene-slide,#fila-illit .hero .hero-media .scene-slide:nth-child(2){top:0;height:81%;overflow:visible;background:transparent}
#fila-illit .hero .hero-media .scene-slide>img{top:8.641975%;height:91.358025%;mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 89%,transparent 100%),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 89%,transparent 100%),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in}
#fila-illit .scene-slide .scene-edge{top:0;height:100%;filter:blur(28px);mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)}
#fila-illit .hero-media:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,transparent 69%,rgba(60,56,55,.025) 74%,rgba(60,56,55,.13) 80%,rgba(60,56,55,.43) 87%,rgba(60,56,55,.77) 94%,#3c3837 100%)}
/* PC left backdrop: replace the magnified edge strip with clean wall tones. */
#fila-illit .hero .hero-media .scene-slide:before{content:'';position:absolute;left:0;top:0;width:60%;height:100%;pointer-events:none;background:linear-gradient(to bottom,#d9d0c5 0%,#dfd6cd 12%,#ddd4cb 50%,#dad1c8 80%,#d9d2ca 100%)}
#fila-illit .hero .hero-media .scene-slide>.edge-left{display:none;filter:none}
/* PC lock-in: alternate two shoe styles without changing banner proportions. */
#fila-illit .hero .hero-media.rolling>.scene-slide.roll-slide,
#fila-illit .hero .hero-media.rolling>.scene-slide.roll-slide:nth-child(2){position:absolute;inset:auto;left:0;right:0;top:0;bottom:auto;width:100%;height:81%;overflow:visible;background:transparent;object-fit:initial}
#fila-illit .hero .hero-media.rolling>.scene-slide.roll-slide:nth-child(2)>img{position:absolute;inset:auto;top:8.641975%;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:auto;height:80%;max-width:none;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-composite:add;-webkit-mask-composite:source-over}
/* Two slides: 2.5 seconds per cut, 5 seconds per complete cycle. */
#fila-illit .rolling .roll-slide{animation-duration:5s;animation-delay:0s}
#fila-illit .rolling .roll-slide:nth-child(2){animation-delay:-2.5s}
#fila-illit .hero .hero-media.rolling>.scene-slide.roll-slide:nth-child(2)>img{top:-25%;height:140%;width:auto;max-width:none;object-fit:contain;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent),linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent),linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in}
</style>
<div id="fila-illit"><!-- 전체 이미지를 검토해서 적합한 컷을 선별하고 순서 구성 -->
<section class="hero">
<div class="hero-media rolling">
<div class="roll-slide scene-slide"><svg aria-hidden="true" class="scene-edge edge-right" preserveaspectratio="none" viewbox="1798 0 2 1203"><image height="1203" href="https://image.a-rt.com/art/editor/202610/1792982852314.jpg" width="1800" x="0" y="0"></image></svg><img alt="퍼퍼 플랫폼 뮬을 착용한 아일릿" src="https://image.a-rt.com/art/editor/202610/1792982852314.jpg" /></div>
<div class="roll-slide scene-slide"><img alt="룰즈 4 LJ를 착용한 아일릿" src="https://image.a-rt.com/art/editor/202610/1792982873114.jpg" /></div>
</div>
<div class="topline">
<div class="brand"><img alt="FILA" src="https://image.a-rt.com/art/editor/202610/1792982903330.png" /><span aria-label="함께">|</span><img alt="ILLIT" src="https://image.a-rt.com/art/editor/202610/1792982905394.png" /></div>
</div>
<div class="hero-copy">
<p class="eyebrow">ABC-MART EXCLUSIVE</p>
<h1>휠라, 아일릿의<br />
포근한 계절</h1>
</div>
</section>
<section class="launch">
<h2><strong>DISCOVER</strong></h2>
<p>잊고 있던 매력과 몰랐던 정보까지,<br />
다시 발견하는 트렌디한 아이템 소개합니다.</p>
</section>
<div aria-hidden="true" class="ribbon">
<div class="ribbon-track"><span>Soft days, our way. <b>FILA × ILLIT — ONLY AT ABC-MART</b> A little warmth in every step. <b>2026 FALL / WINTER</b></span><span>Soft days, our way. <b>FILA I ILLIT — ONLY AT ABC-MART</b> A little warmth in every step. <b>2026 FALL / WINTER</b></span><span>Soft days, our way. <b>FILA I ILLIT — ONLY AT ABC-MART</b> A little warmth in every step. <b>2026 FALL / WINTER</b></span><span>Soft days, our way. <b>FILA × ILLIT — ONLY AT ABC-MART</b> A little warmth in every step. <b>2026 FALL / WINTER</b></span></div>
</div>
<section class="intro"><span class="eyebrow">THE SOFT SIDE OF THE SEASON</span>
<h2><strong>좋아하는 계절을 신는 방법</strong></h2>
<p>포근한 뮬부터 감각적인 레더 스니커즈까지.<br />
니트와 삭스, 그리고 휠라 신발로 완성하는 계절의 스타일.<br />
아일릿의 일상처럼 자연스럽고, 나만의 취향처럼 선명하게.</p>
</section>
<section class="chapter puffer"><img alt="" class="ghost" src="https://image.a-rt.com/art/editor/202610/1792982868610.jpg" />
<p class="eyebrow">PICK 01 / SOFT VOLUME</p>
<h2><strong>PUFFER PLATFORM MULE</strong></h2>
<p class="lead">발끝에 내려앉은, 포근한 볼륨.</p>
<div class="video-wrap">
<video aria-label="PUFFER PLATFORM MULE 캠페인 영상" autoplay="" controls="" loop="" muted="" playsinline="" poster="https://image.a-rt.com/art/editor/202610/1792982852314.jpg" preload="none"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3MeHZ7PLwEDMeMmF5SSCxeisMxzxNx4FQQA8IDKrotfJL9vcJmKSNBzwieie.mp4" type="video/mp4" /></video>
<div class="badge">ABC마트<br />
단독 상품</div>
</div>
<div class="editorial">
<figure class="photo"><img alt="PUFFER PLATFORM MULE 아일릿 스타일" src="https://image.a-rt.com/art/editor/202610/1792982855607.jpg" /><small>FILA WITH ILLIT / 2026 F/W</small></figure>
<div class="right">
<figure class="photo"><img alt="PUFFER PLATFORM MULE 착용 디테일" src="https://image.a-rt.com/art/editor/202610/1792982868610.jpg" /><small>THE SEASON OF SOFT STEPS</small></figure>
<div class="story">
<h3><strong>포근함도 스타일도<br />
더 볼륨 있게.</strong></h3>
<p><span class="copy-line">둥근 토와 도톰한 플랫폼이 만드는 부드러운 존재감.</span><span class="copy-line">니트 삭스를 더해 아일릿의 포근한 무드를 완성해 보세요.</span></p>
</div>
</div>
</div>
</section>
<section class="chapter rulz"><img alt="" class="ghost" src="https://image.a-rt.com/art/editor/202610/1792982894986.jpg" />
<p class="eyebrow">PICK 02 / DAILY TEXTURE</p>
<h2><strong>RULZ 4 LJ</strong></h2>
<p class="lead">익숙한 일상에, 새로운 텍스처.</p>
<div class="video-wrap">
<video aria-label="RULZ 4 LJ 캠페인 영상" autoplay="" controls="" loop="" muted="" playsinline="" poster="https://image.a-rt.com/art/editor/202610/1792982873114.jpg" preload="none"><source src="http://api.wecandeo.com/video/default/BOKNS9AQWrHQg7ii9ipD2jMWlwNOz6xais3MeHZ7PLwEDNG0OOFfXDisHPMxzxNx4FQQA8IDKrotfJLUnXipDKVCdSwieie.mp4" type="video/mp4" /></video>
<div class="badge">ABC마트<br />
단독 상품</div>
</div>
<div class="editorial">
<figure class="photo"><img alt="RULZ 4 LJ 아일릿 스타일" src="https://image.a-rt.com/art/editor/202610/1792982870182.jpg" /><small>FILA WITH ILLIT / 2026 F/W</small></figure>
<div class="right">
<figure class="photo"><img alt="RULZ 4 LJ 착용 디테일" src="https://image.a-rt.com/art/editor/202610/1792982871641.jpg" /><small>THE SEASON OF SOFT STEPS</small></figure>
<div class="story">
<h3><strong>포근한 분위기로<br />
나만의 스타일을.</strong></h3>
<p><span class="copy-line">레더의 텍스처와 볼륨 있는 실루엣의 조화.</span><span class="copy-line">스커트에도 데님에도, 취향에 따라 자유롭게 매치하세요.</span></p>
</div>
</div>
</div>
</section>
<section class="ending">
<div class="ending-inner">
<div aria-label="아일릿의 두 가지 시즌 스타일" class="rolling"><img alt="퍼퍼 플랫폼 뮬을 착용한 아일릿" class="roll-slide" src="https://image.a-rt.com/art/editor/202610/1792982853976.jpg" /><img alt="룰즈 4 LJ를 착용한 아일릿" class="roll-slide" src="https://image.a-rt.com/art/editor/202610/1792982873114.jpg" /></div>
<div><span class="serif">Soft days, our way.</span>
<p><br />
더 포근하게, 더 나답게.<br />
아일릿이 제안하는 새로운 스타일을<br />
오직 ABC마트에서 만나보세요.</p>
</div>
</div>
</section>
<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>
<script>
(function(){
const root=document.getElementById('fila-illit');if(!root)return;
const reduced=window.matchMedia('(prefers-reduced-motion: reduce)');
let paused=reduced.matches;
const toggle=root.querySelector('.motion-toggle');
const targets=root.querySelectorAll('.intro h2,.intro>p,.chapter>.eyebrow,.chapter>h2,.chapter>.lead,.video-wrap,.editorial,.section-head,.detail-pair figure,.lineup>h2,.product-row,.ending-inner');
targets.forEach((el,i)=>{el.classList.add('fi-reveal');el.style.setProperty('--reveal-delay',el.closest('.detail-pair')?(i%2)*120+'ms':'0ms')});
if(!reduced.matches&&'IntersectionObserver' in window){
root.classList.add('fi-motion-ready');
const io=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('fi-in');io.unobserve(e.target)}}),{threshold:.08});
targets.forEach(el=>io.observe(el));
}
const chapters=[...root.querySelectorAll('.chapter')];let ticking=false;
function update(){ticking=false;if(paused||document.hidden)return;chapters.forEach(el=>{const r=el.getBoundingClientRect();if(r.bottom>0&&r.top<innerHeight)el.style.setProperty('--ghost-offset',Math.max(-24,Math.min(24,(innerHeight/2-r.top-r.height/2)*.025))+'px')})}
function onScroll(){if(!ticking&&!paused){ticking=true;requestAnimationFrame(update)}}
window.addEventListener('scroll',onScroll,{passive:true});
toggle?.addEventListener('click',()=>{paused=!paused;root.classList.toggle('motion-paused',paused);toggle.textContent=paused?'움직임 재생하기 ↗':'움직임 멈추기 Ⅱ';toggle.setAttribute('aria-pressed',String(paused));root.querySelectorAll('video').forEach(v=>{if(paused)v.pause();else v.play().catch(()=>{})});if(paused){root.classList.remove('fi-motion-ready')}else update()});
reduced.addEventListener('change',e=>{if(e.matches){paused=true;root.classList.add('motion-paused');root.classList.remove('fi-motion-ready');root.querySelectorAll('video').forEach(v=>v.pause())}});
if(reduced.matches)root.querySelectorAll('video').forEach(v=>{v.removeAttribute('autoplay');v.pause()});
update();
})();
</script><!-- E : FILA ILLIT 최종 콘텐츠 -->
-
-
-
휠라
공용휠라 룰즈 모카신 LX
99,900원
-
휠라
공용휠라 룰즈 모카신 LX
99,900원
