/* sic - DEXMA Rescue / Aqua style, copied from kingfax / aiocr */
/* sic - VISION AX point colors from PSD GradientOverlay / ColorOverlay (Watch·Rescue·Aqua) */
._solution.watch .subVis,
._solution.face .subVis,
._solution.rescue .subVis,
._solution.aqua .subVis{
    background-image: url('/asset/img/sub/solution/vision_Ax/subVis_bg.png');
}
._solution.watch .subVis .titArea h1,
._solution.face .subVis .titArea h1,
._solution.rescue .subVis .titArea h1,
._solution.aqua .subVis .titArea h1{
    background-image: linear-gradient(90deg, #2bc9d6, #383ba3);
}
._solution.watch .btns .btn:nth-child(1),
._solution.face .btns .btn:nth-child(1),
._solution.rescue .btns .btn:nth-child(1),
._solution.aqua .btns .btn:nth-child(1){
    background: linear-gradient(90deg, #2bc9d6, #383ba3);
}
._solution.watch .subTit h2 span{ color: #5748cd; }
._solution.rescue .subTit h2 span,
._solution.aqua .subTit h2 span{ color: #2d2f80; }
._solution.face .subTit h2 span{ color: #5748cd; }
._solution.watch .subTit._gr h2 span{ color: #53deea; }
._solution.face .subTit._gr h2 span{ color: #2dafcd; }
._solution.rescue .subTit._gr h2 span,
._solution.aqua .subTit._gr h2 span{ color: #38d6e3; /* sic - PSD Why/Proven FillColor */ }
._solution.watch .subTit._grad h2 span,
._solution.face .subTit._grad h2 span,
._solution.rescue .subTit._grad h2 span,
._solution.aqua .subTit._grad h2 span{
    color: #2bc9d6; background-image: linear-gradient(90deg, #2bc9d6, #383ba3);
}
._solution.watch .techWrap .techs .gradient.gr,
._solution.face .techWrap .techs .gradient.gr,
._solution.rescue .techWrap .techs .gradient.gr,
._solution.aqua .techWrap .techs .gradient.gr{
    background: radial-gradient(circle, rgba(18,174,187,0.85) 0%, rgba(18,174,187,0.4) 40%, rgba(18,174,187,0) 70%);
}
._solution.watch .techWrap .techs .gradient.blu,
._solution.face .techWrap .techs .gradient.blu,
._solution.rescue .techWrap .techs .gradient.blu,
._solution.aqua .techWrap .techs .gradient.blu{
    background: radial-gradient(circle, rgba(45,47,128,0.45) 0%, rgba(45,47,128,0.18) 40%, rgba(45,47,128,0) 70%);
}
._solution.watch .techWrap .techs .tags .tag{ border-color: #5748cd; color: #5748cd; }
._solution.face .techWrap .techs .tags .tag,
._solution.rescue .techWrap .techs .tags .tag,
._solution.aqua .techWrap .techs .tags .tag,
._solution.watch ._gridSec .gridWrap .item .tags .tag,
._solution.face ._gridSec .gridWrap .item .tags .tag{
    border-color: #2d2f80; color: #2d2f80;
}

._solution.watch .techWrap .techs .paging .dot,
._solution.face .techWrap .techs .paging .dot,
._solution.rescue .s1 .techWrap .techs .paging .dot,
._solution.aqua .s1 .techWrap .techs .paging .dot{
    background: #2d2f80;
}
._solution.watch ._roundSec .bg,
._solution.face ._roundSec .bg,
._solution.rescue ._roundSec .bg,
._solution.aqua ._roundSec .bg{
    background: radial-gradient(730px 360px at 50% 100%, rgba(43,201,214,.5) 0%, rgba(56,59,163,.22) 45%, rgba(56,59,163,0) 100%);
}
._solution.watch ._roundSec .bg::after,
._solution.face ._roundSec .bg::after,
._solution.rescue ._roundSec .bg::after,
._solution.aqua ._roundSec .bg::after{
    /* box-shadow: 0 0 30px 0 rgba(43,201,214,.95), 0 0 90px 40px rgba(56,59,163,.55), 0 0 170px 60px rgba(189,230,240,.25); */
}
/* Round glow scaled down like solution.css so it is not clipped at section top */
@media screen and (max-width: 1280px){
._solution.watch ._roundSec .bg::after,
._solution.face ._roundSec .bg::after,
._solution.rescue ._roundSec .bg::after,
._solution.aqua ._roundSec .bg::after{ box-shadow: 0 0 26px 0 rgba(43,201,214,.95), 0 0 76px 34px rgba(56,59,163,.55), 0 0 140px 50px rgba(189,230,240,.25); }
}
@media screen and (max-width: 820px){
._solution.watch ._roundSec .bg::after,
._solution.face ._roundSec .bg::after,
._solution.rescue ._roundSec .bg::after,
._solution.aqua ._roundSec .bg::after{ box-shadow: 0 0 20px 0 rgba(43,201,214,.95), 0 0 60px 24px rgba(56,59,163,.55), 0 0 110px 36px rgba(189,230,240,.25); }
}
@media screen and (max-width: 500px){
._solution.watch ._roundSec .bg::after,
._solution.face ._roundSec .bg::after,
._solution.rescue ._roundSec .bg::after,
._solution.aqua ._roundSec .bg::after{ box-shadow: 0 0 14px 0 rgba(43,201,214,.95), 0 0 40px 16px rgba(56,59,163,.55), 0 0 70px 24px rgba(189,230,240,.25); }
}
._solution.watch .compare .after .inn ul li p span,
._solution.face .compare .after .inn ul li p span{ color: #2dafcd; }
._solution.rescue .compare .after .inn ul li p span,
._solution.aqua .compare .after .inn ul li p span{ color: #38d6e3; /* sic - PSD After StyleRun */ }
/* ._solution.watch .compare .after .inn ul li i,
._solution.face .compare .after .inn ul li i{ color: #2dafcd; }
._solution.rescue .compare .after .inn ul li i,
._solution.aqua .compare .after .inn ul li i{ color: #38d6e3; } */
._solution.watch .compare .after,
._solution.face .compare .after{
    /* background-image: linear-gradient(#0d0d23, #0d0d23), linear-gradient(90deg, #2dafcd 0%, #2d2f80 100%); */
}
._solution.rescue .compare .after,
._solution.aqua .compare .after{
    /* background-image: linear-gradient(#0d0d23, #0d0d23), linear-gradient(90deg, #38d6e3 0%, #2d2f80 100%); */
}
/* sic - watch After 보더 그라데이션 #53deea → #5748cd (solution.css .bdFlow 색상만 교체) */
._solution.watch._da .compare .after .bdFlow,
._solution.watch .compare .after .bdFlow{
    background: conic-gradient(from var(--kfBdAngle),
        #53deea 0deg,
        #5748cd 90deg,
        #53deea 180deg,
        #5748cd 270deg,
        #53deea 360deg);
}
._solution.watch .compare .dots>div,
._solution.face .compare .dots>div{ background: #2dafcd; }
._solution.rescue .compare .dots>div,
._solution.aqua .compare .dots>div{ background: #38d6e3; }
._solution.watch ._whySec .whyWrap .item,
._solution.face ._whySec .whyWrap .item{ background: #262637; }
._solution.watch ._whySec .whyWrap .item span,
._solution.face ._whySec .whyWrap .item span{ color: #2dafcd; }
/* sic - Watch detect title FillColor #66caf3 (overrides watch _gr Why #2dafcd) */
._solution.watch ._detectSec .subTit._gr h2 span{ color: #66caf3; font-weight: 600; }

._solution.rescue .subVis,
._solution.aqua .subVis{ z-index: 1; }
._solution.rescue .s1,
._solution.aqua .s1{ box-sizing: border-box; padding: 92px 0 0; background: #fff; position: relative;z-index: 2; }
._solution.rescue .s1>.inner,
._solution.aqua .s1>.inner{ box-sizing: border-box; padding: 58px 0 59px; background: #fff; }
._solution.rescue .s1 .techWrap .techs .topVis,
._solution.aqua .s1 .techWrap .techs .topVis{ position: relative; z-index: 1; }
._solution.rescue .s1 .techWrap .techs .txtArea,
._solution.rescue .s1 .techWrap .techs .tags,
._solution.rescue .s1 .techWrap .techs .paging,
._solution.aqua .s1 .techWrap .techs .txtArea,
._solution.aqua .s1 .techWrap .techs .tags,
._solution.aqua .s1 .techWrap .techs .paging{ position: relative; z-index: 1; }
._solution.rescue .s1 .techWrap .techs .tech,
._solution.aqua .s1 .techWrap .techs .tech{ position: relative; flex: 1;min-height: 0; z-index: 1; }
._solution.rescue .s1 .techWrap .techs .tech .item.on,
._solution.aqua .s1 .techWrap .techs .tech .item.on{ pointer-events: auto; opacity: 0; }

._solution.rescue .techWrap .tech .tags,
._solution.aqua .techWrap .tech .tags{ margin-top: 32px; }

/* sic - superseded: guessed % coords → PSD bbox at file end
._solution.rescue .s1 .techWrap .techs .topVis .layer,
._solution.aqua .s1 .techWrap .techs .topVis .layer{ max-width: 280px; width: 40%; }
._solution.rescue .s1 .techWrap .techs .topVis .layer img,
._solution.aqua .s1 .techWrap .techs .topVis .layer img{ width: 100%; height: auto; display: block; }
._solution.rescue .s1 .techWrap .techs .topVis .layer._1,
._solution.aqua .s1 .techWrap .techs .topVis .layer._1{ top: 18%;left: 6%; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1,
._solution.aqua .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ top: 20%; left: 6%; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1,
._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{ top: 12%; left: 4%; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2,
._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2{ top: 10%; left: auto; right: 4%; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1,
._solution.aqua .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ top: 10%; left: 6%; }
*/
._solution.rescue .s1 .techWrap .tech .txtArea,
._solution.aqua .s1 .techWrap .tech .txtArea{ display: flex;flex-direction: column;align-items: center; margin-top: 50px; }
._solution.rescue .s1 .techWrap .techs .paging,
._solution.aqua .s1 .techWrap .techs .paging{ display: flex;align-items: center;justify-content: center;gap: 4px; margin-top: 32px; flex-shrink: 0; }
._solution.rescue .s1 .techWrap .techs .paging .dot,
._solution.aqua .s1 .techWrap .techs .paging .dot{ width: 9px;height: 9px; border-radius: 50%; background: #2d2f80; opacity: 0.2; }
._solution.rescue .s1 .techWrap .techs .paging .dot.on,
._solution.aqua .s1 .techWrap .techs .paging .dot.on{  opacity: 1; }
._solution.rescue .s2 .subTit,
._solution.aqua .s2 .subTit{ margin-bottom: 150px; position: relative;z-index: 10; }
._solution.rescue .s2 .subTit._gr h2,
._solution.aqua .s2 .subTit._gr h2{ font-weight: 400; }
._solution.rescue .s2,
._solution.aqua .s2{ overflow-x: clip; } /* marqueeWrap::after 그라데이션(폭 126%)이 모바일에서 화면 밖으로 나가 가로스크롤 생김 */
._solution.rescue .s2 .marqueeWrap,
._solution.aqua .s2 .marqueeWrap{ width: 100%; position: relative; }
._solution.rescue .s2 .marqueeWrap::after,
._solution.aqua .s2 .marqueeWrap::after{ content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: calc(1920 / 1520 * 100%); aspect-ratio: 1920/1020; transform: translate(-50%, -60.2%); background: url('/asset/img/sub/solution/document_Ax/gradient.png') center/100% 100% no-repeat; pointer-events: none; mix-blend-mode: lighten; }
._solution.rescue .s2 .marqueeWrap .marquee,
._solution.aqua .s2 .marqueeWrap .marquee{ width: 100%; display: flex;align-items: center; overflow: hidden; white-space: nowrap; position: relative; gap: 80px; }
._solution.rescue .s2 .marqueeWrap .marquee::before,
._solution.aqua .s2 .marqueeWrap .marquee::before{
    content: ''; display: block; z-index: 1; position: absolute;top: 0;left: 0; width: 18.75vw;height: 100%;
    background: linear-gradient(-90deg, rgba(13, 13, 35, 0) 0%, #0d0d23 70%, #0d0d23 100%); z-index: 1;
}
._solution.rescue .s2 .marqueeWrap .marquee::after,
._solution.aqua .s2 .marqueeWrap .marquee::after{
    content: '';display: block;z-index: 1;position: absolute;top: 0;right: 0;width: 18.75vw;height: 100%;
    background: linear-gradient(90deg, rgba(13, 13, 35, 0) 0%,  #0d0d23 70%,  #0d0d23 100%); z-index: 1;
}
._solution.rescue .s2 .marqueeWrap .marquee>div,
._solution.aqua .s2 .marqueeWrap .marquee>div{ display: flex;align-items: center; gap: 80px; animation: marquee 20s linear infinite; }
._solution.rescue .s2 .marqueeWrap .marquee>div .ic,
._solution.aqua .s2 .marqueeWrap .marquee>div .ic{ display: flex;align-items: center; font-family: 'Archivo'; font-size: 17px; letter-spacing: -0.025em;color: #fff; line-height: 1;  }
._solution.rescue .s2 .marqueeWrap .marquee>div p,
._solution.aqua .s2 .marqueeWrap .marquee>div p{ font-size: 24px;font-weight: 500;letter-spacing: -0.025em;color: #fff; line-height: 1; }
._solution.rescue .s2 .marqueeWrap .marquee>div p span,
._solution.aqua .s2 .marqueeWrap .marquee>div p span{ font-size: 32px;font-weight: 700;letter-spacing: -0.025em; }
._solution.rescue .s3,
._solution.aqua .s3{ background: #0d0d23; padding: 130px 0; }
/* ._solution.rescue .s3 .subTit,
._solution.aqua .s3 .subTit{ margin-bottom: 72px; } */

@media screen and (max-width: 1024px){
    ._solution.rescue .s2 .subTit,
    ._solution.aqua .s2 .subTit{ margin-bottom: 100px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div p,
    ._solution.aqua .s2 .marqueeWrap .marquee>div p{ font-size: 20px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div p span,
    ._solution.aqua .s2 .marqueeWrap .marquee>div p span{ font-size: 28px; }
}
@media screen and (max-width: 820px){
    ._solution.rescue .s1 .techWrap .techs .paging .dot,
    ._solution.aqua .s1 .techWrap .techs .paging .dot{ width: 7px;height: 7px; }
    ._solution.rescue .s1 .techWrap .tech .txtArea,
    ._solution.aqua .s1 .techWrap .tech .txtArea{ margin-top: 30px; }

    ._solution.rescue .s2 .subTit,
    ._solution.aqua .s2 .subTit{ margin-bottom: 60px; }
    ._solution.rescue .s2 .marqueeWrap .marquee,
    ._solution.aqua .s2 .marqueeWrap .marquee{ gap: 60px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div,
    ._solution.aqua .s2 .marqueeWrap .marquee>div{ gap: 60px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div p,
    ._solution.aqua .s2 .marqueeWrap .marquee>div p{ font-size: 18px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div p span,
    ._solution.aqua .s2 .marqueeWrap .marquee>div p span{ font-size: 24px; }
}
@media screen and (max-width: 500px){
    ._solution.rescue .s2 .marqueeWrap .marquee,
    ._solution.aqua .s2 .marqueeWrap .marquee{ gap: 40px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div,
    ._solution.aqua .s2 .marqueeWrap .marquee>div{ gap: 40px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div p,
    ._solution.aqua .s2 .marqueeWrap .marquee>div p{ font-size: 16px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div p span,
    ._solution.aqua .s2 .marqueeWrap .marquee>div p span{ font-size: 20px; }
    ._solution.rescue .s2 .marqueeWrap .marquee>div .ic,
    ._solution.aqua .s2 .marqueeWrap .marquee>div .ic{ font-size: 16px; }
}

/* sic - (다) DEXMA Watch / Face */
._solution.watch .subVis,
._solution.face .subVis{ z-index: 1; }
._solution.watch ._compareSec,
._solution.face ._compareSec,
._solution.watch ._cardSec,
._solution.face ._cardSec,
._solution.watch ._gridSec,
._solution.face ._gridSec{ position: relative; z-index: 2; }
/* sic - Face BA: PSD 1202x597; beat _da rangeBx display:none; box matches img so cover does not crop overlays */
._solution.face._da .compareWrap._hor .rangeBx,
._solution.face .compareWrap._hor .rangeBx{ display: block; }
._solution.face .compareWrap._hor .rangeBx::before{ padding-top: calc(597 / 1202 * 100%); }
._solution.face .rangeBx .range img{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* ._solution.watch .subVis .titArea h1,
._solution.face .subVis .titArea h1{ font-size: 86px; } */
@media screen and (max-width: 1440px){
    /* ._solution.watch .subVis .titArea h1,
    ._solution.face .subVis .titArea h1{ font-size: 68px; } */
}
@media screen and (max-width: 820px){
    /* ._solution.watch .subVis .titArea h1,
    ._solution.face .subVis .titArea h1{ font-size: 42px; } */
}

/* sic - (다) Watch / Face: aifax How / Why / Core / techWrap 1:1 */
/* sic - (다) Watch / Face Fax Q&A형: blobs in gradClip, layers PSD coords */
._solution.watch._da ._cardSec .techWrap,
._solution.watch ._cardSec .techWrap,
._solution.face._da ._cardSec .techWrap,
._solution.face ._cardSec .techWrap{ overflow: visible; }
._solution.watch._da ._cardSec .techWrap .techs,
._solution.watch ._cardSec .techWrap .techs,
._solution.face._da ._cardSec .techWrap .techs,
._solution.face ._cardSec .techWrap .techs{
    background: #fff; overflow: visible; padding: 50px 0 50px; height: auto; min-height: 0; max-width: 1202px;
}
._solution.watch._da ._cardSec .techWrap .techs .gradClip,
._solution.watch ._cardSec .techWrap .techs .gradClip,
._solution.face._da ._cardSec .techWrap .techs .gradClip,
._solution.face ._cardSec .techWrap .techs .gradClip{
    position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; z-index: 0;
}
._solution.watch ._cardSec .techWrap .techs .tech .item,
._solution.face ._cardSec .techWrap .techs .tech .item{
    position: relative; display: flex; flex-direction: column; height: auto; pointer-events: auto; overflow: visible;
}
._solution.watch._da ._cardSec .techWrap .techs .topVis,
._solution.watch ._cardSec .techWrap .techs .topVis,
._solution.face._da ._cardSec .techWrap .techs .topVis,
._solution.face ._cardSec .techWrap .techs .topVis{ position: relative; z-index: 2; overflow: visible; }
._solution.watch._da ._cardSec .techWrap .techs .topVis .img,
._solution.watch ._cardSec .techWrap .techs .topVis .img,
._solution.face._da ._cardSec .techWrap .techs .topVis .img,
._solution.face ._cardSec .techWrap .techs .topVis .img{
    max-width: 634px; width: 53%; height: auto; aspect-ratio: 634/324; margin: 0 auto; overflow: visible;
}
._solution.watch ._cardSec .techWrap .techs .topVis .img img,
._solution.face ._cardSec .techWrap .techs .topVis .img img{
    width: 100%; height: auto; object-fit: contain; display: block;
}
._solution.watch._da ._cardSec .techWrap .techs .topVis .layer,
._solution.watch ._cardSec .techWrap .techs .topVis .layer,
._solution.face._da ._cardSec .techWrap .techs .topVis .layer,
._solution.face ._cardSec .techWrap .techs .topVis .layer{
    max-width: none; width: auto; z-index: 2;
}
/* sic - Watch 배경 img 인트로(rescue 동일): 아래→위 등장 클리핑 + 첫 layer 등장 시 --dim 오버레이 */
._solution.watch._da ._cardSec .techWrap .techs .topVis > .img,
._solution.watch ._cardSec .techWrap .techs .topVis > .img{ position: relative; overflow: hidden; --dim: 0; }
._solution.watch ._cardSec .techWrap .techs .topVis > .img::after{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 10px;
    background: rgba(0, 0, 0, 0.5); opacity: var(--dim);
}
/* sic - Face 배경 img 인트로(rescue / kingfax 동일): 아래→위 등장 클리핑 + 첫 layer 등장 시 --dim 오버레이 */
._solution.face._da ._cardSec .techWrap .techs .topVis > .img,
._solution.face ._cardSec .techWrap .techs .topVis > .img{ position: relative; overflow: hidden; --dim: 0; }
._solution.face ._cardSec .techWrap .techs .topVis > .img::after{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 10px;
    background: rgba(0, 0, 0, 0.5); opacity: var(--dim);
}
/* sic - Face layer01: PNG 대신 layer01.html(SVG) 카드. PNG에 구워져 있던 그림자는 filter로 대체 */
._solution.face ._cardSec .techWrap .techs .topVis .layer svg{ display: block; width: 100%; height: auto; }
._solution.face ._cardSec .techWrap .techs .topVis .layer._1 svg,
._solution.face ._cardSec .techWrap .techs .topVis .layer._2 svg{ filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12)); }
._solution.watch ._cardSec .techWrap .techs .topVis .layer .img,
._solution.face ._cardSec .techWrap .techs .topVis .layer .img{
    max-width: none; width: 100%; aspect-ratio: auto; margin: 0; overflow: visible;
}
._solution.watch ._cardSec .techWrap .techs .topVis .layer img,
._solution.face ._cardSec .techWrap .techs .topVis .layer img{
    width: 100%; height: auto; display: block; /* sic - DropShadow baked in PSD PNG */
}
._solution.watch._da ._cardSec .techWrap .techs .topVis .layer._1,
._solution.watch ._cardSec .techWrap .techs .topVis .layer._1{
    /* sic - PSD 카드 01 vis (20,51) 438x254 */
    /*top: calc(51 / 324 * 100%); left: calc(20 / 1202 * 100%);*/  
    top: 56%;transform: translateY(-50%); left: 5%;
    width: calc(438 / 1202 * 100%); max-width: 356px; right: auto;
}
._solution.watch._da ._cardSec .techWrap .techs .topVis .layer._2,
._solution.watch ._cardSec .techWrap .techs .topVis .layer._2{
    /* sic - PSD 카드02 vis (700,51) 482x329 */
    /* top: calc(51 / 324 * 100%); left: calc(700 / 1202 * 100%); */
    top: 27%; left: 63%;
    width: calc(482 / 1202 * 100%); max-width: 400px; right: auto;
}
._solution.face._da ._cardSec .techWrap .techs .topVis .layer._1,
._solution.face ._cardSec .techWrap .techs .topVis .layer._1{
    /* sic - PSD popup_01 bounds (415,2876) 494x370; card 359 / img top 2883 */
    top: calc(-7 / 324 * 100%); left: calc(56 / 1202 * 100%);
    width: calc(494 / 1202 * 100%); max-width: 475px; right: auto;
}
._solution.face._da ._cardSec .techWrap .techs .topVis .layer._2,
._solution.face ._cardSec .techWrap .techs .topVis .layer._2{
    /* sic - PSD popup_02 bounds (997,2876) 517x370 */
    top: calc(-7 / 324 * 100%); left: calc(638 / 1202 * 100%);
    width: calc(517 / 1202 * 100%); max-width: 475px; right: auto;
}
._solution.watch._da ._cardSec .techWrap .tech .txtArea,
._solution.watch ._cardSec .techWrap .tech .txtArea,
._solution.face._da ._cardSec .techWrap .tech .txtArea,
._solution.face ._cardSec .techWrap .tech .txtArea{ position: relative; z-index: 1; margin-top: 53px; }
/* ._solution.watch ._cardSec .techWrap .tech .txtArea h3,
._solution.face ._cardSec .techWrap .tech .txtArea h3{ font-size: 38px; }
._solution.watch ._cardSec .techWrap .tech .tags,
._solution.face ._cardSec .techWrap .tech .tags{ margin-top: 28px; }
._solution.watch ._cardSec .techWrap .tech .tags .tag,
._solution.face ._cardSec .techWrap .tech .tags .tag{ padding: 11px 24px; min-width: 0; height: auto; } */

._solution.face ._gridSec .gridWrap{ gap: 86px 40px; }
/* sic - Core thumbs: PSD img bbox PNG 그대로. CSS 라운드/스트레치 없음 */
/* ._solution.face ._gridSec .gridWrap .item .imgBx{
    max-width: 740px; aspect-ratio: auto; height: auto;
    border-radius: 0; overflow: visible;
} */
._solution.face ._gridSec .gridWrap .item .imgBx::after{ display: none; }
/* sic - Core: 통이미지 + hover 시 배경 img 어둡게(brightness) / layer 등장은 dexmaface.php 하단 GSAP 담당 */
._solution.face ._gridSec .gridWrap .item .imgBx .img{
    max-width: 740px; height: auto; border-radius: 0; overflow: visible;
}
._solution.face ._gridSec .gridWrap .item .imgBx .img::after{ display: none; }
._solution.face ._gridSec .gridWrap .item .imgBx .img img{
    position: relative; width: 100%; height: auto; display: block;
}
/* sic - 국문 grid_bg02/04는 1400x1000 원본(상단 ~140px / 하단 ~80px 여백 포함)이라 박스(738/433)에 꽉 채우고 콘텐츠(y 140~920) 기준으로 위치 보정 */
._solution.face ._gridSec .gridWrap .item .imgBx .img:has(img[src*="/face/grid_bg02"]),
._solution.face ._gridSec .gridWrap .item .imgBx .img:has(img[src*="/face/grid_bg04"]){ height: 100%; }
._solution.face ._gridSec .gridWrap .item .imgBx .img img[src*="/face/grid_bg02"],
._solution.face ._gridSec .gridWrap .item .imgBx .img img[src*="/face/grid_bg04"]{
    height: 100%; object-fit: cover; object-position: 50% 67%;
}
/* ._solution.face ._gridSec .gridWrap .item .txtBx{ padding: 40px 4px 0; }
._solution.face ._gridSec .gridWrap .item .txtBx h3{ font-size: 38px; margin-bottom: 18px; }
._solution.face ._gridSec .gridWrap .item .txtBx p{ font-size: 22px; line-height: 1.45; }
._solution.face ._gridSec .gridWrap .item .tags{ gap: 6px; margin-top: 38px; }
._solution.face ._gridSec .gridWrap .item .tags .tag{
    min-width: 124px; height: 48px; padding: 0 18px; border-radius: 24px;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
} */

/* sic - How: kingfax ellipse dome. bgFill starts at ellipse equator so it never cuts the round. */
._solution.watch ._flowSec._roundSec,
._solution.face ._flowSec._roundSec{
    --round-top: 200px;
    --round-half: max(39.32cqw, 50%);
    background: #fff;
    padding: 520px 0 200px;
}
._solution.watch ._flowSec._roundSec .wrap,
._solution.face ._flowSec._roundSec .wrap{ position: relative; z-index: 1; }
._solution.watch ._flowSec._roundSec .bg,
._solution.face ._flowSec._roundSec .bg{ background: none; inset: 0; }
._solution.watch ._flowSec._roundSec .bgFill,
._solution.face ._flowSec._roundSec .bgFill{
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    top: calc(var(--round-top) + var(--round-half));
    background: #0d0d23;
    z-index: 0;
    pointer-events: none;
}
._solution.watch ._flowSec .flowDesc,
._solution.face ._flowSec .flowDesc{ font-size: 20px; color: rgba(255,255,255,.78); margin-top: 28px; }
/* sic - Watch How desc #e3e3e3; h2→desc 49, desc→cards 81 from PSD bbox */
._solution.watch ._flowSec .flowDesc{ color: #e3e3e3; margin-top: 49px; }
._solution.watch ._flowSec .flowSteps{ margin-top: 81px; }
._solution.watch ._flowSec .flowCards{
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
}
._solution.watch ._flowSec .flowCards .item{
    box-sizing: border-box; height: 294px; border-radius: 16px; background: #41414e;
    padding: 0 10px; text-align: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
._solution.watch ._flowSec .flowCards .item._grad{
    background: linear-gradient(180deg, #2bc9d6 0%, #3742a5 100%);
}
._solution.watch ._flowSec .flowCards .item .ic{
    width: 60px; height: 60px; margin: 0 0 32px; flex-shrink: 0;
}
._solution.watch ._flowSec .flowCards .item .ic img{
    width: 60px; height: 60px; display: block;
}
._solution.watch ._flowSec .flowCards .item .num{
    display: block; font-family: 'Pretendard'; font-size: 15px; font-weight: 400;
    letter-spacing: -0.025em; line-height: 1; color: #fff; margin-bottom: 15px;
}
._solution.watch ._flowSec .flowCards .item h3{
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.3;
    color: #fff; margin-bottom: 10px;
}
._solution.watch ._flowSec .flowCards .item p{
    font-size: 16px; font-weight: 400; letter-spacing: -0.025em; line-height: 1;
    color: #9a9a9f;
}
._solution.watch ._flowSec .flowCards .item._grad p{ color: #fff; }
._solution.watch ._flowSec .flowStages{
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 19px;
}
._solution.watch ._flowSec .flowStages .stage{
    box-sizing: border-box; height: 68px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 500; letter-spacing: -0.025em; line-height: 1; font-size: 24px;
    white-space: nowrap;
}
._solution.watch ._flowSec .flowStages .stage._1{
    grid-column: 2 / 4;
    background: #0d0d23; border: 2px solid #41414e; color: #ccc;
}
/* sic - superseded: stage._2 고정 활성 (순차 점등 루프로 대체)
._solution.watch ._flowSec .flowStages .stage._2{
    grid-column: 4 / 6; color: #2dafcd; border: 2px solid transparent;
    background-image: linear-gradient(#0d0d23, #0d0d23), linear-gradient(90deg, #2bc9d6 0%, #2d3083 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
*/
._solution.watch ._flowSec .flowStages .stage._2{
    grid-column: 4 / 6;
    background: #0d0d23; border: 2px solid #41414e; color: #ccc;
}
/* 순차 점등 (_on: dexmawatch.php initFlowLight) - gradient 는 transition 불가 → ::before opacity 페이드 */
._solution.watch ._flowSec .flowCards .item{ position: relative; isolation: isolate; }
._solution.watch ._flowSec .flowCards .item::before{
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, #2bc9d6 0%, #3742a5 100%);
    opacity: 0; transition: opacity .4s ease;
}
._solution.watch ._flowSec .flowCards .item p{ transition: color .4s ease; }
/* 아이콘: 흰색 png + 그라데이션 박스 배경 (비활성 시 노출, 활성 시 페이드아웃) */
._solution.watch ._flowSec .flowCards .item .ic{ position: relative; isolation: isolate; border-radius: 10px; }
._solution.watch ._flowSec .flowCards .item .ic::before{
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, #2bc9d6 0%, #3742a5 100%);
    transition: opacity .4s ease;
}
._solution.watch ._flowSec .flowCards .item._on .ic::before{ opacity: 0; }
._solution.watch ._flowSec .flowCards .item._on::before{ opacity: 1; }
._solution.watch ._flowSec .flowCards .item._on p{ color: #fff; }
._solution.watch ._flowSec .flowStages .stage{ position: relative; transition: color .4s ease, border-color .4s ease; }
._solution.watch ._flowSec .flowStages .stage::before{
    content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
    background: linear-gradient(90deg, #2bc9d6 0%, #2d3083 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0; transition: opacity .4s ease;
}
._solution.watch ._flowSec .flowStages .stage._on{ color: #2dafcd; border-color: transparent; }
._solution.watch ._flowSec .flowStages .stage._on::before{ opacity: 1; }

/* sic - Why: PSD type layers scaled ~0.834; visual 16/28/20, body 70% */
._solution.watch ._whySec,
._solution.face ._whySec{ padding: 90px 0 80px; }
/* ._solution.watch ._whySec .whyWrap,
._solution.face ._whySec .whyWrap{ gap: 26px; margin-top: 78px; } */
._solution.watch ._whySec .whyWrap .item,
._solution.face ._whySec .whyWrap .item{
    text-align: center; padding: 58px 22px 48px; min-height: 497px;
    display: flex; flex-direction: column; align-items: center;
}
._solution.watch ._whySec .whyWrap .item span,
._solution.face ._whySec .whyWrap .item span{
    font-size: 16px; font-weight: 400; letter-spacing: -0.025em; line-height: 1; color: #2dafcd; margin-bottom: 50px;
}
._solution.watch ._whySec .whyWrap .item .ic,
._solution.face ._whySec .whyWrap .item .ic{
    width: 90px; height: 68px; display: flex; align-items: center; justify-content: center; margin-bottom: 67px;
}
._solution.watch ._whySec .whyWrap .item .ic img,
._solution.face ._whySec .whyWrap .item .ic img{ max-width: 90px; max-height: 68px; width: auto; height: auto; }
._solution.watch ._whySec .whyWrap .item h3,
._solution.face ._whySec .whyWrap .item h3{
    font-size: 28px; font-weight: 600; line-height: 39px; letter-spacing: -0.025em; margin-bottom: 36px;
}
._solution.face ._whySec .whyWrap .item em{
    display: block; font-style: normal; font-weight: 400; font-size: 13px; line-height: 16px; white-space: nowrap;
    letter-spacing: -0.025em; color: #fff; margin-top: -30px; margin-bottom: 14px;
}
/* sic - em net height 0 (-30 + 16 + 14): p stays aligned with cards without em */
._solution.watch ._whySec .whyWrap .item p,
._solution.face ._whySec .whyWrap .item p{
    font-size: 20px; font-weight: 400; line-height: 32px; letter-spacing: -0.025em; color: rgba(255,255,255,.7);
}
/* sic - JP: 띄어쓰기 없는 일문은 keep-all 시 줄바꿈 불가 → 본문은 금칙처리 + 문절 단위(auto-phrase) 줄바꿈, 제목은 <br> 위치에서만 줄바꿈 (한 글자만 떨어지는 현상 방지) */
html.jp ._solution.face ._whySec .whyWrap .item h3,
html.jp ._solution.face ._whySec .whyWrap .item p{ word-break: normal; line-break: strict; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase){
    html.jp ._solution.face ._whySec .whyWrap .item p{ word-break: auto-phrase; }
}
html.jp ._solution.face ._whySec .whyWrap .item h3{ word-break: keep-all; }
/* sic - JP: 한자/가나 글자폭이 커서 제목은 2줄 높이를 확보해 카드별 하단 설명 시작 위치를 동일하게, 본문 18px로 국문처럼 2줄 유지
   em(등록특허)이 붙은 1줄 제목은 2줄 높이 확보 대신 em이 제목 바로 아래(국문과 동일 6px) 위치 → 비어있는 1줄 높이만큼 em margin-bottom에 더해 p 위치 동일
   PC: h3 34 + 26 - 20(em top 6px) + 16 + 38 = 94 (= 다른 카드 68 + 26) */
@media screen and (min-width: 1025px){
    html.jp ._solution.face ._whySec .whyWrap .item{ padding-left: 16px; padding-right: 16px; }
    html.jp ._solution.face ._whySec .whyWrap .item h3{ font-size: 24px; line-height: 34px; min-height: 68px; margin-bottom: 26px; }
    html.jp ._solution.face ._whySec .whyWrap .item h3:has(+ em){ min-height: 0; }
    html.jp ._solution.face ._whySec .whyWrap .item em{ margin-top: -20px; margin-bottom: 38px; }
    html.jp ._solution.face ._whySec .whyWrap .item p{ font-size: 18px; line-height: 30px; }
}
/* 태블릿: h3 30 + 36 - 30 + 16 + 44 = 96 (= 다른 카드 60 + 36) */
@media screen and (min-width: 641px) and (max-width: 1024px){
    html.jp ._solution.face ._whySec .whyWrap .item h3{ min-height: 60px; }
    html.jp ._solution.face ._whySec .whyWrap .item h3:has(+ em){ min-height: 0; }
    html.jp ._solution.face ._whySec .whyWrap .item em{ margin-bottom: 44px; }
}
._solution.watch ._bannerSec .marqueeWrap .marquee>div img,
._solution.face ._bannerSec .marqueeWrap .marquee>div img{
    width: 100%; height: auto; display: block; filter: none;
}
/* sic - BA After: PSD StyleRun mint #bdfeee, Font 0 regular */
._solution.watch._da .compare .after .inn ul li p,
._solution.watch .compare .after .inn ul li p,
._solution.face._da .compare .after .inn ul li p,
._solution.face .compare .after .inn ul li p{ font-weight: 400; }
._solution.watch._da .compare .after .inn ul li p span,
._solution.watch .compare .after .inn ul li p span,
._solution.face._da .compare .after .inn ul li p span,
._solution.face .compare .after .inn ul li p span{ color: #2dafcd; font-weight: 400; }
._solution.rescue._da .compare .after .inn ul li p span,
._solution.rescue .compare .after .inn ul li p span,
._solution.aqua._da .compare .after .inn ul li p span,
._solution.aqua .compare .after .inn ul li p span{ color: #38d6e3; font-weight: 400; }
/* sic - Aqua Before title pipe: Pretendard, smaller than Archivo Before */
._solution.aqua .compare .before .inn > p span{
    display: inline;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: rgba(255,255,255,.55);
    margin-left: 10px;
    vertical-align: middle;
}
@media screen and (max-width: 1600px){
    /* ._solution.face ._gridSec .gridWrap .item .txtBx h3{ font-size: 32px; }
    ._solution.watch ._cardSec .techWrap .tech .txtArea h3,
    ._solution.face ._cardSec .techWrap .tech .txtArea h3{ font-size: 34px; } */
    ._solution.watch ._flowSec._roundSec,
    ._solution.face ._flowSec._roundSec{ padding: 480px 0 200px; --round-top: 180px; }
}
@media screen and (max-width: 1440px){
    /* ._solution.face ._gridSec .gridWrap .item .txtBx h3{ font-size: 28px; }
    ._solution.face ._gridSec .gridWrap .item .txtBx p{ font-size: 18px; } */
    ._solution.watch ._flowSec._roundSec,
    ._solution.face ._flowSec._roundSec{ padding: 380px 0 200px; --round-top: 160px; }
}
@media screen and (max-width: 1280px){
    ._solution.watch ._flowSec._roundSec,
    ._solution.face ._flowSec._roundSec{ padding: 330px 0 120px; --round-top: 140px; }
    ._solution.watch ._flowSec .flowCards .item .num{ margin-bottom: 15px;}
    ._solution.watch ._flowSec .flowCards .item h3{ margin-bottom: 15px; }
    ._solution.aqua .compare .before .inn > p span{ font-size: 18px; }
}
@media screen and (max-width: 1024px){
    ._solution.watch ._flowSec .flowCards{ grid-template-columns: repeat(3, 1fr); }
    ._solution.watch ._flowSec .flowCards .item{ height: auto; min-height: 260px; padding: 40px 12px 36px; }
    ._solution.watch ._flowSec .flowStages{ grid-template-columns: 1fr 1fr; }
    ._solution.watch ._flowSec .flowStages .stage._1,
    ._solution.watch ._flowSec .flowStages .stage._2{ grid-column: auto; }
    ._solution.watch ._whySec .whyWrap .item,
    ._solution.face ._whySec .whyWrap .item{ min-height: 0; padding: 32px 20px; }
    ._solution.watch ._whySec .whyWrap .item span,
    ._solution.face ._whySec .whyWrap .item span{ margin-bottom: 24px; }
    ._solution.watch ._whySec .whyWrap .item .ic,
    ._solution.face ._whySec .whyWrap .item .ic{ margin-bottom: 24px; }
    ._solution.watch ._whySec .whyWrap .item h3,
    ._solution.face ._whySec .whyWrap .item h3{ font-size: 22px; line-height: 30px; }
    ._solution.face ._whySec .whyWrap .item em{ font-size: 12px; }
    ._solution.watch ._whySec .whyWrap .item p,
    ._solution.face ._whySec .whyWrap .item p{ font-size: 16px; line-height: 26px; }
    ._solution.watch ._flowSec._roundSec,
    ._solution.face ._flowSec._roundSec{ padding: 280px 0 100px; --round-top: 120px; }
    /* ._solution.face ._gridSec .gridWrap{ gap: 40px 24px; }
    ._solution.face ._gridSec .gridWrap .item .tags .tag{ min-width: 0; height: auto; padding: 8px 18px; font-size: 15px; } */
}
@media screen and (max-width: 820px){
    ._solution.watch ._flowSec._roundSec,
    ._solution.face ._flowSec._roundSec{ padding: 220px 0 0; --round-top: 80px; }
    ._solution.watch ._flowSec .flowCards .item .ic{ margin-bottom: 20px; }
    ._solution.watch ._flowSec .flowStages .stage{ font-size: 13px; padding: 0 8px; white-space: normal; text-align: center; }
    ._solution.watch ._flowSec .flowCards .item{ padding: 30px 10px; min-height: 220px; }
    ._solution.watch ._flowSec .flowSteps{ margin-top: 30px; }
    ._solution.aqua .compare .before .inn > p span{ font-size: 16px; }

    ._solution.watch ._flowSec .flowCards .item .num{ font-size: 14px; }
    ._solution.watch ._flowSec .flowCards .item h3{ font-size: 20px; }
    ._solution.watch ._flowSec .flowCards .item p{ font-size: 14px; }
}
@media screen and (max-width: 640px){
    ._solution.watch ._flowSec .flowCards{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
    ._solution.watch ._flowSec .flowStages{ grid-template-columns: 1fr; gap: 10px; }
    ._solution.aqua .compare .before .inn > p span{ font-size: 14px; }
    
}

/* sic - Core slider topVis: layer separate, PSD effect PNG, transparent */

/* ---- rescue ---- */
._solution.rescue .s1 .techWrap .techs{ overflow: hidden; }
._solution.rescue .s1 .techWrap .techs .topVis{ overflow: visible; }
._solution.rescue .s1 .techWrap .techs .topVis > .img{
    overflow: hidden; border-radius: 0; margin: 0 auto; position: relative;
}
._solution.rescue .s1 .techWrap .techs .topVis > .img img{
    width: 100%; height: auto; object-fit: contain; display: block; max-width: none; position: static;
}
._solution.rescue .s1 .techWrap .techs .item .topVis > .img{ --dim: 0; }
._solution.rescue .s1 .techWrap .techs .item .topVis > .img::after{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 10px;
    background: rgba(0, 0, 0, 0.5); opacity: var(--dim);
}
._solution.rescue .s1 .techWrap .techs .topVis .layer{
    max-width: none; width: auto; z-index: 2;
}
._solution.rescue .s1 .techWrap .techs .topVis .layer .img{
    max-width: none; width: 100%; aspect-ratio: auto; margin: 0; overflow: visible;
}
._solution.rescue .s1 .techWrap .techs .topVis .layer img{
    width: 100%; height: auto; display: block;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(1) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._1{
    /* sic - PSD 실시간 분석 vis (164,54) 290x210 */
    top: calc(54 / 325 * 100%); left: calc(164 / 1202 * 100%);
    width: calc(290 / 1202 * 100%); max-width: 290px; right: auto; display: block;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._2{ display: none; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/324;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{
    /* sic - PSD 비정상 vis (165,117) 329x149 → 세로는 카드 중앙(50%) 정렬 */
    top: 50%; transform: translateY(-50%); left: calc(165 / 1202 * 100%);
    width: calc(329 / 1202 * 100%); max-width: 329px; right: auto; display: block;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._2{ display: none; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{
    /* sic - PSD 그룹 37 vis (164,31) 385x207 */
    top: calc(31 / 325 * 100%); left: calc(164 / 1202 * 100%);
    width: calc(385 / 1202 * 100%); max-width: 385px; right: auto; display: block;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2{ display: none; }
._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{
    /* sic - PSD 시나리오 권고 vis (164,37) 329x286 */
    top: calc(37 / 325 * 100%); left: calc(164 / 1202 * 100%);
    width: calc(329 / 1202 * 100%); max-width: 329px; right: auto; display: block;
}
._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._2{ display: none; }

/* ---- aqua ---- */
._solution.aqua .s1 .techWrap .techs{ overflow: hidden; }
._solution.aqua .s1 .techWrap .techs .topVis{ overflow: visible; }
._solution.aqua .s1 .techWrap .techs .topVis > .img{
    overflow: hidden; border-radius: 0; margin: 0 auto; position: relative;
}
._solution.aqua .s1 .techWrap .techs .topVis > .img img{
    width: 100%; height: auto; object-fit: contain; display: block; max-width: none; position: static;
}
._solution.aqua .s1 .techWrap .techs .topVis .layer{
    max-width: none; width: auto; z-index: 2;
}
._solution.aqua .s1 .techWrap .techs .topVis .layer .img{
    max-width: none; width: 100%; aspect-ratio: auto; margin: 0; overflow: visible;
}
._solution.aqua .s1 .techWrap .techs .topVis .layer img{
    width: 100%; height: auto; display: block;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(1) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
/* sic - 인라인 svg layer: PSD vis(그림자 포함) 영역 중심에 svg 카드를 맞춤 */
._solution.aqua .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._1{
    /* sic - PSD 실시간 분석 vis (164,51) 300x230 → svg 카드 280.5x216 (일문은 상/하 카드 svg 2개를 쌓음) */
    top: calc(58 / 325 * 100%); left: calc(174 / 1202 * 100%);
    width: calc(280.5 / 1202 * 100%); max-width: 280.5px; right: auto; display: block;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._2{ display: none; }
._solution.aqua .s1 .techWrap .techs .item:nth-child(2) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/324;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{
    /* sic - PSD 비정상 vis (164,50) 299x247 → svg 328.3x276.2 (카드 바깥 여백 좌19.5/상19.3 포함) */
    top: calc(40.7 / 324 * 100%); left: calc(154.5 / 1202 * 100%);
    width: calc(328.3 / 1202 * 100%); max-width: 328.3px; right: auto; display: block;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._2{ display: none; }
._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis > .img{
    max-width: 632px; width: calc(632 / 1202 * 100%); aspect-ratio: 632/322;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{
    /* sic - PSD 그룹 37 vis (165,49) 849x256 안: 가운데 zero-shot 카드 280x148 */
    top: calc(103 / 322 * 100%); left: calc(449.5 / 1202 * 100%);
    width: calc(280 / 1202 * 100%); max-width: 280px; right: auto; display: block;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2{
    /* sic - 같은 vis 안 우측 상단: '신규 어종 · 오늘 추가됨' 칩 196x48 */
    top: calc(59 / 322 * 100%); left: calc(808 / 1202 * 100%);
    width: calc(196 / 1202 * 100%); max-width: 196px; right: auto; display: block;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(4) .topVis > .img{
    max-width: 634px; width: calc(634 / 1202 * 100%); aspect-ratio: 634/325;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{
    /* sic - PSD 시나리오 권고 vis (164,50) 514x290 → svg 495x271 */
    top: calc(59.5 / 325 * 100%); left: calc(173.5 / 1202 * 100%);
    width: calc(495 / 1202 * 100%); max-width: 495px; right: auto; display: block;
}
._solution.aqua .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._2{ display: none; }

/* sic - aqua tech 배경 창 + layer (prm 동일 방식, 모션은 dexmaaqua.php GSAP 담당)
   인라인 svg 배경이 테두리 창 안에서 위로 올라오며 하단이 창 하단에 닿음(높이 차이는 JS 계산), layer 등장 시 배경 어두워짐(--dim 0 → 1) */
._solution.aqua .s1 .techWrap .techs .topVis > .img{
    box-sizing: border-box; border: 2px solid rgba(237, 239, 242, calc(1 - var(--dim, 0))); border-radius: 12px; /* #edeff2, 어두워질 때 테두리도 함께 사라짐 */
    align-items: flex-start; /* 공통 align-items:center 해제 → 배경 상단에서 시작 */
    --dim: 0; background-color: #fff;
    background-clip: padding-box;
}
/* 배경 svg: 창보다 낮은 배경(일문 tech03 등)은 min-height + JS preserveAspectRatio slice 로 창을 꽉 채움 */
._solution.aqua .s1 .techWrap .techs .topVis > .img > svg{ width: 100%; height: auto; min-height: 100%; display: block; flex-shrink: 0; }
._solution.aqua .s1 .techWrap .techs .topVis > .img::after{
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: rgba(0, 0, 0, 0.5); opacity: var(--dim);
}
/* 배경 강조용 복제 svg(4번 '권고' 버튼): 배경과 같은 크기로 겹쳐 어둡게 덮인 위로 표시 */
._solution.aqua .s1 .techWrap .techs .topVis > .img > svg.hl{ position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; }
/* layer 카드 인라인 svg: 그림자는 카드 외곽(둥근 모서리)을 따르도록 drop-shadow */
._solution.aqua .s1 .techWrap .techs .topVis .layer > svg{
    width: 100%; height: auto; display: block; overflow: visible;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
}
._solution.aqua .s1 .techWrap .techs .topVis .layer > svg + svg{ margin-top: 7.5%; } /* 일문 1번: 상/하 카드 간격 21 / 280 */

/* sic - 모바일(820px 이하): 배경 창 넓힘 + layer 창 정중앙 (prm 동일), 3번 칩은 카드 우측 하단에 겹침 */
@media screen and (max-width: 820px){
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(n) .topVis > .img{ max-width: 95%; width: 100%; }
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(n) .topVis .layer._1{ left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); max-width: none; }
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._1{ width: 56%; }
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ width: 58%; }
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{ width: 56%; transform: translate(-50%, -58%); }
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._2{ top: auto; bottom: 8%; left: auto; right: 6%; width: 40%; max-width: none; }
    ._solution.aqua .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ left: 5%; transform: translate(0, -50%); width: 64%; } /* 배경 우측 하단 '권고' 버튼이 가려지지 않도록 왼쪽 정렬 */
}



@media screen and (max-width: 1280px){
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(1) .topVis > .img{ width: 90%; }
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis > .img{ width: 90%; }
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis > .img{ width: 90%; }
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis > .img{ width: 90%; }

    ._solution.rescue .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._1{ left: 5%; width: 40%; }
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ left: 5%; width: 40%; }
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{ left: 5%; width: 50%; }
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ left: 5%; width: 50%; }
}

/* sic - Rescue cardSec 모바일 (kingfax 동일 흐름, 국문/일문 공통): 핀 고정 → item 안의 배경 → layer 자동 반복 (dexmarescue.php initCardMobile) */
/* 배경 창(.img)은 topVis 가로 가운데(최대 634px), topVis 높이 = .img 높이 → layer는 left/top 50% + translate(-50%) = 배경 창 정중앙 */
@media screen and (max-width: 820px){
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(n) .topVis > .img{ width: 100%; }

    ._solution.rescue .s1 .techWrap .techs .item:nth-child(n) .topVis > .layer._1{ top: 50%; left: 50%; right: auto; margin: 0; transform: translate(-50%, -50%); max-width: none; }
    /* layer 크기: 배경 창 폭(min(100%, 634px)) 기준 비율 → 창 높이의 약 70~85% 안에 들어오도록 데스크톱보다 크게 (작은 화면 가독성) */
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(1) .topVis .layer._1{ width: calc(min(100%, 634px) * 350 / 634); } /* layer01 */
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(2) .topVis .layer._1{ width: calc(min(100%, 634px) * 440 / 634); } /* layer02 */
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(3) .topVis .layer._1{ width: calc(min(100%, 634px) * 440 / 634); } /* layer03 */
    ._solution.rescue .s1 .techWrap .techs .item:nth-child(4) .topVis .layer._1{ width: calc(min(100%, 634px) * 310 / 634); } /* layer04 */
}

/* sic - Watch cardSec 모바일 (aifax 동일, 국문/일문 공통): 배경·layer 모두 카드 중앙정렬 (dexmawatch.php initCardMobile, layer는 JS가 투명도만 제어) */
@media screen and (max-width: 820px){
    ._solution.watch._da ._cardSec .techWrap .techs .topVis > .img{ max-width: 95%; width: 100%; }
    ._solution.watch._da ._cardSec .techWrap .techs .topVis .layer._1,
    ._solution.watch._da ._cardSec .techWrap .techs .topVis .layer._2{ left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: 60%; }
}

/* sic - Face cardSec 모바일 (dxhund 동일, 국문/일문 공통): 배경 창은 카드 안을 거의 꽉 채우고, layer _1 · _2 모두 배경 창 정중앙 (dexmaface.php initCardMobile, layer는 JS가 투명도만 제어 · 올라오는 이동은 안쪽 svg) */
/* layer 폭 60% → 높이가 배경 창(634/324) 높이의 약 90% 안에 들어옴 */
@media screen and (max-width: 820px){
    ._solution.face._da ._cardSec .techWrap .techs .topVis > .img{ max-width: 95%; width: 100%; }
    ._solution.face._da ._cardSec .techWrap .techs .topVis .layer._1,
    ._solution.face._da ._cardSec .techWrap .techs .topVis .layer._2{ left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: 60%; max-width: none; }
}

/* sic - Face Core 모바일: 데스크톱 행 간격(86px)이 남아 '이미지를 터치해 주세요' 문구가 썸네일과 떨어져 보임
   → 공통(solution.css)과 같은 40px로 맞춰 문구가 썸네일 바로 위(6px)에 붙도록 (::before margin-bottom -34px 기준) */
@media screen and (max-width: 820px){
    ._solution.face ._gridSec .gridWrap{ gap: 40px; }
}