@charset "utf-8";
/* ===================================================================
   [디엠] 모션 · 이펙트 레이어  (dy_anim.css)
   -------------------------------------------------------------------
   · dy_theme.css 다음에 로드됩니다. 색·여백은 건드리지 않고
     등장 / 호버 / 배경 움직임만 담당합니다.
   · 자바스크립트가 <html> 에 .dy-anim 을 붙일 때만 숨김이 걸리므로
     JS 가 꺼져 있어도 내용은 항상 보입니다.
   · 모션을 끄고 싶으면 head.sub.php 의 dy_anim.css / dy_anim.js
     두 줄만 주석 처리하면 됩니다.
   =================================================================== */

/* ===== 1. 스크롤 등장 ============================================= */
html.dy-anim .dy-rv{
  opacity:0;
  transform:translate3d(0,34px,0);
  filter:blur(6px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),
             transform .95s cubic-bezier(.16,1,.3,1),
             filter .95s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--dy-d,0s);
  will-change:opacity,transform;
}
html.dy-anim .dy-rv--x{transform:translate3d(-52px,0,0);}
html.dy-anim .dy-rv--r{transform:translate3d(52px,0,0);}
html.dy-anim .dy-rv--zoom{transform:scale(.9);filter:blur(10px);}
html.dy-anim .dy-rv--up{transform:translate3d(0,64px,0) scale(.97);}
html.dy-anim .dy-rv--clip{clip-path:inset(0 0 100% 0);opacity:1;filter:none;transform:none;
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);}
html.dy-anim .dy-rv--flip{transform:perspective(900px) rotateX(24deg) translateY(30px);transform-origin:top center;}

html.dy-anim .dy-rv.is-in{
  opacity:1;transform:none;filter:blur(0);clip-path:inset(0 0 0 0);
}

/* 제목 단어별 등장 */
html.dy-anim .dy-w{display:inline-block;opacity:0;transform:translate3d(0,.7em,0) rotate(3deg);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--dy-d,0s);}
html.dy-anim .is-in .dy-w,
html.dy-anim .dy-w.is-in{opacity:1;transform:none;}

/* ===== 2. 히어로 =================================================== */
.dy-hero{overflow:hidden;}
.dy-hero__bg{
  animation:dyKen 22s ease-in-out infinite alternate;
  transform-origin:center 60%;
  will-change:transform;
}
@keyframes dyKen{
  from{transform:scale(1.02) translate3d(0,0,0);}
  to  {transform:scale(1.14) translate3d(0,-1.5%,0);}
}
/* 마우스 시차 (JS 가 --mx / --my 를 넣어줍니다) */
.dy-hero__bg{translate:calc(var(--mx,0) * -14px) calc(var(--my,0) * -14px);}

/* 히어로 위 스포트라이트 */
.dy-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(520px circle at calc(50% + var(--mx,0) * 22%) calc(46% + var(--my,0) * 18%),
             rgba(61,155,255,.22), transparent 62%);
  opacity:.9;transition:opacity .6s;
}
.dy-hero .dy-inner{position:relative;z-index:3;}

/* 히어로 문구 등장 */
html.dy-anim .dy-hero__eyebrow,
html.dy-anim .dy-hero h1,
html.dy-anim .dy-hero__brand,
html.dy-anim .dy-hero__note{
  opacity:0;transform:translate3d(0,30px,0);
  animation:dyHeroUp 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
html.dy-anim .dy-hero__eyebrow{animation-delay:.15s;}
html.dy-anim .dy-hero h1{animation-delay:.32s;}
html.dy-anim .dy-hero__brand{animation-delay:.62s;}
html.dy-anim .dy-hero__note{animation-delay:.85s;}
@keyframes dyHeroUp{to{opacity:1;transform:none;}}

.dy-hero h1 em{
  background:linear-gradient(100deg,#3d9bff 0%,#8ecbff 42%,#3d9bff 84%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:dyShine 5.5s linear infinite;
}
@keyframes dyShine{to{background-position:220% 0;}}

.dy-hero__scroll{animation:dyBob 1.9s ease-in-out infinite;}
@keyframes dyBob{0%,100%{transform:translateY(0);opacity:.75;}50%{transform:translateY(9px);opacity:1;}}

/* ===== 3. 배경 광원 (섹션 분위기) ================================== */
.dy-sec{position:relative;}
.dy-sec--alt::before,
.dy-sec--alt::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(90px);opacity:.5;
}
.dy-sec--alt::before{width:520px;height:520px;left:-160px;top:-120px;
  background:radial-gradient(circle,rgba(26,111,224,.32),transparent 68%);
  animation:dyFloat 15s ease-in-out infinite alternate;}
.dy-sec--alt::after{width:420px;height:420px;right:-140px;bottom:-140px;
  background:radial-gradient(circle,rgba(61,155,255,.2),transparent 68%);
  animation:dyFloat 19s ease-in-out infinite alternate-reverse;}
@keyframes dyFloat{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(60px,-40px,0) scale(1.16);}
}
.dy-sec > .dy-inner{position:relative;z-index:1;}

