:root { --ir-red: #FD0004; --ir-cyan: #00DDEB; --ir-muted: #EAEAEA; }
html { font-family: Arial, sans-serif; font-weight: 300; color: #fff; background: #000; }
* { box-sizing: border-box; }
.main { height: auto; min-height: 100vh; max-height: none; }
.main.is-page-stack, .main:has(.page-stack) { overflow: visible; height: auto; max-height: none; }
.page-stack { margin-top: var(--header-height); }
@media (prefers-reduced-motion:reduce) {
.page-stack [class*="-trAnim-"], .page-stack [class*="ir-rise-"], .page-stack [class*="ir-fade-"], .page-stack [class*="ir-scale-"] { opacity: 1 !important; transition: none !important; animation: none !important; }
.page-stack [class*="ir-rise-"], .page-stack [class*="ir-scale-"] { transform: none !important; }
.infrared-body__orb { animation: none !important; opacity: 1 !important; }
.infrared-page__more span, .infrared-work__more span { animation: none !important; }
.bg-line path { stroke-dashoffset: 0 !important; transition: none !important; }
.bg-line circle { opacity: 1 !important; transition: none !important; }
}
[class*="ir-rise-"], [class*="ir-scale-"] { opacity: 0; transition-property: opacity, transform; transition-duration: .7s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); }
[class*="ir-fade-"] { opacity: 0; transition: opacity .7s ease; }
.ir-rise-1, .ir-fade-1, .ir-scale-1 { transition-delay: .05s; }
.ir-rise-2, .ir-fade-2, .ir-scale-2 { transition-delay: .12s; }
.ir-rise-3, .ir-fade-3, .ir-scale-3 { transition-delay: .2s; }
.ir-rise-4, .ir-fade-4, .ir-scale-4 { transition-delay: .28s; }
.ir-rise-5, .ir-fade-5, .ir-scale-5 { transition-delay: .36s; }
.ir-rise-6, .ir-fade-6, .ir-scale-6 { transition-delay: .44s; }
.ir-rise-7, .ir-fade-7, .ir-scale-7 { transition-delay: .52s; }
[class*="ir-rise-"] { transform: translate3d(0, 2rem, 0); }
[class*="ir-scale-"] { transform: scale(.92); }
.page-stack .active[class*="ir-rise-"], .page-stack .active[class*="ir-scale-"], .page-stack .active [class*="ir-rise-"], .page-stack .active [class*="ir-scale-"] { opacity: 1; transform: none; }
.page-stack .active[class*="ir-fade-"], .page-stack .active [class*="ir-fade-"] { opacity: 1; }
.infrared-page { position: relative; width: 100%; min-height: calc(100vh - var(--header-height)); padding: 0; overflow: hidden; background: #000; }
.infrared-page__mask { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.infrared-page__mask img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.infrared-page__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - var(--header-height)); width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; }
.infrared-hero { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 52rem; text-align: center; }
.infrared-hero__logo { width: min(18rem, 30vw); margin: 18.5% auto 0; }
.infrared-hero__logo img { display: block; width: 100%; height: auto; }
.infrared-hero__title { margin: 15% 0 0; font-size: clamp(1.625rem, 4.4vw, 3.35rem); font-weight: 700; line-height: 1.2; letter-spacing: .01em; background: linear-gradient(90deg, #FF0004 0%, #5ECBA3 50%, #44ACEF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.infrared-hero__lead { margin: 17% 0 0; max-width: 36rem; font-size: clamp(.9375rem, 1.5vw, 1.125rem); font-weight: 400; line-height: 1.7; color: var(--ir-red); }
.infrared-hero__desc { margin: 4% 0 0; max-width: 34rem; font-size: clamp(.75rem, 1.15vw, .875rem); font-weight: 300; line-height: 1.7; color: var(--ir-muted); }
.infrared-hero__tag { display: inline-flex; align-items: center; justify-content: center; margin: 8% 0 0; padding: .55rem 1.4rem; border: 1px solid #E61B1E; border-radius: 8px; background: rgba(0, 0, 0, .55); box-shadow: 0px 0px 10px 2px #FF000040 inset; font-size: clamp(.75rem, 1.1vw, .875rem); font-weight: 400; line-height: 1.4; color: #FF0000; white-space: nowrap; }
.infrared-body { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 40rem; margin: 10% auto 0; gap: clamp(1.75rem, 3.5vh, 2.75rem); }
.infrared-body__orb { position: absolute; left: 50%; top: 52%; z-index: 0; width: 120%; transform: translate(-50%, -50%); pointer-events: none; -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 72%); mask-image: radial-gradient(circle, #000 38%, transparent 72%); opacity: 0; transition: opacity 1s ease; animation: ir-orb-float 8s ease-in-out infinite; }
.infrared-body__orb.active { opacity: 1; }
.infrared-body__orb video { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
@keyframes ir-orb-float {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, calc(-50% - .6rem)); }
}
.infrared-card { position: relative; z-index: 1; width: 100%; padding: 1.85rem 2.25rem 1.35rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 1.15rem; background: rgba(12, 12, 12, .42); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); text-align: center; }
.infrared-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .1), transparent 68%); pointer-events: none; }
.infrared-card__label, .infrared-card__text, .infrared-card__note, .infrared-card__foot { position: relative; z-index: 1; }
.infrared-card__label { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: clamp(.8125rem, 1.2vw, .9375rem); font-weight: 400; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.infrared-card__label::before, .infrared-card__label::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .88); }
.infrared-card__text { margin: 1.15rem 0 0; font-size: clamp(1rem, 2.1vw, 1.5rem); font-weight: 500; line-height: 1.4; color: var(--ir-cyan); }
.infrared-card__note { margin: .85rem 0 0; font-size: clamp(.6875rem, 1vw, .8125rem); font-weight: 300; line-height: 1.7; color: #9a9a9a; }
.infrared-card__foot { display: flex; align-items: center; gap: .65rem; margin-top: 1.35rem; }
.infrared-card__rule { flex: 1 1 auto; height: 10px; min-width: 1.5rem; background: repeating-linear-gradient(-52deg, #4E4E4E 0, #4E4E4E 1px, transparent 1px, transparent 5px); opacity: .75; }
.infrared-card__rule--mirror { transform: scaleX(-1); }
.infrared-card__foot-text { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; max-width: 62%; padding: 0 .15rem; font-size: clamp(.625rem, .95vw, .75rem); font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;     /* color: var(--ir-red); */ background: linear-gradient(90deg, #FF0004 0%, #5ECBA3 50%, #44ACEF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; white-space: nowrap; }
.infrared-card__foot-text::before, .infrared-card__foot-text::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ir-red); flex-shrink: 0; }
.infrared-page__more { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 10%; margin-bottom: 10%; padding-top: clamp(1.5rem, 4vh, 2.75rem); }
.infrared-page__more span { display: block; width: 80px; height: 80px; margin-top: -60px; border-right: 1.5px solid rgba(255, 255, 255, .85); border-bottom: 1.5px solid rgba(255, 255, 255, .85); transform: rotate(45deg); animation: ir-more-bounce 1.8s ease-in-out infinite; }
.infrared-page__more span:nth-child(2) { animation-delay: .18s; }
@media screen and (max-width:1200px) {
.infrared-page__inner { padding-left: 1.75rem; padding-right: 1.75rem; }
.infrared-card { padding: 1.65rem 1.85rem 1.25rem; }
}
@media screen and (max-width:991px) {
.infrared-page__inner { padding: 2rem 1.5rem 1.75rem; }
.infrared-hero__logo { width: min(7rem, 20vw); margin-top: 10%; }
.infrared-hero__title { margin-top: 5%; font-size: clamp(1.5rem, 3.8vw, 2.125rem); }
.infrared-hero__lead { margin-top: 4%; font-size: clamp(0.8125rem, 1.6vw, 1rem); }
.infrared-hero__desc { margin-top: 2%; font-size: 0.8125rem; }
.infrared-hero__tag { margin-top: 3.5%; padding: .45rem 1.1rem; font-size: 0.8125rem; white-space: normal; max-width: 90%; }
.infrared-body { max-width: 32rem; margin-top: 5%; gap: 1.15rem; }
.infrared-body__orb { width: 110%; }
.infrared-card { padding: 1.35rem 1.35rem 1rem; border-radius: .95rem; }
.infrared-card__label { font-size: 0.8125rem; gap: .55rem; }
.infrared-card__text { margin-top: .85rem; font-size: clamp(0.9375rem, 2vw, 1.25rem); }
.infrared-card__note { margin-top: .65rem; font-size: 0.8125rem; }
.infrared-card__foot { gap: .5rem; margin-top: 1rem; }
.infrared-card__foot-text { font-size: 0.8125rem; letter-spacing: .08em; }
.infrared-page__more { margin-top: 5%; margin-bottom: 6%; padding-top: 1rem; }
.infrared-page__more span { width: 60px; height: 60px; margin-top: -45px; }
}
@media screen and (max-width:576px) {
.infrared-page__mask img {         /* height: 50%; */ }
.infrared-page__inner { padding: 1.5rem 1.15rem 1.25rem; }
.infrared-hero__logo { width: 4.75rem; margin-top: 7%; }
.infrared-hero__title { margin-top: 3.5%; font-size: clamp(1.375rem, 5.2vw, 1.625rem); }
.infrared-hero__lead { margin-top: 3%; font-size: 0.8125rem; }
.infrared-hero__desc { margin-top: 1.5%; font-size: 0.8125rem; }
.infrared-hero__tag { margin-top: 2.5%; padding: .4rem .85rem; font-size: 0.8125rem; }
.infrared-body { margin-top: 3.5%; gap: .9rem; max-width: 100%; }
.infrared-body__orb { width: 105%; }
.infrared-card { padding: 1rem .9rem .85rem; border-radius: .8rem; }
.infrared-card__label { font-size: 0.8125rem; gap: .45rem; }
.infrared-card__text { margin-top: .65rem; font-size: clamp(0.875rem, 3.8vw, 1.0625rem); }
.infrared-card__note { margin-top: .5rem; font-size: 0.8125rem; }
.infrared-card__foot { gap: .35rem; margin-top: .75rem; }
.infrared-card__foot-text { max-width: 70%; font-size: 0.8125rem; letter-spacing: .05em; white-space: normal; text-align: center; }
.infrared-page__more { margin-top: 3.5%; margin-bottom: 4%; padding-top: .75rem; }
.infrared-page__more span { width: 44px; height: 44px; margin-top: -28px; }
}
.infrared-work { position: relative; width: 100%;     /* min-height: calc(100vh - var(--header-height)); */ min-height: 1200px;     /* padding: clamp(3rem, 8vh, 6rem) 2rem clamp(4rem, 8vh, 6.5rem); */ overflow: hidden; background: #000; }
.infrared-work__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.infrared-work__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.infrared-work__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 56rem; margin: 0 auto; text-align: center; }
.infrared-work__badge { margin-top: 156px; display: inline-flex; align-items: center; justify-content: center; padding: .28rem 1.15rem; border-radius: 999px; background: linear-gradient(90deg, #44ACEF 0%, #FF0004 100%); font-size: clamp(.75rem, 1.1vw, .875rem); font-weight: 400; line-height: 1.4; color: #fff; }
.infrared-work__title { margin: 1.35rem 0 0; font-size: clamp(1.5rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1.35; background: linear-gradient(90deg, #FF0004 0%, #5ECBA3 50%, #44ACEF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.infrared-work__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2.75rem; margin-top: 1.5rem; font-size: clamp(.875rem, 1.3vw, 1rem); font-weight: 400; line-height: 1.4; color: var(--ir-red); }
.infrared-work__more { display: flex; flex-direction: column; align-items: center; margin-top: 1.75rem; }
.infrared-work__more span { display: block; width: 30px; height: 30px; margin-top: -15px; border-right: 1.5px solid rgba(255, 255, 255, .85); border-bottom: 1.5px solid rgba(255, 255, 255, .85); transform: rotate(45deg); animation: ir-more-bounce 1.8s ease-in-out infinite; }
.infrared-work__more span:nth-child(2) { animation-delay: .18s; }
@keyframes ir-more-bounce {
0%, 100% { transform: rotate(45deg) translate(0, 0); }
50% { transform: rotate(45deg) translate(5px, 5px); }
}
.infrared-work__stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 40rem; margin: clamp(2.25rem, 6vh, 4.5rem) auto 0; }
.infrared-work__glow { position: absolute; left: 50%; bottom: -18%; z-index: 0; width: min(130%, 48rem); transform: translateX(-50%); pointer-events: none; }
.infrared-work__glow img { display: block; width: 100%; height: auto; }
.infrared-work__watermark { position: absolute; left: 50%; top: 42%; z-index: 0; width: max-content; transform: translate(-50%, -50%); font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 700; letter-spacing: .08em; white-space: nowrap; color: rgba(232, 168, 80, .22); pointer-events: none; }
.infrared-work__card { position: relative; z-index: 1; width: 100%; padding: 2.25rem 2.5rem 2rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 1.15rem; background: rgba(12, 12, 12, .48); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); text-align: center; }
.infrared-work__label, .infrared-work__heading, .infrared-work__desc, .infrared-work__icons { position: relative; z-index: 1; }
.infrared-work__label { margin: 0; font-size: clamp(.8125rem, 1.2vw, .9375rem); font-weight: 400; line-height: 1.5; color: var(--ir-red); }
.infrared-work__heading { margin: .7rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.875rem); font-weight: 700; line-height: 1.35; color: #fff; }
.infrared-work__desc { margin: 1.15rem auto 0; max-width: 32rem; font-size: clamp(.8125rem, 1.2vw, .9375rem); font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, .88); }
.infrared-work__icons { display: flex; align-items: flex-start; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: 2rem; }
.infrared-work__icon { display: flex; flex-direction: column; align-items: center; width: 5.5rem; }
.infrared-work__icon-box { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: .7rem; background: var(--ir-red); overflow: hidden; }
.infrared-work__icon-box img { display: block; width: 62%; height: 62%; object-fit: contain; }
.infrared-work__icon-text { margin-top: .65rem; font-size: clamp(.75rem, 1.1vw, .875rem); font-weight: 400; line-height: 1.4; color: #fff; }
.bg-line { position: absolute; z-index: 3; top: calc(110 / 1920 * 100vw); left: 50%; width: calc(1651 / 1920 * 100vw); transform: translateX(-50%); pointer-events: none; }
.bg-line svg { display: block; width: 100%; height: auto; }
.bg-line circle { opacity: 0; transition: opacity .6s ease; }
.bg-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.25, .46, .45, .94) .25s; }
.infrared-mech.active ~ .bg-line circle { opacity: 1; }
.infrared-mech.active ~ .bg-line path { stroke-dashoffset: 0; }
@media screen and (max-width:1200px) {
.infrared-work { padding-left: 1.75rem; padding-right: 1.75rem; }
.infrared-work__card { padding: 2rem 2rem 1.75rem; }
}
@media screen and (max-width:991px) {
.infrared-work { padding: 2.75rem 1.5rem 3.5rem; }
.infrared-work__nav { gap: .5rem 1.75rem; }
.infrared-work__stage { max-width: 34rem; }
.infrared-work__card { padding: 1.75rem 1.5rem 1.5rem; border-radius: 1rem; }
.infrared-work__watermark { top: 46%; }
}
@media screen and (max-width:576px) {
.infrared-work { padding: 2rem 1.15rem 2.5rem; min-height: 650px; }
.infrared-work__title { margin-top: 1rem; }
.infrared-work__nav { gap: .4rem 1.1rem; margin-top: 1.15rem; }
.infrared-work__more { margin-top: 1.25rem; }
.infrared-work__stage { margin-top: 1.75rem; }
.infrared-work__card { padding: 1.35rem 1.1rem 1.25rem; border-radius: .85rem; }
.infrared-work__heading { margin-top: .5rem; }
.infrared-work__desc { margin-top: .85rem; }
.infrared-work__icons { gap: .85rem; margin-top: 1.35rem; }
.infrared-work__icon { width: 4.5rem; }
.infrared-work__icon-box { width: 2.85rem; height: 2.85rem; border-radius: .55rem; }
.infrared-work__glow { width: min(160%, 28rem); bottom: -12%; }
.infrared-work__badge { margin-top: 40px; }
}
.infrared-story { position: relative; width: 100%; background: #000; }
.infrared-story__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 2.75rem 2.75rem; pointer-events: none; mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 88%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 88%); }
.infrared-story__kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 10px 0 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: #FFFFFF; }
.infrared-story__pills { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.infrared-story__pill { position: absolute; display: inline-flex; align-items: center; width: fit-content; max-width: 100%; gap: .55rem; padding: .55rem 1.05rem; background: rgba(8, 8, 8, .78); font-size: clamp(.75rem, 1vw, .875rem); font-weight: 400; line-height: 1.4; color: #fff; }
.infrared-story__pill-1 { top: 41%; right: 34%; }
.infrared-story__pill-2 { top: 55%; right: 44%; }
.infrared-story__pill-3 { top: 72%; right: 48%; }
.infrared-story__button { max-width: 350px; position: relative; display: inline-block; padding: 10px 30px; border: none; border-radius: 999px;     /* pc 18px */ font-size: 18px; font-weight: 400; background: rgba(255, 255, 255, .08); }
.infrared-story__button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(270deg, rgba(155, 93, 93, 0) 36.58%, #9B5D5D 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.infrared-story__plus { flex-shrink: 0; font-size: 28px; font-weight: 500; line-height: 1; color: var(--ir-red); }
.infrared-mech { position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 0; padding: 5.5% 0% 5.5% 7%; background: #000; }
.infrared-mech__content { position: relative; z-index: 2; padding-left: 50px; }
.infrared-mech__title { margin: .85rem 0 0; font-size: clamp(1.75rem, 3.5vw, 2.875rem); font-weight: 700; line-height: 1.2; }
.infrared-mech__title-text { display: inline-block; color: #FF0004; background: linear-gradient(90deg, #FF0004 0%, #5ECBA3 50%, #44ACEF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.infrared-mech__desc { margin: 1rem 0 0; max-width: 25rem; font-size: 14px; font-weight: 300; line-height: 1.75; color: #FFFFFF78; }
.infrared-mech__visual { position: absolute; width: 60%; max-width: 1000px; right: 0px; top: 250px; bottom: -130px; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 100%; }
.infrared-mech__visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.infrared-value { position: relative; min-height: clamp(36rem, 56vw, 48rem); overflow: hidden; background: #000; }
.infrared-value__bg { position: relative; width: 100%; inset: 0; z-index: 0; }
.infrared-value__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.infrared-value__copy { position: absolute; top: 13%; left: 52%; z-index: 2; text-align: left; }
.infrared-value__copy .infrared-story__kicker { justify-content: flex-start; margin: 0; color: rgba(255, 255, 255, .78); }
.infrared-value__title { margin: .55rem 0 0; font-weight: 700; line-height: 1.25; }
.infrared-value__title-lead { font-size: clamp(1.5rem, 2.8vw, 2.25rem); color: var(--ir-red); font-weight: 100; }
.infrared-value__title-main { margin-top: .15rem; font-size: clamp(1.75rem, 3.4vw, 2.75rem); color: #fff; font-weight: 100; }
.recovery_pills { position: absolute; left: 74%; bottom: 24%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 3.125rem; margin: 0; }
.recovery_pill-item { display: inline-flex; align-items: center; gap: .5rem; }
.recovery_pill-item:nth-child(1), .recovery_pill-item:nth-child(4) { margin-left: 30px; }
.recovery_pill-item:nth-child(2) { margin-left: 40px; }
.recovery_plus { flex-shrink: 0; font-size: 1.15rem; font-weight: 500; line-height: 1; color: var(--ir-red); }
.recovery_button { position: relative; display: flex; align-items: center; justify-content: center; min-width: 13.5rem; min-height: 2.35rem; padding: .5rem 1.35rem; border: none; border-radius: 999px; font-size: clamp(.75rem, 1vw, 1.125rem); font-weight: 400; line-height: 1.4; text-align: center; color: rgba(255, 255, 255, .92); background: rgba(8, 8, 8, .55); }
.recovery_button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(270deg, rgba(155, 93, 93, 0) 36.58%, #9B5D5D 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.infrared-value__brand { position: absolute; left: 6%; bottom: 7%; z-index: 2; font-size: clamp(.75rem, 1.05vw, .875rem); font-weight: 400; line-height: 1.3; color: #fff; background: linear-gradient(90deg, #FF0004 0%, #5ECBA3 50%, #44ACEF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.body-zh .infrared-story__pill-1 { font-size: 18px; max-width: 310px; }
.body-zh .infrared-story__pill-2 { font-size: 18px; max-width: 360px; }
.body-zh .infrared-story__pill-3 { font-size: 18px; max-width: 360px; }
@media screen and (max-width:991px) {
.body-zh .infrared-story__pill-1,
.body-zh .infrared-story__pill-2,
.body-zh .infrared-story__pill-3 { font-size: 16px; max-width: 100%; }
}
@media screen and (max-width:576px) {
.body-zh .infrared-story__pill-1,
.body-zh .infrared-story__pill-2,
.body-zh .infrared-story__pill-3 { font-size: 14px; }
}
@media screen and (max-width:1200px) {
.bg-line { display: none; }
.infrared-story__grid { mask-image: none; -webkit-mask-image: none; opacity: .55; }
.infrared-mech { position: relative; display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; height: auto; min-height: 0; padding: 3rem 2rem 2.5rem; }
.infrared-mech__content { order: 1; padding-left: 1rem; max-width: 52%; }
.infrared-mech__visual { position: absolute; z-index: 1; top: 12%; right: 0%; bottom: auto; width: min(62%, 30rem); max-width: none; min-height: 0; height: auto; margin: 0; }
.infrared-mech__visual img { width: 100%; max-width: none; margin: 0; }
.infrared-story__pill { position: relative; z-index: 2; order: 3; top: auto; right: auto; left: auto; width: auto; max-width: 72%; margin: .85rem 0 0; padding: 0; background: transparent; }
.infrared-story__pill-1, .infrared-story__pill-2, .infrared-story__pill-3 { top: auto; right: auto; }
.infrared-story__button { max-width: none; width: 100%; font-size: 14px; max-width: 600px; }
.infrared-value { display: flex; flex-direction: column; min-height: 0; padding: 2.5rem 2rem 3rem; }
.infrared-value__bg { position: relative; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 1.5rem 0 0; overflow: hidden; }
.infrared-value__bg img { object-position: center center; }
.infrared-value__copy, .recovery_pills, .infrared-value__brand { position: relative; top: auto; right: auto; left: auto; bottom: auto; max-width: none; }
.infrared-value__copy { order: 1; text-align: left; }
.infrared-value__copy .infrared-story__kicker { justify-content: flex-start; }
.recovery_pills { order: 3; width: 100%; max-width: 36rem; gap: 1rem; margin: 1.5rem 0 0; }
.recovery_pill-item, .recovery_pill-item:nth-child(1), .recovery_pill-item:nth-child(2), .recovery_pill-item:nth-child(4) { margin-left: 0; width: 100%; }
.recovery_button { width: 100%; min-width: 0; }
.infrared-value__brand { order: 4; margin-top: 1.75rem; }
}
@media screen and (max-width:991px) {
.infrared-mech { padding: 2.5rem 1.5rem 2.25rem; }
.infrared-mech__content { padding-left: .85rem; max-width: none; }
.infrared-mech__visual { top: 10%; right: 0%; width: min(68%, 26rem); }
.infrared-story__pill { max-width: none; }
.infrared-value { padding: 2.25rem 1.5rem 2.75rem; }
.recovery_pills { max-width: none; }
}
@media screen and (max-width:576px) {
.infrared-mech, .infrared-value { padding: 1.75rem 1.15rem 2rem; }
.infrared-mech__content { padding-left: 0; }
.infrared-mech__title { margin-top: .55rem; font-size: 1.5rem; }
.infrared-mech__desc { max-width: none; font-size: .8125rem; }
.infrared-mech__visual { top: 75%; width: min(78%, 18rem); }
.infrared-story__pill { margin-top: .65rem; }
.infrared-story__button { padding: .65rem 1rem; font-size: .8125rem; }
.infrared-story__plus, .recovery_plus { font-size: 1.125rem; }
.infrared-value__title-lead { font-size: 1.25rem; }
.infrared-value__title-main { font-size: 1.5rem; }
.recovery_pills { gap: .7rem; margin-top: 1.15rem; }
.recovery_button { min-height: 2.1rem; padding: .5rem 1rem; font-size: .8125rem; }
.infrared-value__brand { margin-top: 1.35rem; }
}