/* 에디트플로우 소개 */

.st0{
    fill:none;
    stroke:#CDCDCD;
    stroke-miterlimit:10;
}

.st1{
    fill:none;
    stroke:#CDCDCD;
    stroke-miterlimit:10;
}

@keyframes drawLine { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawLine 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.animate-spin-circle { animation: spin-slow 30s linear infinite; pointer-events: none; }

@keyframes processActivate {
    0%, 19% { border-color: #0E78EB; box-shadow: 0 8px 28px rgba(14,120,235,0.18); background-color: #ffffff; }
    20%, 100% { border-color: #e5e7eb; box-shadow: 0 1px 4px rgba(0,0,0,0.06); background-color: #ffffff; }
}
@keyframes processImgActivate {
    0%, 19% { opacity: 1; filter: none; }
    20%, 100% { opacity: 0.25; }
}
.process-card { animation: processActivate 10s ease-in-out infinite; }
.process-card img { animation: processImgActivate 10s ease-in-out infinite; }
.process-step:nth-child(1) .process-card,
.process-step:nth-child(1) .process-card img { animation-delay: 0s; }
.process-step:nth-child(2) .process-card,
.process-step:nth-child(2) .process-card img { animation-delay: 2s; }
.process-step:nth-child(3) .process-card,
.process-step:nth-child(3) .process-card img { animation-delay: 4s; }
.process-step:nth-child(4) .process-card,
.process-step:nth-child(4) .process-card img { animation-delay: 6s; }
.process-step:nth-child(5) .process-card,
.process-step:nth-child(5) .process-card img { animation-delay: 8s; }

@keyframes pm-pulse { from { width: 0px; height: 0px; opacity: 1; } to { width: 950px; height: 950px; opacity: 0; } }
.animate-pulse-wave:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(14, 120, 235, 0.2); filter: blur(10px); z-index: -1; animation: pm-pulse 3.5s infinite cubic-bezier(0.25, 0, 0, 1); }

.bg-m11-wave:before { display: block; content: ""; width: 100%; height: 50%; background: url('../images/page/m11_sec1_bg.png') no-repeat; background-size: 100% auto; position: absolute; left: 0; bottom: 0; }

.domain-card-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.domain-scroll-list {
    will-change: transform;
}
#contents { line-height: 1.3; }