/* ===== 4. 카드 호버 (공통) ========================================= */
.dy-feat,.dy-cnt,.dy-cert,.dy-info,.dy-org__team,.dy-flow-item,.dy-proc-item,.dy-slide-card{
  position:relative;overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             box-shadow .5s cubic-bezier(.16,1,.3,1),
             border-color .4s, background-color .4s;
}
.dy-feat:hover,.dy-cnt:hover,.dy-cert:hover,.dy-info:hover,
.dy-org__team:hover,.dy-flow-item:hover,.dy-proc-item:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(61,155,255,.35) inset;
}
/* 사선 광택 스윕 */
.dy-feat::after,.dy-cnt::after,.dy-cert::after,.dy-proc-item::after,.dy-flow-item::after{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  transform:skewX(-18deg);transition:left .85s cubic-bezier(.16,1,.3,1);
}
.dy-feat:hover::after,.dy-cnt:hover::after,.dy-cert:hover::after,
.dy-proc-item:hover::after,.dy-flow-item:hover::after{left:140%;}

/* 카드 안 이미지 */
.dy-feat__thumb,.dy-pd-hero,.dy-pd-thumbs div,.dy-greet-img{overflow:hidden;}
.dy-feat__thumb img,.dy-pd-thumbs div img,.dy-greet-img img,.dy-cert__img{
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s;
}
.dy-feat:hover .dy-feat__thumb img,
.dy-pd-thumbs div:hover img,
.dy-cert:hover .dy-cert__img{transform:scale(1.07);}
.dy-cert__img{filter:saturate(.9) brightness(.97);}
.dy-cert:hover .dy-cert__img{filter:saturate(1) brightness(1.03);}

.dy-slide-card__thumb{transition:transform .9s cubic-bezier(.16,1,.3,1);}
.dy-slide-card:hover .dy-slide-card__thumb{transform:scale(1.08);}

/* ===== 5. 카운터 ================================================== */
.dy-cnt .n{
  background:linear-gradient(120deg,#3d9bff,#9fd4ff 55%,#3d9bff);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:dyShine 6s linear infinite;
}
.dy-cnt .ico{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s;}
.dy-cnt:hover .ico{transform:translateY(-4px) rotate(-8deg) scale(1.08);
  box-shadow:0 14px 34px -10px rgba(26,111,224,.8);}

/* ===== 6. 표 ====================================================== */
.dy-tbl tbody tr{transition:background-color .35s;}
.dy-tbl tbody tr:hover{background:rgba(61,155,255,.07);}
.dy-tbl th{position:relative;}
.dy-tbl tbody tr:hover th{color:#8ecbff;}

.dy-tbl-title{position:relative;overflow:hidden;}

/* ===== 7. 버튼 ==================================================== */
.dy-btn-more{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,color .3s,background-color .3s;}
.dy-btn-more::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-120%) skewX(-18deg);transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.dy-btn-more:hover::before{transform:translateX(120%) skewX(-18deg);}
.dy-btn-more:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(26,111,224,.9);}
.dy-btn-more b{display:inline-block;transition:transform .35s;}
.dy-btn-more:hover b{transform:translateX(6px);}

/* ===== 8. 조직도 · 프로세스 연결선 ================================= */
html.dy-anim .dy-org__stem{transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.16,1,.3,1) .1s;}
html.dy-anim .dy-org.is-in .dy-org__stem{transform:scaleY(1);}
.dy-org__top{position:relative;overflow:hidden;}
.dy-org__top::after{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg);animation:dySweep 4.5s ease-in-out infinite;
}
@keyframes dySweep{0%,60%{left:-140%;}100%{left:140%;}}

.dy-flow-arw{animation:dyArw 1.8s ease-in-out infinite;}
@keyframes dyArw{0%,100%{transform:translateX(0);opacity:.5;}50%{transform:translateX(5px);opacity:1;}}

/* ===== 9. 상단 스크롤 진행바 / 맨 위로 ============================= */
.dy-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,#1a6fe0,#8ecbff);box-shadow:0 0 14px rgba(61,155,255,.85);
  transition:width .12s linear;pointer-events:none;}

