/* 페이지 타이틀 배너 공통 톤 v1.1(청색 단색 팔레트) (2026-10-28 Claude)
   - 기업정보화·IT 교육 센터·웨비나·회사소개·고객지원 상단 타이틀을 첫 화면(hero-connected)과 같은 톤으로 맞춘다:
     깊은 남색 바탕 + 숨쉬는 조명 2~3개 + 격자 + 빛줄기 + 아래 색선. 페이지마다 대표색 하나(청·은행잎·진분홍·하늘·틸).
   - 기존 배너 마크업(.enterprise-banner, .support-page-heading)은 그대로 두고 .pb 클래스와 .pb-bg 를 덧붙인다. page-banners-cx.js 가 붙인다. */
.pb{--pb-a:#6f9bff;--pb-b:#5bb8ff;--pb-base:#0a1434;--pb-ink:#eaf1ff;--pb-dim:#c3d0ea;position:relative;isolation:isolate;overflow:hidden;background:var(--pb-base)!important;color:var(--pb-ink)!important;border-color:#ffffff14!important}
/* 페이지별 밝기 단계(모두 청색 계열): 기업정보화 azure, IT 교육 센터 sky, 웨비나 light, 회사소개 ice, 고객지원 royal */
.pb--blue{--pb-a:#3d8cff;--pb-b:#8fd0ff;--pb-base:#0a1434}
.pb--sky{--pb-a:#8fd0ff;--pb-b:#bfe3ff;--pb-base:#0b1a3a}
.pb--light{--pb-a:#5bb8ff;--pb-b:#2f6bf0;--pb-base:#07152e}
.pb--ice{--pb-a:#bfe3ff;--pb-b:#3d8cff;--pb-base:#0c1e42}
.pb--royal{--pb-a:#6fa8ff;--pb-b:#8fd0ff;--pb-base:#081a33}
/* 기존 사진(::before)은 남기되 어둡게, 왼쪽은 바탕색으로 덮는다 */
.enterprise-banner.pb:before{opacity:.55;filter:saturate(.75) brightness(.9)}
.enterprise-banner.pb:after{background:linear-gradient(90deg,var(--pb-base) 0%,color-mix(in srgb,var(--pb-base) 88%,transparent) 42%,color-mix(in srgb,var(--pb-base) 30%,transparent) 100%)}
.pb-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pb-blob{position:absolute;width:40vw;height:40vw;min-width:380px;min-height:380px;border-radius:50%;filter:blur(64px);mix-blend-mode:screen;opacity:.58;background:radial-gradient(circle,var(--bc),transparent 62%);animation:pb-drift 20s ease-in-out infinite alternate,pb-breathe 7s ease-in-out infinite;will-change:transform,opacity}
.pb-b1{--bc:var(--pb-a);left:-10%;top:-70%}
.pb-b2{--bc:var(--pb-b);left:34%;top:-45%;opacity:.42;animation-delay:-7s,-3s}
.pb-b3{--bc:var(--pb-a);right:-8%;bottom:-80%;opacity:.4;animation-delay:-13s,-5s}
@keyframes pb-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,2vw) scale(1.12)}}
@keyframes pb-breathe{0%,100%{opacity:.5}50%{opacity:1}}
.pb-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 30% 50%,#000 20%,transparent 80%)}
.pb-beam{position:absolute;top:-40%;bottom:-40%;width:22vw;min-width:200px;left:-40%;background:linear-gradient(90deg,transparent,#ffffff0a 40%,#ffffff18 50%,#ffffff0a 60%,transparent);transform:skewX(-18deg);mix-blend-mode:screen;animation:pb-beam 16s linear infinite}
@keyframes pb-beam{from{left:-40%}to{left:130%}}
.pb-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--pb-a) 30%,var(--pb-b) 55%,transparent 80%);background-size:220% 100%;animation:pb-line 7s linear infinite;opacity:.9}
@keyframes pb-line{from{background-position:120% 0}to{background-position:-120% 0}}
.pb-ring{position:absolute;right:clamp(4%,8vw,10%);top:50%;width:clamp(160px,22vw,320px);aspect-ratio:1;translate:0 -50%;border-radius:50%;border:1px solid #ffffff1c;box-shadow:inset 0 0 40px #ffffff08;mask-image:linear-gradient(90deg,transparent,#000 40%)}
.pb-ring::before,.pb-ring::after{content:'';position:absolute;inset:14%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--pb-a) 55%,transparent);animation:pb-spin 26s linear infinite}
.pb-ring::after{inset:32%;border-style:solid;border-color:color-mix(in srgb,var(--pb-b) 45%,transparent);animation-direction:reverse;animation-duration:18s}
@keyframes pb-spin{to{transform:rotate(360deg)}}
.pb-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff,0 0 28px var(--pb-a);animation:pb-blink 2.6s ease-in-out infinite}
.pb-ring .pb-dot{left:50%;top:0;margin:-4px}
@keyframes pb-blink{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
/* 글 */
.pb .enterprise-banner-inner{position:relative;z-index:1}
.pb .enterprise-banner-copy>span,.pb--support>span{display:inline-flex;align-items:center;gap:8px;color:var(--pb-a)!important}
.pb .enterprise-banner-copy>span::before,.pb--support>span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--pb-a);box-shadow:0 0 12px var(--pb-a)}
.pb h1{color:#fff!important}
.pb h1 span{background-image:linear-gradient(90deg,#fff 0%,color-mix(in srgb,var(--pb-a) 55%,#fff) 40%,var(--pb-a) 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.pb p{color:var(--pb-dim)!important}
.pb .enterprise-banner-copy>*,.pb--support>*{animation:pb-up .9s cubic-bezier(.2,.7,.2,1) both}
.pb .enterprise-banner-copy>h1,.pb--support>.support-heading-title{animation-delay:.12s}
.pb .enterprise-banner-copy>p,.pb--support>p{animation-delay:.26s}
@keyframes pb-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 새로 만든 배너(웨비나·회사소개): 기존 .enterprise-banner 치수 그대로 */
.enterprise-banner.pb-made{min-height:250px}.enterprise-banner.pb-made .enterprise-banner-inner{min-height:250px;padding:44px 28px}
.enterprise-banner.pb-made h1{font-size:clamp(28px,2.9vw,42px)}
#webinar .renew-wrap>header.renew-heading.pb-hidden{display:none!important}
#webinar .renew-wrap{padding-top:36px}
/* 고객지원 상단(.support-page-heading) 다섯 페이지 공통 */
body.cmc-five-menu .support-isolated .support-page-heading.pb{color:#fff;border-radius:16px;padding:28px 32px}
body.cmc-five-menu .support-isolated .support-page-heading.pb::before{opacity:.5;filter:saturate(.8)}
body.cmc-five-menu .support-isolated .support-page-heading.pb::after{background:linear-gradient(90deg,var(--pb-base) 0%,var(--pb-base) 36%,color-mix(in srgb,var(--pb-base) 82%,transparent) 50%,color-mix(in srgb,var(--pb-base) 30%,transparent) 72%,transparent 92%)}
body.cmc-five-menu .support-isolated .support-page-heading.pb>*{position:relative;z-index:1}
body.cmc-five-menu .support-isolated .support-page-heading.pb h1{color:#fff!important}
body.cmc-five-menu .support-isolated .support-page-heading.pb>p{color:var(--pb-dim)!important}
body.cmc-five-menu .support-isolated .support-page-heading.pb .support-heading-art svg{filter:drop-shadow(0 0 14px #8fd0ff66)}
@media(max-width:700px){.pb-blob{min-width:260px;min-height:260px;filter:blur(44px)}.pb-ring{display:none}.enterprise-banner.pb-made,.enterprise-banner.pb-made .enterprise-banner-inner{min-height:220px}}
@media (prefers-reduced-motion: reduce){.pb-blob,.pb-beam,.pb-line,.pb-ring::before,.pb-ring::after,.pb-dot,.pb .enterprise-banner-copy>*,.pb--support>*{animation:none!important}}

/* 회사소개 소개글(밝은 바탕, 배너 없음): 둘째 줄만 청색 그라데이션, 떠오르는 등장 */
#companyOverview .company-overview-intro.pb-light{position:relative;background:#fff!important;border-bottom:0!important;text-align:center;padding-top:62px;padding-bottom:40px}
#companyOverview .company-overview-intro.pb-light>span{display:inline-flex;align-items:center;gap:8px;color:#2f6bf0!important;animation:pb-up .8s cubic-bezier(.2,.7,.2,1) both}
#companyOverview .company-overview-intro.pb-light>span::before{content:'';width:8px;height:8px;border-radius:50%;background:#3d8cff;box-shadow:0 0 12px #3d8cff}
#companyOverview .company-overview-intro.pb-light h3{color:#0a1540!important;font-weight:800;animation:pb-up .9s .1s cubic-bezier(.2,.7,.2,1) both}
#companyOverview .company-overview-intro.pb-light h3 span{background-image:linear-gradient(90deg,#2a4fd0,#3d8cff 50%,#5bb8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#companyOverview .company-overview-intro.pb-light p{margin-left:auto;margin-right:auto;color:#4d6472!important;animation:pb-up .9s .22s cubic-bezier(.2,.7,.2,1) both}
#companyOverview .company-overview-intro.pb-light::after{content:'';display:block;width:72px;height:3px;margin:26px auto 0;border-radius:3px;background:linear-gradient(90deg,#2a4fd0,#8fd0ff)}