/*--------------- 솔루션 공통 --------------- */

/* 서브비주얼 */
._solution .subVis{ box-sizing: border-box; position: relative; width: 100%;height: 100vh; background-image:url('/asset/img/sub/solution/subVis_bg.png'); background-position: center center; background-repeat: no-repeat; }
._solution .subVis .wrap{ height: 100%; display: flex;flex-direction: column;justify-content: center;align-items: center; }
._solution .subVis .titArea{ display: flex;flex-direction: column;align-items: center; }
._solution .subVis .titArea span{ display: block; font-family: "Archivo"; font-weight: 300;font-size: 18px;line-height: calc(30/18);letter-spacing: -0.01em;color: #fff; margin-bottom: 14px; }
._solution .subVis .titArea h1{ 
    display: inline-block; font-family: 'Archivo';font-weight: 600;font-size: 120px;letter-spacing: -0.025em;line-height: 1.2; margin-bottom: 26px; text-align: center;
    background-image: linear-gradient(90deg, #bdfeee,  #0d55a6); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-color: text;
}
._solution .subVis .titArea p{ font-size: 24px;font-weight: 400;line-height: calc(40/24);letter-spacing: -0.025em; color: #fff; text-align: center; }
/* ._solution .subVis .btns{ display: flex;align-items: center;justify-content: center;gap: 10px; margin-top: 56px; }
._solution .subVis .btns .btn{ box-sizing: border-box;border-radius: 10px; padding: 16px 36px;}
._solution .subVis .btns .btn a{ font-size: 20px;font-weight: 600;letter-spacing: -0.04em;color: #fff; }
._solution .subVis .btns .btn:nth-child(1){ background: linear-gradient(90deg, #bdfeee,  #0d55a6); }
._solution .subVis .btns .btn:nth-child(2){ background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); } */
._solution .subVis .marqueeWrap{ position: absolute;bottom: 2%; width: 100%;overflow: hidden; }
._solution .subVis .marqueeWrap>div{ display: flex;align-items: center;gap: 60px; width: max-content; animation: marquee 40s linear infinite;  }
._solution .subVis .marqueeWrap .marquee{ display: flex;align-items: center;gap: 60px; }
._solution .subVis .marqueeWrap .marquee .ic{ width: 30px; }
._solution .subVis .marqueeWrap .marquee .text{ font-family: 'Archivo';font-size: 40px;letter-spacing: -0.025em;color: rgba(255, 255, 255, 0.2); white-space: nowrap; }

@keyframes marquee{
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 1600px){
    ._solution .subVis .titArea span{ margin-bottom: 10px; }
    ._solution .subVis .titArea h1{ font-size: 100px; }
    ._solution .subVis .titArea p{ font-size: 22px; }

}
@media screen and (max-width: 1440px){
    ._solution .subVis .titArea span{ margin-bottom: 8px; }
    ._solution .subVis .titArea h1{ font-size: 90px; }
    ._solution .subVis .titArea p{ font-size: 20px; }
}
@media screen and (max-width: 1280px){
    ._solution .subVis .titArea span{ font-size: 16px;margin-bottom: 4px; } 
    ._solution .subVis .titArea h1{ font-size: 76px; margin-bottom: 22px; }
    ._solution .subVis .titArea p{ font-size: 18px; }
}
@media screen and (max-width: 1024px){
    ._solution .subVis .titArea h1{ font-size: 68px;margin-bottom: 20px; }
    ._solution .subVis .titArea p{ font-size: 17px; }
}
@media screen and (max-width: 820px){
    ._solution .subVis .titArea span{ margin-bottom: 0; font-size: 15px; }
    ._solution .subVis .titArea h1{ font-size: 56px; }
    ._solution .subVis .titArea p{ font-size: 16px; font-weight: 400; }
    ._solution .subVis .marqueeWrap>div{ gap: 52px; }
    ._solution .subVis .marqueeWrap .marquee{ gap: 52px; }
    ._solution .subVis .marqueeWrap .marquee .ic{ max-width: 26px; }
    ._solution .subVis .marqueeWrap .marquee .text{ font-size: 32px; }
}
@media screen and (max-width: 500px){
    ._solution .subVis .titArea span{ font-size: 14px; }
    ._solution .subVis .titArea h1{ font-size: 46px; margin-bottom: 16px; }
    ._solution .subVis .titArea p{ font-size: 15px; }
}
@media screen and (max-width: 320px){
    ._solution .subVis .titArea p>br{ display: none; }
}


/* seciton 섹션 타이틀 */
/* ._solution .subTit{ margin-bottom: 40px; } */

/* ._solution._da .subTit{ margin-bottom: 50px; } */
._solution .subTit>span{ display: block; font-family: 'Archivo'; font-size: 16px;letter-spacing: -0.025em; text-align: center; margin-bottom: 20px; }
._solution .subTit h2{ font-size: 50px;font-weight: 400;line-height: calc(70/50);letter-spacing: -0.025em;color: #000; text-align: center; }
._solution .subTit h2 span{ color: #0d55a6; font-weight: 700; display: block; }
/* green */
._solution .subTit._gr span{ color: #fff; }
._solution .subTit._gr h2{ color: #fff; }
._solution .subTit._gr h2 span{ color: #bdfeee; }
/* gradient */
._solution .subTit._grad span{ color: #fff; }
._solution .subTit._grad h2{ color: #fff; }
._solution .subTit._grad h2 span{ display: inline-block; color: #bdfeee; background-image: linear-gradient(90deg, #bdfeee, #0d55a6); -webkit-text-fill-color: transparent; -webkit-background-clip: text;background-color: text; }
@media screen and (max-width: 1600px){
    ._solution .subTit h2{ font-size: 46px; }
    ._solution .subTit>span{ margin-bottom: 18px; }

}
@media screen and (max-width: 1440px){
    ._solution .subTit>span{ margin-bottom: 16px; }
    ._solution .subTit h2{ font-size: 42px; }
}
@media screen and (max-width: 1280px){
    ._solution .subTit h2{ font-size: 36px; }
}
@media screen and (max-width: 1024px){
    ._solution .subTit>span{ margin-bottom: 14px; }
    ._solution .subTit h2{ font-size: 32px; }
}
@media screen and (max-width: 820px){
    ._solution .subTit h2{ font-size: 26px; }
}
@media screen and (max-width: 500px){
    ._solution .subTit>span{ font-size: 13px; margin-bottom: 10px; }
    ._solution .subTit h2{ font-size: 22px; }
}
@media screen and (max-width: 320px){}

/* 그라데이션 버튼 */
._solution .btns{ display: flex;align-items: center;justify-content: center;gap: 10px; margin-top: 56px; }
._solution .btns .btn{ box-sizing: border-box;border-radius: 10px; padding: 15px 0; width: 160px; text-align: center; transition: background .3s ease; cursor: pointer; }
._solution .btns .btn a{ font-size: 20px;font-weight: 600;letter-spacing: -0.04em;color: #fff; transition: color .3s ease; }
._solution .btns .btn:nth-child(1){ background: linear-gradient(90deg, #bdfeee,  #0d55a6); }
._solution .btns .btn:nth-child(2){ background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); }
@media screen and (min-width: 821px){
    ._solution .btns .btn:hover{ background: #fff; }
    ._solution .btns .btn:hover a{ color: #000; }
    /* sic - per-AX nth-child(1) gradient loads after; section path wins on hover */
    ._solution .subVis .btns .btn:nth-child(1):hover,
    ._solution .subVis .btns .btn:nth-child(2):hover,
    ._solution .subVis .btns .btn:hover,
    ._solution ._bannerSec .btns .btn:nth-child(1):hover,
    ._solution ._bannerSec .btns .btn:nth-child(2):hover,
    ._solution ._bannerSec .btns .btn:hover{ background: #fff; }
    ._solution .subVis .btns .btn:hover a,
    ._solution ._bannerSec .btns .btn:hover a{ color: #000; }
}

@media screen and (max-width: 1600px){}
@media screen and (max-width: 1440px){
    ._solution .btns{ margin-top: 48px; }
    ._solution .btns .btn a{ font-size: 18px; font-weight: 500; }
}
@media screen and (max-width: 1280px){
    ._solution .btns{ margin-top: 42px; }
    ._solution .btns .btn a{ font-size: 16px; }
}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 820px){
    ._solution .btns{ margin-top: 36px; }
    ._solution .btns .btn{ width: 120px; }
    ._solution .btns .btn a{ font-size: 15px; }
}
@media screen and (max-width: 500px){
    ._solution .btns{ gap: 8px; }
    ._solution .btns .btn{ width: 100px; }
    ._solution .btns .btn a{ font-size: 14px; font-weight: 400; }
}
@media screen and (max-width: 320px){}

/* 일문 - 버튼 텍스트가 길어 고정 width에서 줄바꿈되므로 텍스트 길이에 맞춰 늘어나도록 */
html.jp ._solution .btns .btn{ width: auto; min-width: 160px; padding: 15px 28px; white-space: nowrap; }
@media screen and (max-width: 820px){
    html.jp ._solution .btns .btn{ min-width: 120px; padding: 15px 20px; }
}
@media screen and (max-width: 500px){
    html.jp ._solution .btns .btn{ min-width: 100px; padding: 15px 16px; }
}

/* 그라데이션 카드 */
._solution .techWrap{ margin-top: 35px; }
._solution .techWrap .techs{ box-sizing: border-box;border-radius: 10px;padding: 45px 0 25px; max-width: 1200px;width: 100%; height: 680px; display: flex;flex-direction: column; background: #fff; position: relative;overflow: hidden; margin: 0 auto; }
._solution .techWrap .techs .topVis,
._solution .techWrap .techs .txtArea,
._solution .techWrap .techs .tags,
._solution .techWrap .techs .paging{ position: relative; z-index: 1; }
._solution .techWrap .techs .gradient{ position: absolute; width: 800px;height: 800px; border-radius: 50%; pointer-events: none; z-index: 0; }
._solution .techWrap .techs .gradient.gr{ top: -17%;left: -9%; transform: translate(-35%, -35%); background: radial-gradient(circle, rgba(189,254,238,0.85) 0%, rgba(189,254,238,0.4) 40%, rgba(189,254,238,0) 70%); }
._solution .techWrap .techs .gradient.blu{ bottom: -17%;right: -9%; transform: translate(35%, 35%); background: radial-gradient(circle, rgba(14,86,166,0.35) 0%, rgba(14,86,166,0.15) 40%, rgba(14,86,166,0) 70%); }
._solution .techWrap .techs .tech{ position: relative; flex: 1;min-height: 0; z-index: 1; }
._solution .techWrap .techs .tech .item{ position: absolute; top: 0;left: 0; width: 100%;height: 100%; display: flex;flex-direction: column; pointer-events: none; justify-content: center; }
._solution .techWrap .techs .topVis .img{ max-width: 406px;width: 100%; aspect-ratio: 406/320; margin: 0 auto; overflow: hidden; display: flex;align-items: center;justify-content: center; }
._solution .techWrap .techs .topVis .layer{ 
    /*max-width: 270px;width: 100%; box-sizing: border-box;border-radius: 10px;background: #fff; box-shadow: 4px 4px 10px 0 rgba(24, 1, 1, 0.1);*/
    position: absolute;
}
/* ._solution .techWrap .techs .topVis .layer._1{ top: 16%;left: 21.5%; } */
/* ._solution .techWrap .techs .topVis .layer._2{ top: 16%;right: 21.5%; } */
._solution .techWrap .tech .txtArea h3{ font-size: 38px;font-weight: 600;letter-spacing: -0.025em;line-height: calc(52/38); text-align: center; }
._solution .techWrap .tech .txtArea p{ font-size: 22px;line-height: calc(36/22);letter-spacing: -0.025em;color: #57575e; text-align: center; margin-top: 10px; }
._solution .techWrap .tech .tags{ display: flex;align-items: center;justify-content: center;gap: 10px; margin-top: 25px; }
._solution._da .techWrap .tech .tags{ margin-top: 35px; }
._solution .techWrap .tech .tags .tag{ 
    box-sizing: border-box;border-radius: 22px; border: 1px solid #0d55a6; padding: 11px 24px;
    font-size: 20px;font-weight: 500;letter-spacing: -0.025em;color: #0d55a6;text-align: center;
} 

@media screen and (max-width: 1600px){
    ._solution .techWrap .tech .txtArea h3{ font-size: 36px; }
    ._solution .techWrap .tech .txtArea p{ font-size: 20px; }
}
@media screen and (max-width: 1440px){
    ._solution .techWrap .tech .txtArea h3{ font-size: 32px; }
    ._solution .techWrap .tech .txtArea p{ font-size: 18px; }
    ._solution .techWrap .tech .tags{ margin-top: 30px; }
    ._solution .techWrap .tech .tags .tag{ font-size: 18px; }
}
@media screen and (max-width: 1280px){
    ._solution .techWrap .techs .gradient{ width: 600px;height: 600px; } 
    ._solution .techWrap .tech .txtArea h3{ font-size: 30px; }
    ._solution .techWrap .tech .txtArea p{ font-size: 17px; }
    ._solution .techWrap .tech .tags .tag{ font-size: 17px; }
}
@media screen and (max-width: 1024px){
    ._solution .techWrap .techs .gradient{ width: 400px;height: 400px; } 
    ._solution .techWrap .tech .txtArea h3{ font-size: 28px; }
    ._solution .techWrap .tech .txtArea p{ font-size: 16px; }
    ._solution .techWrap .tech .tags .tag{ font-size: 16px; }
}
@media screen and (max-width: 820px){
    ._solution._da .techWrap .tech .tags{ margin-top: 20px; }
    ._solution .techWrap .techs{ padding: 40px 20px; }
    ._solution .techWrap .tech .txtArea h3{ font-size: 24px; }
    ._solution .techWrap .tech .txtArea p{ font-size: 15px; }
    ._solution .techWrap .techs{ height: 600px; padding: 20px; }
    ._solution .techWrap .techs .topVis .img{ max-width: 344px; } 
    ._solution .techWrap .tech .tags .tag{ padding: 9px 24px; font-size: 15px; }
}
@media screen and (max-width: 500px){
    ._solution._da .techWrap .tech .tags{ margin-top: 15px; }
    ._solution .techWrap .techs{ height: 510px; }
    ._solution .techWrap .techs .topVis .img{ max-width: 270px; }
    ._solution .techWrap .tech .txtArea h3{ font-size: 16px; }
    ._solution .techWrap .tech .txtArea p{ font-size: 13px; }
    ._solution .techWrap .tech .tags{ gap: 8px; }
    ._solution .techWrap .tech .tags .tag{ padding: 8px 16px;font-size: 13px; }
}
@media screen and (max-width: 320px){
    ._solution .techWrap .tech .tags .tag{ padding: 8px 12px;font-size: 12px; }
}

/* 반원 배경있는 섹션 */
._solution ._roundSec{ position: relative; isolation: isolate; container-type: inline-size; background: #fff; padding: 460px 0 200px; }
._solution ._roundSec .bg{ position: absolute; inset: 0 0 -2px; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(730px 360px at 50% 100%, rgba(30,110,210,.5) 0%, rgba(20,70,160,.22) 45%, rgba(20,70,160,0) 100%); }
._solution ._roundSec .bg::after{ content: ''; position: absolute; top: 200px; left: 50%; width: calc(2 * max(57.32cqw, 700px)); height: calc(2 * max(39.32cqw, 50%)); transform: translateX(-50%); border-radius: 50%; background: #0d0d23; box-shadow: 0 0 30px 0 rgba(78,128,205,.95), 0 0 90px 40px rgba(120,165,225,.55), 0 0 170px 60px rgba(190,215,245,.25); }

@media screen and (max-width: 1600px){
    ._solution ._roundSec{ padding: 430px 0 200px; }
    ._solution ._roundSec .bg::after{ top: 180px; }
}
@media screen and (max-width: 1440px){
    ._solution ._roundSec{ padding: 380px 0 200px; }
    ._solution ._roundSec .bg::after{ top: 160px; }
}
@media screen and (max-width: 1280px){
    ._solution ._roundSec{ padding: 330px 0 120px; }
    ._solution ._roundSec .bg::after{ top: 140px; box-shadow: 0 0 26px 0 rgba(78,128,205,.95), 0 0 76px 34px rgba(120,165,225,.55), 0 0 140px 50px rgba(190,215,245,.25); }
}
@media screen and (max-width: 1024px){
    ._solution ._roundSec{ padding: 280px 0 100px; }
    ._solution ._roundSec .bg::after{ top: 120px; width: calc(2 * max(57.32cqw, 620px)); }
}
@media screen and (max-width: 820px){
    ._solution ._roundSec{ padding: 220px 0 70px; }
    ._solution ._roundSec .bg::after{ top: 80px; width: calc(2 * max(57.32cqw, 560px)); box-shadow: 0 0 20px 0 rgba(78,128,205,.95), 0 0 60px 24px rgba(120,165,225,.55), 0 0 110px 36px rgba(190,215,245,.25); }
}
@media screen and (max-width: 500px){
    ._solution ._roundSec{ padding: 180px 0 0; }
    ._solution ._roundSec .bg::after{ top: 60px; width: calc(2 * max(57.32cqw, 460px)); box-shadow: 0 0 14px 0 rgba(78,128,205,.95), 0 0 40px 16px rgba(120,165,225,.55), 0 0 70px 24px rgba(190,215,245,.25); }
}
@media screen and (max-width: 320px){}


/* sic - AI OCR How It Works diagram section */
._solution ._flowSec{ background: #0d0d23; padding: 80px 0 0; }
._solution ._flowSec .flowImg{ max-width: 1520px; width: 100%; margin: 70px auto 0; position: relative; }
._solution ._flowSec .flowImg img{ width: 100%; height: auto; display: block; }

@media screen and (max-width: 820px){
    ._solution ._flowSec .flowImg{ overflow: auto; }
    ._solution ._flowSec .flowImg img{ max-width: unset; width: 820px; }
    ._solution ._flowSec .flowImg::before{ content: '* 좌우로 스크롤하여 확인하세요'; color: rgba(255,255,255,0.7); width: 100%; height: auto; font-size: 14px; line-height: 1.4; display: block; padding-bottom: 10px; }
    html.jp ._solution ._flowSec .flowImg::before{ content: '* 左右にスクロールして確認してください。'; }
}

/* ==========================================================================
   before/after 비교섹션 _compareSec
   - TYPE1 (기본)  : .compareWrap            → 이미지 없음, before · dots · after 카드 가로 배치
   - TYPE2 (가로형) : .compareWrap._hor       → 이미지 슬라이더 상단 + 카드 가로 배치 (aifax, agenticgfax)
                     rangeBx 마크업 없이 쓰면 이미지 없는 1200px 카드형 (kingfax, physical)
   - TYPE3 (세로형) : .compareWrap._ver       → 이미지 슬라이더 좌측 + 카드 세로 스택 (vlmocr)
   ========================================================================== */

/* ---------- 공통 : 섹션 / 래퍼 ---------- */
._solution ._compareSec{ background: #0d0d23; }
._solution .compareWrap._hor{ max-width: 1200px;width: 100%; margin: 0 auto; margin-top: 30px; }
._solution .compareWrap._ver{ max-width: 1200px;width: 100%; margin: 0 auto; margin-top: 30px; }

/* ---------- 공통 : 이미지 비교 슬라이더 (TYPE2 · TYPE3에서 사용) ---------- */
._solution .rangeBx { position: relative; overflow: hidden; width: 100%; --rangeValue: 50%; margin-bottom: 30px; }
._solution .rangeBx::before{ content: '';display: block; padding-top: calc(595 / 1200 * 100%); }
._solution .rangeBx .range{ position: absolute;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;isolation: isolate; }
._solution .rangeBx .range img{ max-width:none;height: 100%;width: 100%;object-fit: cover; }
._solution .rangeBx .range .img{ box-sizing: border-box; overflow: hidden; border-radius: 10px; }
._solution .rangeBx .range .img._before{ position: absolute;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;isolation: isolate; }
._solution .rangeBx .range .img._after{ position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
._solution .rangeBx .handle{
    box-sizing: border-box;border-radius: 50%;width: 50px;aspect-ratio: 1/1;background: linear-gradient(45deg, #2bc9d6 0%, #383ba3 100%); display: flex;justify-content: center;align-items: center;
    position: absolute; inset: 0; z-index: 5; left: var(--rangeValue);top: 50%;transform: translate(-50%, -50%);
}
._solution .rangeBx .handle i{ font-size: 16px; letter-spacing: -0.025em; color: #fff; }
._solution .rangeBx .ctrl{ position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: block;margin: 0;background:transparent;z-index: 2;cursor: pointer; }
._solution .rangeBx .ctrl::-webkit-slider-thumb{ opacity: 0; }
._solution .rangeBx .line{ position: absolute; top: 0; left: 50%;transform:translateX(-50%); z-index: 4; width: 2px;height: 100%;background: linear-gradient(180deg, #2bc9d6, #383ba3);}
._solution .rangeBx .line::before{
    content: '';position: absolute;left: 0;top: 0;width: 1.3vw;height: 100%;
    background: linear-gradient(90deg, rgba(43, 201, 214, .18) 0%, rgba(43, 201, 214, .08) 35%, rgba(43, 201, 214, 0) 100%);
}
._solution._da .rangeBx{ display: none; } /* sic - BA smartobjects export empty (TYPE2 · TYPE3에서 다시 노출) */

/* ---------- 공통 : before / after 카드 ---------- */
._solution .compare{ display: flex; align-items: center;justify-content: center; gap: 30px; margin-top: 35px; }
._solution .compareWrap .compare ._bx{ position: relative; min-height: 414px; width: 100%;box-sizing: border-box;border-radius: 10px;padding: 65px 70px; }
._solution .compare ._bx .inn>p{ font-family: 'Archivo';font-size: 40px;font-weight: 500;letter-spacing: -0.025em; color: #fff;margin-bottom: 22px; }
._solution .compare ._bx .inn>span{ font-size: 18px;letter-spacing: -0.025em; color: #ccc; }
._solution .compare ._bx .inn ul{ margin-top: 48px; display: flex;flex-direction: column; gap: 12px; }
._solution .compare ._bx .inn ul li{ display: flex;gap: 30px; line-height: 1.4; }
._solution .compare ._bx .inn ul li i{ padding-top: 0.3em; }

/* before */
._solution .compare .before{ background: #262637; }
._solution .compare .before .inn ul li i{ font-size: 18px;color: #ccc; }
._solution .compare .before .inn ul li p{ font-size: 20px;letter-spacing: -0.025em;color: #ccc; }

/* after */
._solution .compare .after{
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
._solution .compare .after .inn ul li i{ font-size: 18px;color: #fff; }
/* sic - After mint: PSD #bdfeee / Font 0 (regular) */
._solution .compare .after .inn ul li p{ font-size: 20px;font-weight: 500;color: #fff;letter-spacing: -0.025em; }
._solution .compare .after .inn ul li p span{ color: #bdfeee; }

/* after 카드 - 테두리에만 빛이 일렁이는 효과 (기존 gradient 테두리 위에 덧씌움) */
@property --kfBdAngle{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }
._solution .compare .after .bdFlow{
    --kfBdW: 2px; /* 기존 테두리 두께에 맞춰 조정 */
    position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    padding: var(--kfBdW); box-sizing: border-box;
    background: conic-gradient(from var(--kfBdAngle),
        #bcfded 0deg,
        #1c5aa8 90deg,
        #bcfded 180deg,
        #1c5aa8 270deg,
        #bcfded 360deg);
    /* 안쪽(content-box)을 빼고 테두리 영역만 남김 */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: kfBdFlow 9s linear infinite, kfBdBreath 3.2s linear infinite alternate;
}
/* 회전 속도가 빨라졌다 느려졌다 하며 흐르도록 구간별 이징 */
@keyframes kfBdFlow{
    0%{ --kfBdAngle: 0deg; }
    35%{ --kfBdAngle: 150deg; }
    65%{ --kfBdAngle: 220deg; }
    100%{ --kfBdAngle: 360deg; }
}
@keyframes kfBdBreath{
    0%{ opacity: .45; }
    100%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
    ._solution .compare .after .bdFlow{ animation: none; }
}

/* ---------- TYPE1 (기본) : 이미지 없음 + dots ---------- */
._solution .compare:has(.dots){ gap: 0; } /* dots가 카드 사이 간격 역할 */
._solution .compare .dots{ flex: 0 0 auto; display: flex;align-items: center;gap: 5px; margin: 0 50px; }
._solution .compare .dots>div{ width: 8px;height: 8px;border-radius: 50%; background: #bdfeee; animation: kfDotsOP 1s ease-in-out infinite alternate; }
._solution .compare .dots>div:nth-of-type(2){ animation-delay: 0.2s; }
._solution .compare .dots>div:nth-of-type(3){ animation-delay: 0.4s; }

@keyframes kfDotsOP{
    0%{ opacity: 0.2; }
    100%{ opacity: 1; }
}

._solution .compare .dots>div:nth-child(1){ opacity: 0.2; }
._solution .compare .dots>div:nth-child(2){ opacity: 0.5; }

/* ---------- TYPE2 (가로형) : 이미지 상단 + 카드 가로 (sic - DEXMA Watch 시안) ---------- */
._solution .compareWrap._hor .compare ._bx{ padding: 45px 50px; min-height: 373px; }
._solution .compareWrap._hor .rangeBx{ display: block; }
._solution .compareWrap._hor .rangeBx::before{ padding-top: calc(595 / 1200 * 100%); }

/* ---------- TYPE3 (세로형) : 이미지 좌측 + 카드 세로 스택, 슬라이더 위·아래 (sic - VLM-OCR 시안) ---------- */
._solution .compareWrap._ver{ display: flex; align-items: stretch; gap: 30px; justify-content: space-between; margin-top: 35px; }
._solution .compareWrap._ver .rangeBx{ display: block; flex: 0 0 42%; max-width: 535px; margin-bottom: 0; cursor: ns-resize; }
._solution .compareWrap._ver .rangeBx::before{ padding-top: calc(1487 / 1058 * 100%); }
._solution .compareWrap._ver .rangeBx .ctrl{ pointer-events: none; cursor: ns-resize; }
._solution .compareWrap._ver .rangeBx .img._after{ clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%); }
._solution .compareWrap._ver .rangeBx .handle{
    inset: auto; left: 50%; top: 30%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
}
._solution .compareWrap._ver .rangeBx .line{
    inset: auto; top: 30%; left: 0; right: auto; bottom: auto;
    width: 100%; height: 2px; transform: translateY(-50%);
    background: linear-gradient(90deg, #2bc9d6, #383ba3);
}
._solution .compareWrap._ver .rangeBx .line::before{
    top: 0; left: 0; width: 100%; height: 1.3vw;
    background: linear-gradient(180deg, rgba(43, 201, 214, .18) 0%, rgba(43, 201, 214, .08) 35%, rgba(43, 201, 214, 0) 100%);
}
._solution .compareWrap._ver .compare{ gap: 20px; width: 100%; max-width: 585px; flex-direction: column; margin: 0 auto; }
._solution .compareWrap._ver .compare ._bx{ max-width: none; aspect-ratio: auto; height: auto; padding: 40px 45px; min-height: unset; }

/* ---------- 반응형 ---------- */
@media screen and (max-width: 1600px){
    ._solution .compare ._bx .inn>p{ font-size: 36px; margin-bottom: 15px; }
}
@media screen and (max-width: 1440px){
    ._solution .compare ._bx .inn>p{ font-size: 32px;margin-bottom: 22px; }
    ._solution .compare ._bx .inn ul{ margin-top: 44px; }
    ._solution .compare .before .inn ul li p{ font-size: 19px; }
    ._solution .compare .after .inn ul li p{ font-size: 19px; }
}
@media screen and (max-width: 1280px){
    ._solution .compareWrap .compare ._bx{ padding: 46px; min-height: 364px; }
    ._solution .compare ._bx .inn>p{ font-size: 28px; margin-bottom: 20px; }
    ._solution .compare ._bx .inn>span{ font-size: 17px; }
    ._solution .compare ._bx .inn ul{ margin-top: 40px; gap: 22px; }
    ._solution .compare .before .inn ul li p{ font-size: 18px; }
    ._solution .compare .after .inn ul li p{ font-size: 18px; }
    
    ._solution .compare .dots{ margin: 0 30px; }

    /* TYPE2 */
    ._solution .compareWrap .compare ._bx{ min-height: 324px; }
}
@media screen and (max-width: 1024px){
    ._solution .compareWrap .compare ._bx{ padding: 36px; }
    ._solution .compare ._bx .inn>p{ font-size: 24px; margin-bottom: 18px; }
    ._solution .compare ._bx .inn>span{ font-size: 16px; }
    ._solution .compare ._bx .inn ul{ gap: 20px; margin-top: 36px; }
    ._solution .compare ._bx .inn ul li{ gap: 18px; }
    ._solution .compare .before .inn ul li p{ font-size: 15px; }
    ._solution .compare .after .inn ul li{ align-items: flex-start; }
    ._solution .compare .after .inn ul li p{ font-size: 15px; line-height: 1.3; }
    ._solution .compare ._bx .inn ul li i{ font-size: 15px; padding-top: 0.1em; }
    ._solution .compare .dots{ margin: 20px 0; flex-direction: column; gap: 4px; }
    /* dots 세로 전환과 동시에 before / after 박스도 위아래 배치 (kingfax, physical 등) */
    ._solution .compare:has(.dots){ flex-direction: column; }
    ._solution .compareWrap .compare:has(.dots) ._bx{ width: 100%; min-height: unset; }

    /* TYPE2 (TYPE1은 gap 0 유지) */
    ._solution .compareWrap._hor .compare ._bx{ padding: 45px; }
    ._solution .compare:not(:has(.dots)){ gap: 20px; }
    /* TYPE3 */
    ._solution .compareWrap._ver{ flex-direction: column; gap: 0; }
    ._solution .compareWrap._ver .compare ._bx{ padding: 45px; }
    ._solution .compareWrap._ver .rangeBx{ flex: none; max-width: 420px; width: 100%; margin: 0 auto 24px; }
}
@media screen and (max-width: 820px){
    ._solution .compare{ flex-wrap: wrap; }
    ._solution .compareWrap .compare ._bx{ padding: 20px;aspect-ratio: unset; max-width: 100%; min-height: unset; }
    ._solution .compare ._bx .inn>p{ font-size: 20px; margin-bottom: 14px; }
    ._solution .compare ._bx .inn>span{ font-size: 14px; }
    ._solution .compare ._bx .inn ul{ margin-top: 30px; gap: 16px; }
    ._solution .compare .before .inn ul li{ align-items: flex-start; }
    ._solution .compare .before .inn ul li p{ font-size: 14px; line-height: 1.3; }
    ._solution .compare .before .inn ul li i{ font-size: 16px; line-height: 1.3; }
    ._solution .compare .after .inn ul li p{ font-size: 14px; }
    ._solution .compare .after .inn ul li i{ font-size: 16px; line-height: 1.3; }

    

    /* TYPE2 */
    ._solution .compareWrap._hor .compare ._bx{ padding: 20px; min-height: unset; }

    /* TYPE3 */
    ._solution .compareWrap._ver .compare ._bx{ padding: 20px; }
    ._solution .compareWrap._ver .compare{ gap: 16px; }
}
@media screen and (max-width: 500px){
    ._solution .compare ._bx .inn ul li{ gap: 7px; }
    ._solution .compare ._bx .inn ul li i{ padding-top: 0; font-size: 14px; }
    ._solution .compare ._bx .inn>p{ margin-bottom: 7px; }
}

/* ---------- 페이지별 보정 ---------- */

/* sic - & is inline (Pretendard). parent Archivo label stays one line */
._solution .amp,
._solution .subTit > span .amp,
._whySec .whyWrap .item span .amp{
    display: inline; font-family: 'Pretendard', sans-serif; font-weight: 400; font-style: normal;
}



/*  기능 설명 그리드 섹션(2X2 배열) _gridSec */
._gridSec .gridWrap{ display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 35px; }
._gridSec .gridWrap .item .imgBx{ position: relative;overflow: hidden; max-width: 738px;width: 100%; aspect-ratio: 738/433; border-radius: 10px; border: 2px solid #edeff2; box-sizing: border-box; overflow: hidden; }
._gridSec .gridWrap .item .imgBx::after{ content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%; z-index: 2; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
._gridSec .gridWrap .item:hover .imgBx::after,
._gridSec .gridWrap .item.is-hover .imgBx::after{ opacity: 1; }
._gridSec .gridWrap .item .imgBx .img{ position: relative;overflow: hidden; box-sizing: border-box; max-width: 738px;width: 100%;border-radius: 10px; }
._gridSec .gridWrap .item .imgBx .img::after{ content: '';display: block;padding-top: calc(433 / 738 *  100%); }
._gridSec .gridWrap .item .imgBx .img img{ position: absolute;top: 0;left: 0;width: 100%;height: 100%; }
._gridSec .gridWrap .item .imgBx .lyaer{ position: absolute;z-index: 3; }

/* sic - (다) grid / why / detect / card */
._solution._da ._compareSec{ padding: 150px 0; }
._solution._da ._cardSec{ background: #fff; padding: 150px 0 250px; }
._solution._da ._gridSec{ background: #fff; /*padding: 0 0 100px;*/ }
._solution._da ._flowSec{ padding: 100px 0 40px; }
._solution._da ._flowSec .flowDesc{ max-width: 880px; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.7; letter-spacing: -0.025em; color: #ccc; margin-top: 30px; }
._solution._da ._cardSec .techWrap .techs{ height: auto; min-height: 680px; max-width: 1200px; }
._solution._da ._cardSec .techWrap .techs .tech .item{ position: relative; pointer-events: auto;  }
._solution._da ._cardSec .techWrap .techs .topVis{ position: relative; }
._solution._da ._cardSec .techWrap .techs .topVis > .img{ border-radius: 10px; overflow: hidden; }
._solution._da ._cardSec .techWrap .techs .topVis > .img svg{
    border: 2px solid #edeff2;
    border-radius: 12px;
}
._solution._da ._cardSec .techWrap .techs .topVis > .img img{
    border: 2px solid #edeff2;
    border-radius: 12px;
}
._solution._da ._cardSec .techWrap .techs .topVis .img{ max-width: 640px; width: 100%; height: auto; aspect-ratio: 640/360; margin: 0 auto; }
._solution._da ._cardSec .techWrap .techs .topVis .img img{ width: 100%; height: 100%; object-fit: contain; display: block; }
._solution._da ._cardSec .techWrap .techs .topVis .layer{ max-width: 280px; width: 38%; }
._solution._da ._cardSec .techWrap .techs .topVis .layer img,
._solution._da ._cardSec .techWrap .techs .topVis .layer svg{ width: 100%; height: auto; display: block; overflow: visible; }
/* sic - Auto Press Writer 레이어 등장 모션은 페이지 하단 initTechLayerMotion()(GSAP + ScrollTrigger) 담당 */
/* sic - 레이어 카드 은은한 그림자: 카드 외곽(둥근 모서리) 형태를 따르도록 box-shadow 대신 drop-shadow 사용 */
._solution._da ._cardSec .techWrap .techs .topVis .layer img,
._solution._da ._cardSec .techWrap .techs .topVis .layer svg,
._gridSec .gridWrap .item .imgBx .layer img,
._gridSec .gridWrap .item .imgBx .layer svg{ filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06)); }
/* sic - .layer 안의 .img 래퍼(JP 마크업)는 topVis > .img(640/360 비율, overflow hidden, flex 중앙)를 상속받지 않도록 해제 */
._solution._da ._cardSec .techWrap .techs .topVis .layer .img{ max-width: none; width: 100%; height: auto; aspect-ratio: auto; overflow: visible; display: block; margin: 0; border-radius: 0; }
._solution._da ._cardSec .techWrap .techs .topVis .layer._1{ top: 12%; left: 4%; }
._solution._da ._cardSec .techWrap .techs .topVis .layer._2{ top: 8%; right: 2%; left: auto; }
._solution._da ._cardSec .techWrap .tech .txtArea{ margin-top: 36px; position: relative; z-index: 5; }
/* ._solution._da ._cardSec .techWrap .tech .tags{ margin-top: 28px; } */

._gridSec .gridWrap{ gap: 90px 50px; }
._gridSec .gridWrap .item .imgBx .layer{
    position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: 72%; width: calc(320 / 740 * 100%); opacity: 0; visibility: hidden; pointer-events: none;
    will-change: transform, opacity;
}
._gridSec .gridWrap .item .imgBx .layer img,
._gridSec .gridWrap .item .imgBx .layer svg{ width: 100%; height: auto; display: block; overflow: visible; }
/* sic - hover 시 반투명 오버레이(::after) + 레이어 팝업. 레이어/SVG 모션은 페이지 하단 initGridLayerMotion()(GSAP)이 담당.
   GSAP 미로드 시에도 보이도록 CSS fallback 유지 */
.no-gsap ._gridSec .gridWrap .item .imgBx .layer{ transition: opacity .35s ease, visibility .35s ease; }
.no-gsap ._gridSec .gridWrap .item:hover .imgBx .layer{ opacity: 1; visibility: visible; }
._gridSec .gridWrap .item .txtBx{ padding-top: 35px; }
._gridSec .gridWrap .item .txtBx h3{ font-size: 38px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 16px; }
._gridSec .gridWrap .item .txtBx p{ font-size: 22px; line-height: 1.65; letter-spacing: -0.025em; color: #57575e; }
._gridSec .gridWrap .item .tags{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
._gridSec .gridWrap .item .tags .tag{
    box-sizing: border-box; border-radius: 22px; border: 1px solid #0d55a6; padding: calc(12 / 20 * 1em) calc(24 / 20 * 1em);
    font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: #0d55a6;
}

._whySec{ background: #0d0d23; padding: 110px 0 90px; }
._whySec .whyWrap{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 65px; }
._whySec .whyWrap._3{ grid-template-columns: repeat(3, 1fr); max-width: 1195px; margin: 0 auto; margin-top: 60px; }
._whySec .whyWrap .item{ box-sizing: border-box; border-radius: 10px; padding: 36px 28px; background: #1a1a30; }
._whySec .whyWrap .item span{ display: block; font-family: 'Archivo'; font-size: 14px; letter-spacing: -0.025em; color: #bdfeee; margin-bottom: 18px; }
._whySec .whyWrap .item h3{ font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: #fff; margin-bottom: 16px; line-height: 1.4; }
._whySec .whyWrap .item p{ font-size: 15px; line-height: 1.65; letter-spacing: -0.025em; color: #ccc; }

/* sic - superseded: light detect cards
._detectSec{ background: #fff; padding: 110px 0 80px; }
._detectSec .detectWrap{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
._detectSec .detectWrap .item{ box-sizing: border-box; border-radius: 16px; padding: 36px 32px; background: #f6f8fc; }
._detectSec .detectWrap .item .num{ display: inline-block; font-family: 'Archivo'; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #0d55a6; margin-bottom: 14px; }
._detectSec .detectWrap .item h3{ font-size: 20px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 12px; }
._detectSec .detectWrap .item p{ font-size: 16px; line-height: 1.6; letter-spacing: -0.025em; color: #57575e; }
*/
/* sic - numbered 6-card grid (Watch What It Detects / Physical Expandable) PSD 1:1 */
._detectSec{ background: #0d0d23; padding: 110px 0 80px; }
._detectSec .subTit{ margin-bottom: 78px; }
._detectSec .subTit._gr h2{ font-weight: 400; }
._detectSec .subTit._gr h2 span{ font-weight: 600; }
._detectSec .detectWrap{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 29px; margin-top: 0; }
._detectSec .detectWrap .item{ box-sizing: border-box; border-radius: 10px; padding: 30px 31px 36px; min-height: 222px; background: #262637; border: 2px solid transparent; }
/* 호버 시 그라데이션 보더 활성화 (physicalAx ._expandSec 과 동일) */
._detectSec .detectWrap .item{ position: relative; transition: background-color .35s ease; }
._detectSec .detectWrap .item::before{
    content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
    background: linear-gradient(180deg, #66caf3 0%, #7c79f2 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 .35s ease;
}
._detectSec .detectWrap .item:hover{ background-color: #0d0d23; }
._detectSec .detectWrap .item:hover::before{ opacity: 1; }
._detectSec .detectWrap .item .num{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; margin-bottom: 35px;
    font-family: 'Pretendard'; font-size: 16px; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
    background: #fff; color: #0d0d23; border: 0;
}
._detectSec .detectWrap .item h3{ font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 21px; color: #fff; margin-bottom: 18px; }
._detectSec .detectWrap .item h3 span{ font-size: 17px; font-weight: 600; letter-spacing: -0.025em; }
._detectSec .detectWrap .item p{ font-size: 17px; line-height: 25px; letter-spacing: -0.025em; color: rgba(255,255,255,0.7); }


@media screen and (max-width: 1280px){
    ._solution._da ._cardSec{ padding: 100px 0 200px; }
    ._gridSec .gridWrap .item .txtBx h3{ font-size: 30px; }
    ._gridSec .gridWrap .item .txtBx p{ font-size: 18px; }
    ._gridSec .gridWrap .item .tags .tag{ font-size: 16px; }
    ._whySec .whyWrap .item h3{ font-size: 18px; }
}
@media screen and (max-width: 1024px){
    ._solution._da ._compareSec{ padding: 90px 0 60px; }
    ._gridSec .gridWrap{ grid-template-columns: 1fr; max-width: 550px; margin: 0 auto; margin-top: 20px; gap: 40px; }
    ._whySec .whyWrap,
    ._whySec .whyWrap._3{ grid-template-columns: repeat(2, 1fr); }
    ._detectSec .detectWrap{ grid-template-columns: repeat(2, 1fr); }
    ._detectSec .detectWrap .item h3{ line-height: 1.3; }
}
@media screen and (max-width: 820px){
    ._gridSec .gridWrap .item .txtBx{ padding-top: 20px; }
    ._gridSec .gridWrap .item .txtBx h3{ font-size: 24px; }
    ._gridSec .gridWrap .item .txtBx p{ font-size: 16px; }
    ._gridSec .gridWrap .item .tags{ margin-top: 15px; }
    ._gridSec .gridWrap .item .tags .tag{ font-size: 14px; }
    /* 터치 안내 문구 (flowImg::before 동일 크기) - grid 첫 행 전체 차지 + 좌측 정렬
       위: 섹션 제목과 간격 +20px / 아래: 행 gap(40px)을 당겨 썸네일 바로 위 6px */
    ._gridSec .gridWrap::before{ content: '* 이미지를 터치해 주세요'; grid-column: 1 / -1; color: #ccc; font-size: 14px; line-height: 1.4; text-align: left; display: block; margin: 20px 0 -34px; }
    html.jp ._gridSec .gridWrap::before{ content: '* 画像をタッチしてください。'; }
    ._solution._da ._cardSec{ padding: 70px 0; }
    ._solution._da ._flowSec .flowDesc{ font-size: 16px; line-height: 1.6;}
    ._detectSec{ padding: 80px 0 60px; }
    ._detectSec .subTit{ margin-bottom: 30px; }
    ._detectSec .detectWrap .item{ padding: 20px 15px; min-height: auto; }
    ._detectSec .detectWrap .item .num{ width: 30px; height: 30px; font-size: 14px; margin-bottom: 20px; }
}
@media screen and (max-width: 640px){
    ._whySec .whyWrap,
    ._whySec .whyWrap._3,
    ._detectSec .detectWrap{ grid-template-columns: 1fr; margin-top: 30px; }
    ._detectSec .detectWrap .item h3{ font-size: 20px; }
    ._solution._da ._flowSec .flowDesc{ font-size: 15px; line-height: 1.5; margin-top: 15px; }
    /* ._solution._da ._cardSec .techWrap .techs .topVis .layer{ display: none; } */
}

@media screen and (max-width: 500px){
    ._gridSec .gridWrap .item .txtBx h3{ font-size: 18px; }
    ._gridSec .gridWrap .item .txtBx p{ font-size: 14px; }
    ._gridSec .gridWrap .item .tags .tag{ font-size: 13px; }

    ._detectSec .detectWrap{ gap: 15px; }
    ._detectSec .detectWrap .item h3{ font-size: 16px; margin-bottom: 7px; }
    ._detectSec .detectWrap .item p{ font-size: 14px; line-height: 1.4; }
}


/* 배너있는 섹션 _bannerSec */
._solution ._bannerSec .subTit h2{ font-size: 64px; }
._solution ._bannerSec{ background: #0d0d23; padding-top: 120px; }
._solution ._bannerSec .text{ text-align: center; }
._solution ._bannerSec .text p{ font-size: 20px;line-height: calc(30/20);letter-spacing: -0.025em;color: #e3e3e3; margin-top: 40px; }
._solution ._bannerSec .btns{ margin-top: 50px; }
._solution ._bannerSec .marqueeWrap{ width: 100%; overflow: hidden; position:relative; display: flex;align-items: center; margin: 60px 0; }
._solution ._bannerSec .marqueeWrap::before{ 
    content: ''; display: block;z-index: 1;position: absolute;top: 0;width: 10.41vw; height: 100%;
    background: linear-gradient(-90deg, rgba(13, 13, 35, 0) 0%,  #0d0d23 10%,  #0d0d23 100%);
}
._solution ._bannerSec .marqueeWrap::after{
    content: '';display: block;z-index: 1;position: absolute;top: 0;right: 0;width: 10.41vw;height: 100%;
    background: linear-gradient(90deg, rgba(13, 13, 35, 0) 0%,  #0d0d23 10%,  #0d0d23 100%);
}
._solution ._bannerSec .marqueeWrap>div{ display: flex;align-items: center; gap: 75px; animation: marquee 30s linear infinite; }
._solution ._bannerSec .marqueeWrap .marquee{ display: flex;align-items: center; gap: 75px; /*max-width: 1645px;width: 100%; margin: 0 auto;*/ width:max-content; flex-shrink: 0; white-space: nowrap; }
._solution ._bannerSec .marqueeWrap .marquee>div{ max-width: 184px;width: 100%; }

._solution .s4 .banner{ 
    box-sizing: border-box; background-image: url('/asset/img/sub/solution/document_Ax/se_banner.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;  padding: 46px 0;
    position: relative;
}
._solution ._bannerSec .banner::before{ content: '';display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(13, 13, 35, 0.7); }
._solution ._bannerSec .banner .inn{ position: relative; width: 100%; margin: 0 auto; display: flex;align-items: center;justify-content: space-between; }
._solution ._bannerSec .banner .bx{ display: flex;flex-direction: column;align-items: center; cursor: pointer; padding-top: 15px; box-sizing: border-box; transition: padding-top .3s ease; width: calc((100% - 2px) / 3); }
._solution ._bannerSec .banner .bx span{ font-size: 16px;line-height: 1.3;letter-spacing: -0.025em;color: #bdfeee; text-align: center; }
._solution ._bannerSec .banner .bx>p{ font-family: 'Archivo'; font-size: 28px; font-weight: 500;letter-spacing: -0.025em;color: #fff; margin-top: 10px; }
._solution ._bannerSec .banner .line{ width: 1px; background: rgba(255, 255, 255, 0.2); height: 173px; align-self: stretch; }
._solution ._bannerSec .banner .hover{ opacity: 0; pointer-events: none; transition: opacity .3s ease, margin-top .3s ease; }
._solution ._bannerSec .banner .hover .btn{ display: flex;align-items: center; gap: 18px;}
._solution ._bannerSec .banner .hover .btn p{ font-size: 18px;font-weight: 400; letter-spacing: -0.025em; color: #fff; }
._solution ._bannerSec .banner .hover .btn .ic i{ font-size: 15px; color: #fff; letter-spacing: -0.025em; }
._solution ._bannerSec .banner .hover .btn .ic i + i{ margin-left: -11px; }
._solution ._bannerSec .banner .hover .btn .ic i:nth-child(1){ opacity: .3; }
._solution ._bannerSec .banner .hover .btn .ic i:nth-child(2){ opacity: .6; }

._solution ._bannerSec .banner .bx:hover{ padding-top: 0; }
._solution ._bannerSec .banner .bx:hover .hover{ opacity: 1; pointer-events: auto; margin-top: 46px; }
._solution ._bannerSec .banner .bx:hover .hover .btn .ic i{ animation: arrowSeq 1.2s ease-in-out infinite both; }
._solution ._bannerSec .banner .bx:hover .hover .btn .ic i:nth-child(2){ animation-delay: .2s; }
._solution ._bannerSec .banner .bx:hover .hover .btn .ic i:nth-child(3){ animation-delay: .4s; }
@keyframes arrowSeq {
    0%, 60%, 100%{ opacity: .3; }
    25%{ opacity: 1; }
}

@media screen and (max-width: 1600px){
    /* ._solution ._bannerSec .banner .inn{ max-width: 1200px; } */
    ._solution ._bannerSec .subTit h2{ font-size: 50px; }
}
@media screen and (max-width: 1440px){
    ._solution ._bannerSec .subTit h2{ font-size: 46px; }
    /* ._solution ._bannerSec .banner .inn{ max-width: 1000px; } */
    ._solution ._bannerSec .text p{ font-size: 18px; }
    ._solution ._bannerSec .banner .hover .btn p{ font-size: 16px; }
}
@media screen and (max-width: 1280px){
    ._solution ._bannerSec .subTit{ margin-bottom: 30px; }
    ._solution ._bannerSec .subTit h2{ font-size: 42px; }
}
@media screen and (max-width: 1024px){
    ._solution ._bannerSec{ padding-top: 70px; }
    ._solution ._bannerSec .subTit h2{ font-size: 36px; }
    /* ._solution ._bannerSec .banner .inn{ max-width: 706px; } */
    ._solution ._bannerSec .text p{ font-size: 17px; }
    ._solution ._bannerSec .banner .bx span{ font-size: 15px; }
    ._solution ._bannerSec .banner .bx>p{ font-size: 24px; }
    ._solution ._bannerSec .marqueeWrap>div{ gap: 50px; }
    ._solution ._bannerSec .marqueeWrap .marquee{ gap: 50px; } 
    ._solution ._bannerSec .marqueeWrap .marquee>div{ max-width: 140px; }
    
}
@media screen and (max-width: 820px){
    ._solution ._bannerSec{ padding-top: 40px; }
    ._solution ._bannerSec .subTit{ margin-bottom: 20px; }
    ._solution ._bannerSec .subTit h2{ font-size: 32px; }
    ._solution ._bannerSec .banner .inn{ max-width: unset;justify-content: center; }
    ._solution ._bannerSec .banner .bx{ padding-top: 0px; padding: 0 15px; box-sizing: border-box; }
    ._solution ._bannerSec .banner .bx span{ font-size: 14px; }
    ._solution ._bannerSec .banner .bx>p{ font-size: 20px; }
    ._solution ._bannerSec .banner .hover{ opacity: 1; pointer-events: auto; margin-top: 20px; }
    ._solution ._bannerSec .banner .hover .btn{ gap: 16px; }
    ._solution ._bannerSec .banner .hover .btn p{ font-size: 14px; }
    ._solution ._bannerSec .marqueeWrap .marquee{ gap: 10px; }
    ._solution ._bannerSec .marqueeWrap .marquee>div{ max-width: 130px; }

    ._solution ._bannerSec .text p{ font-size: 14px; margin-top: 15px; }
    
}
@media screen and (max-width: 500px){
    ._solution ._bannerSec .subTit h2{ font-size: 26px; }
    ._solution .s4 .banner{ padding: 30px; }
    ._solution ._bannerSec .banner .inn{ flex-direction: column; }
    ._solution ._bannerSec .banner .line{ width: 100%; height: 1px; margin: 20px 0;}
    ._solution ._bannerSec .banner .bx{ width: 100%; padding: 0; }
    ._solution ._bannerSec .banner .bx span{ font-size: 13px; }
    ._solution ._bannerSec .banner .bx>p{ font-size: 18px; margin-top: 8px; }
    ._solution ._bannerSec .banner .hover .btn{ gap: 10px; }
    ._solution ._bannerSec .banner .bx:hover .hover{ margin-top: 20px; }
}