/* 메인: 핵심 분야 (솔루션 앞) */
.cx{position:relative;padding:130px 32px 150px;overflow:hidden;color:#14234B;word-break:keep-all;line-height:1.5;text-align:center}
.cx *{box-sizing:border-box}
.cx-wrap{position:relative;z-index:1;max-width:1360px;margin:0 auto}
.cx-gem{position:absolute;border-radius:24%;transform:rotate(45deg);border:3px solid rgba(255,255,255,.8);box-shadow:inset 0 0 40px rgba(255,255,255,.7),0 30px 70px rgba(110,130,255,.2);pointer-events:none;animation:cxDrift 9s ease-in-out infinite}
.cx-g1{right:-30px;top:60px;width:160px;height:160px;background:linear-gradient(135deg,rgba(140,180,255,.65),rgba(196,210,255,.3))}
.cx-g2{left:-60px;top:340px;width:130px;height:130px;background:linear-gradient(135deg,rgba(150,214,236,.65),rgba(200,236,246,.3));animation-delay:-4s}
.cx-g3{right:150px;bottom:40px;width:90px;height:90px;background:linear-gradient(135deg,rgba(255,170,190,.6),rgba(255,214,222,.3));animation-delay:-7s}
@keyframes cxDrift{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(55deg) translate(-12px,-16px)}}
.cx-kk{font-size:13px;font-weight:800;letter-spacing:.34em;color:#3F66F0;padding-left:.34em}
.cx h2{margin:18px 0 0;font-size:clamp(34px,4.2vw,60px);line-height:1.28}
.cx-lead{margin:24px 0 0;font-size:clamp(15px,1.4vw,19px);line-height:1.85;color:#46567F;letter-spacing:-.02em}
.cx-cards{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:left}
.cx-card{position:relative;display:flex;flex-direction:column;min-height:424px;padding:32px 30px 30px;border-radius:36px;border:2px solid #fff;background:var(--bg);box-shadow:0 22px 54px var(--sh);overflow:hidden;transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s}
.cx-card:nth-child(2),.cx-card:nth-child(4){margin-top:34px}
.cx-card:hover{transform:translateY(-8px);box-shadow:0 34px 70px var(--sh)}
.cx-card::after{content:"";position:absolute;right:-96px;bottom:-96px;width:200px;height:200px;border-radius:22%;transform:rotate(45deg);border:2px solid rgba(255,255,255,.85);background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.cx-card:hover::after{transform:rotate(55deg) scale(1.15)}
.cx-c1{--bg:linear-gradient(160deg,#DCE8FF,#F8FAFF 78%);--sh:rgba(90,130,240,.2);--ic:linear-gradient(135deg,#9DBDFF,#D3E0FF)}
.cx-c2{--bg:linear-gradient(160deg,#FFE1EA,#FFF8FA 78%);--sh:rgba(255,120,160,.18);--ic:linear-gradient(135deg,#FFA9BD,#FFD6E0)}
.cx-c3{--bg:linear-gradient(160deg,#CFEEF8,#F3FBFD 78%);--sh:rgba(90,190,225,.22);--ic:linear-gradient(135deg,#90D6EE,#CBEEF8)}
.cx-c4{--bg:linear-gradient(160deg,#E3DAFF,#F8F5FF 78%);--sh:rgba(130,110,240,.2);--ic:linear-gradient(135deg,#B7A9FF,#E0D9FF)}
.cx-ico{position:relative;width:72px;height:72px;display:grid;place-items:center;margin:-6px 0 0 -8px}
.cx-ico::before{content:"";position:absolute;inset:10px;border-radius:16px;transform:rotate(45deg);background:var(--ic);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 12px 20px rgba(100,120,230,.24)}
.cx-ico svg{position:relative;width:28px;height:28px}
.cx-nm{margin-top:24px;font-size:15px;font-weight:800;color:#3F66F0}
.cx-card h3{margin:8px 0 0;font-size:clamp(23px,2vw,29px);line-height:1.3}
.cx-card p{position:relative;z-index:1;margin:14px 0 0;font-size:15px;line-height:1.75;color:#4A5A86;letter-spacing:-.02em}
.cx-tags{margin-top:auto;padding-top:18px;display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.cx-tags span{padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.92);font-size:12.5px;font-weight:700;color:#4A5A86;border:1px solid #E1E9FB;white-space:nowrap}
.cx-cue{margin-top:56px;font-size:13px;color:#6A78A0}
.cx-cue i{display:block;width:10px;height:10px;margin:8px auto 0;border-right:2px solid #3F66F0;border-bottom:2px solid #3F66F0;transform:rotate(45deg);animation:cxCue 1.4s ease-in-out infinite}
@keyframes cxCue{0%,100%{translate:0 -3px;opacity:.5}50%{translate:0 3px;opacity:1}}
@media(max-width:1180px){.cx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-card:nth-child(2),.cx-card:nth-child(4){margin-top:0}.cx-card{min-height:380px}}
@media(max-width:640px){.cx{padding:84px 18px 96px}.cx-cards{grid-template-columns:1fr;margin-top:44px}.cx-card{min-height:0}.cx-tags{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.cx-gem,.cx-cue i{animation:none}}

/* ───── 통통 튀는 카드 효과 ───── */
.concept-home .cx-card.reveal{opacity:0;transform:translateY(110px) scale(.8) rotate(-3deg);filter:none;
  transition:transform .95s cubic-bezier(.34,1.56,.64,1) var(--cd,0s),opacity .5s ease var(--cd,0s),box-shadow .5s}
.concept-home .cx-card.reveal.visible{opacity:1;transform:none;filter:none}
/* 나타난 뒤: 아이콘이 톡 튀어나오고 둥둥, 키워드가 하나씩 통통 */
.cx-card:not(.visible) .cx-ico{transform:scale(0)}
.cx-card.visible .cx-ico{animation:cxIcoPop .7s cubic-bezier(.34,1.56,.64,1) calc(var(--cd,0s) + .45s) backwards,cxBob 3.6s ease-in-out calc(var(--cd,0s) + 1.3s) infinite}
.cx-card:not(.visible) .cx-tags span{opacity:0;transform:scale(.4)}
.cx-card .cx-tags span{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.cx-card.visible .cx-tags span{animation:cxChip .6s cubic-bezier(.34,1.56,.64,1) backwards}
.cx-card.visible .cx-tags span:nth-child(1){animation-delay:calc(var(--cd,0s) + .75s)}
.cx-card.visible .cx-tags span:nth-child(2){animation-delay:calc(var(--cd,0s) + .85s)}
.cx-card.visible .cx-tags span:nth-child(3){animation-delay:calc(var(--cd,0s) + .95s)}
@keyframes cxIcoPop{0%{transform:scale(0) rotate(-90deg)}100%{transform:scale(1) rotate(0)}}
@keyframes cxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cxChip{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
/* 마우스를 올리면 통! 하고 튀어 오름 */
.concept-home .cx-card.reveal.visible:hover{transform:translateY(-14px) scale(1.03) rotate(-.8deg);box-shadow:0 38px 74px var(--sh)}
.cx-card.visible:hover .cx-ico svg{animation:cxWiggle .7s ease-in-out}
.cx-card.visible:hover .cx-tags span{transform:translateY(-7px)}
.cx-card.visible:hover .cx-tags span:nth-child(2){transition-delay:.06s}
.cx-card.visible:hover .cx-tags span:nth-child(3){transition-delay:.12s}
@keyframes cxWiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-16deg) scale(1.18)}60%{transform:rotate(12deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){
  .concept-home .cx-card.reveal{opacity:1;transform:none;transition:none}
  .cx-card .cx-ico,.cx-card .cx-tags span{opacity:1!important;transform:none!important;animation:none!important}
}