.dy-top{position:fixed;right:26px;bottom:26px;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:900;
  background:rgba(10,16,26,.82);border:1px solid rgba(255,255,255,.16);color:#cfe4ff;
  font-size:17px;cursor:pointer;backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1),visibility .4s,
             background-color .3s,border-color .3s;}
.dy-top.is-on{opacity:1;visibility:visible;transform:none;}
.dy-top:hover{background:#1a6fe0;border-color:#1a6fe0;color:#fff;transform:translateY(-4px);}

/* ===== 10. 헤더 · 리스트 · 기타 소소한 움직임 ====================== */
.v9_bom01-header{transition:background-color .4s,box-shadow .4s,backdrop-filter .4s;}
.v9_bom01-header.dy-shrink{background:rgba(6,10,16,.9);backdrop-filter:blur(12px);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.9);}

.dy-chk li{transition:color .3s,transform .35s;}
.dy-chk li:hover{color:#fff;transform:translateX(4px);}
.dy-chk li::before{transition:transform .35s,box-shadow .35s;}
.dy-chk li:hover::before{transform:rotate(45deg) scale(1.25);box-shadow:0 0 12px rgba(61,155,255,.9);}

.dy-hist-row{transition:transform .45s cubic-bezier(.16,1,.3,1);}
.dy-hist-row:hover{transform:translateX(6px);}
.dy-hist-year{transition:color .35s,text-shadow .35s;}
.dy-hist-row:hover .dy-hist-year{color:#8ecbff;text-shadow:0 0 22px rgba(61,155,255,.6);}

.dy-bot__notice li a{transition:color .25s,transform .35s,padding-left .35s;}
.dy-bot__notice li a:hover{transform:translateX(4px);}

.dy-ntc-new{animation:dyPulse 1.8s ease-in-out infinite;}
@keyframes dyPulse{0%,100%{box-shadow:0 0 0 0 rgba(26,111,224,.7);}70%{box-shadow:0 0 0 7px rgba(26,111,224,0);}}

.dy-cta{position:relative;overflow:hidden;}
.dy-cta::before{
  content:'';position:absolute;width:640px;height:640px;left:50%;top:50%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(26,111,224,.26),transparent 66%);
  animation:dyPulseBg 7s ease-in-out infinite;}
@keyframes dyPulseBg{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1);}
                     50%{opacity:.95;transform:translate(-50%,-50%) scale(1.18);}}
.dy-cta .dy-inner{position:relative;z-index:1;}
.dy-cta .tel{animation:dyGlow 3.4s ease-in-out infinite;}
@keyframes dyGlow{0%,100%{text-shadow:0 0 0 rgba(61,155,255,0);}
                  50%{text-shadow:0 0 26px rgba(61,155,255,.75);}}

/* 페이지 타이틀 밑줄 그어지기 */
.dy-ptitle h2{position:relative;display:inline-block;}
.dy-ptitle h2::after{content:'';position:absolute;left:0;bottom:-10px;height:3px;width:100%;
  background:linear-gradient(90deg,#1a6fe0,transparent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;animation:dyLine 1.1s cubic-bezier(.16,1,.3,1) .35s forwards;}
@keyframes dyLine{to{transform:scaleX(1);}}

/* ===== 11. 모바일 · 접근성 ======================================== */
@media (max-width:768px){
  .dy-sec--alt::before{width:300px;height:300px;left:-120px;}
  .dy-sec--alt::after{width:260px;height:260px;right:-110px;}
  .dy-top{right:16px;bottom:16px;width:44px;height:44px;}
  html.dy-anim .dy-rv{transform:translate3d(0,22px,0);filter:blur(4px);}
  html.dy-anim .dy-rv--x,html.dy-anim .dy-rv--r{transform:translate3d(0,22px,0);}
}

@media (prefers-reduced-motion:reduce){
  html.dy-anim .dy-rv,
  html.dy-anim .dy-w{opacity:1 !important;transform:none !important;filter:none !important;
                     clip-path:none !important;transition:none !important;}
  .dy-hero__bg,.dy-sec--alt::before,.dy-sec--alt::after,.dy-cta::before,
  .dy-hero__scroll,.dy-flow-arw,.dy-org__top::after,.dy-cnt .n,.dy-hero h1 em,
  .dy-ntc-new,.dy-cta .tel,.dy-ptitle h2::after{animation:none !important;}
  html.dy-anim .dy-hero__eyebrow,html.dy-anim .dy-hero h1,
  html.dy-anim .dy-hero__brand,html.dy-anim .dy-hero__note{opacity:1;transform:none;animation:none;}
}