/* ============================================================================
   EZS WEBSITE CSS — FINAL

   01. 공통
   02. 헤더
   03. 메인 히어로
   04. 서비스
   ============================================================================ */


/* ============================================================================
   01. 공통
   ============================================================================ */

/* --------------------------------------------------------------------------
   01-1. 웹폰트
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paperozi";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   01-2. 기본 초기화
   -------------------------------------------------------------------------- */

.ezs-mainhero,
.ezs-mainhero *,
.ezs-mainhero *::before,
.ezs-mainhero *::after {
    box-sizing: border-box;
}

.ezs-mainhero h1,
.ezs-mainhero h2,
.ezs-mainhero h3,
.ezs-mainhero p,
.ezs-mainhero figure {
    margin: 0;
    padding: 0;
    font-family: "Paperozi", sans-serif;
    text-transform: none;
}

.ezs-mainhero button,
.ezs-mainhero input,
.ezs-mainhero textarea,
.ezs-mainhero select {
    font-family: "Paperozi", sans-serif;
}

.ezs-mainhero a {
    color: inherit;
    text-decoration: none;
}

.ezs-mainhero img,
.ezs-mainhero video {
    display: block;
    width: 100%;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ============================================================================
   02. 헤더
   ============================================================================ */

/* --------------------------------------------------------------------------
   02-1. 기본 스타일
   -------------------------------------------------------------------------- */

.ezs-mainhero-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    width: 100%;
    height: var(--ezs-mainhero-nav-height);
    align-items: stretch;
    background: transparent;
    transform: translate3d(0, 0, 0);
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease,
        box-shadow 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.ezs-mainhero-nav.is-scrolled {
    background: rgba(24, 24, 24, 0.96);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ezs-mainhero-nav.is-hidden {
    transform: translate3d(0, -100%, 0);
}

.ezs-mainhero-nav.is-menu-open {
    transform: translate3d(0, 0, 0);
}

.ezs-mainhero-logo {
    display: flex;
    width: 12.75%;
    min-width: 180px;
    align-items: center;
    padding: 0 25px;
    opacity: 0;
    transform: translateY(-20px);
    animation: ezs-mainhero-nav-reveal 0.8s ease 0.55s forwards;
}

.ezs-mainhero-logo img {
    width: 120px;
    height: auto;
    object-fit: contain;
}

.ezs-mainhero-menu {
    display: flex;
    flex: 1;
    align-items: stretch;
    justify-content: flex-end;
}

.ezs-mainhero-menu-link,
.ezs-mainhero-agency-link {
    position: relative;
    display: flex;
    min-width: 125px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-20px);
    animation: ezs-mainhero-nav-reveal 0.7s ease forwards;
}

.ezs-mainhero-menu-link::after {
    position: absolute;
    right: 20px;
    bottom: 23px;
    left: 20px;
    height: 2px;
    background: var(--ezs-mainhero-cyan);
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}

.ezs-mainhero-menu-link:hover,
.ezs-mainhero-menu-link:focus,
.ezs-mainhero-agency-link:hover,
.ezs-mainhero-agency-link:focus {
    color: #fff;
}

.ezs-mainhero-menu-link:hover::after,
.ezs-mainhero-menu-link:focus-visible::after,
.ezs-mainhero-menu-link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.ezs-mainhero-menu-link:nth-child(1) { animation-delay: 0.65s; }

.ezs-mainhero-menu-link:nth-child(2) { animation-delay: 0.72s; }

.ezs-mainhero-menu-link:nth-child(3) { animation-delay: 0.79s; }

.ezs-mainhero-menu-link:nth-child(4) { animation-delay: 0.86s; }

.ezs-mainhero-menu-link:nth-child(5) { animation-delay: 0.93s; }

.ezs-mainhero-menu-link:nth-child(6) { animation-delay: 1s; margin-right: 60px;}

.ezs-mainhero-agency-link {
    min-width: 195px;
    background: var(--ezs-mainhero-pink);
    animation-delay: 1.07s;
    transition: background-color 0.3s ease;
}

.ezs-mainhero-agency-link:hover,
.ezs-mainhero-agency-link:focus {
    background: #d63b7a;
}

.ezs-mainhero-menu-button {
    display: none;
}

/* --------------------------------------------------------------------------
   02-2. 애니메이션
   -------------------------------------------------------------------------- */

@keyframes ezs-mainhero-nav-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   02-3. 반응형
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1450px) {
    .ezs-mainhero-menu-link {
            min-width: 105px;
            padding: 0 15px;
            font-size: 16px;
        }

    .ezs-mainhero-agency-link {
            min-width: 170px;
            font-size: 16px;
        }
}

@media only screen and (max-width: 1100px) {
    .ezs-mainhero-nav {
            background: rgba(24, 24, 24, 0.95);
        }

    .ezs-mainhero-logo {
            width: auto;
            min-width: 0;
            padding: 0 22px;
        }

    .ezs-mainhero-logo img {
            width: 105px;
        }

    .ezs-mainhero-menu-button {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 35;
            display: flex;
            width: 78px;
            height: 78px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border: 0;
            background: var(--ezs-mainhero-pink);
            padding: 0;
            cursor: pointer;
        }

    .ezs-mainhero-menu-button span {
            display: block;
            width: 25px;
            height: 2px;
            background: #fff;
            transition:
                transform 0.3s ease,
                opacity 0.3s ease;
        }

    .ezs-mainhero-menu-button.is-active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

    .ezs-mainhero-menu-button.is-active span:nth-child(2) {
            opacity: 0;
        }

    .ezs-mainhero-menu-button.is-active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

    .ezs-mainhero-menu {
            position: fixed;
            top: var(--ezs-mainhero-nav-height);
            right: 0;
            display: flex;
            width: min(360px, 100%);
            height: calc(100vh - var(--ezs-mainhero-nav-height));
            height: calc(100svh - var(--ezs-mainhero-nav-height));
            flex-direction: column;
            justify-content: flex-start;
            overflow-y: auto;
            background: #202020;
            visibility: hidden;
            opacity: 0;
            transform: translateX(100%);
            transition:
                transform 0.45s cubic-bezier(0.77, 0, 0.18, 1),
                opacity 0.3s ease,
                visibility 0.45s;
        }

    .ezs-mainhero-menu.is-open {
            visibility: visible;
            opacity: 1;
            transform: translateX(0);
        }

    .ezs-mainhero-menu-link,
    .ezs-mainhero-agency-link {
            width: 100%;
            min-width: 0;
            height: 70px;
            flex: 0 0 70px;
            justify-content: flex-start;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 0 30px;
            font-size: 16px;
            opacity: 1;
            transform: none;
            animation: none;
        }

    .ezs-mainhero-menu-link::after {
            display: none;
        }

    .ezs-mainhero-agency-link {
            justify-content: center;
        }
}

@media only screen and (max-width: 430px) {
    .ezs-mainhero-logo {
            padding-left: 16px;
        }

    .ezs-mainhero-logo img {
            width: 95px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ezs-mainhero-logo,
    .ezs-mainhero-menu-link,
    .ezs-mainhero-agency-link {
            opacity: 1;
            transform: none;
        }
}

.ezs-mainhero-menu-link.is-active::after { transform: scaleX(1); transform-origin: left center; }
.ezs-mainhero-menu-link.is-active { color: #fff; }

@media only screen and (max-width: 1100px) {
    .ezs-mainhero-menu-link.is-active { background: rgba(255, 255, 255, 0.06); color: var(--ezs-mainhero-cyan); }
}

/* ============================================================================
   03. 메인 히어로
   ============================================================================ */

/* --------------------------------------------------------------------------
   03-1. 기본 스타일
   -------------------------------------------------------------------------- */

.ezs-mainhero {
    --ezs-mainhero-background: #181818;
    --ezs-mainhero-line-color: rgba(255, 255, 255, 0.085);
    --ezs-mainhero-white: #f6f6f6;
    --ezs-mainhero-gray: rgba(255, 255, 255, 0.52);
    --ezs-mainhero-cyan: #09c9d5;
    --ezs-mainhero-pink: #e74b8b;
    --ezs-mainhero-nav-height: 92px;

    position: relative;
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
    background: var(--ezs-mainhero-background);
    color: var(--ezs-mainhero-white);
    font-family: "Paperozi", sans-serif;
}

.ezs-mainhero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    pointer-events: none;
}

.ezs-mainhero-grid-line {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.ezs-mainhero-grid-line::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: var(--ezs-mainhero-line-color);
    content: "";
    transform: scaleY(0);
    transform-origin: top center;
    animation: ezs-mainhero-line-reveal 1.35s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

.ezs-mainhero-grid-line:nth-child(1)::after { animation-delay: 0.05s; }

.ezs-mainhero-grid-line:nth-child(2)::after { animation-delay: 0.15s; }

.ezs-mainhero-grid-line:nth-child(3)::after { animation-delay: 0.25s; }

.ezs-mainhero-grid-line:nth-child(4)::after { animation-delay: 0.35s; }

.ezs-mainhero-grid-line:nth-child(5)::after { animation-delay: 0.45s; }

.ezs-mainhero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    background: transparent;
}

.ezs-mainhero-title {
    position: absolute;
    top: 30.5%;
    left: 7.5%;
    z-index: 10;
}

.ezs-mainhero-title-mask,
.ezs-mainhero-text-mask,
.ezs-mainhero-image-mask {
    overflow: hidden;
}

.ezs-mainhero-title-text {
    color: var(--ezs-mainhero-white);
    font-size: clamp(105px, 9.2vw, 178px);
    font-weight: 800;
    line-height: 0.84;
    white-space: nowrap;
    transform: translateY(115%);
    animation: ezs-mainhero-title-reveal 1.05s cubic-bezier(0.77, 0, 0.18, 1) 0.95s forwards;
}

.ezs-mainhero-image {
    position: absolute;
    z-index: 3;
    overflow: hidden;
}

.ezs-mainhero-image-mask {
    width: 100%;
    height: 100%;
    clip-path: inset(0 100% 0 0);
    animation: ezs-mainhero-image-reveal 1.1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

.ezs-mainhero-image img,
.ezs-mainhero-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ezs-mainhero-image img {
    transform: scale(1.12);
    animation: ezs-mainhero-image-scale 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ezs-mainhero-image-control {
    top: 13.4%;
    left: 45%;
    width: 24.5%;
    height: 29%;
}

.ezs-mainhero-image-control .ezs-mainhero-image-mask,
.ezs-mainhero-image-control img {
    animation-delay: 1.25s;
}

.ezs-mainhero-image-team {
    top: 22.7%;
    right: 11.2%;
    z-index: 5;
    width: 23.4%;
    height: 30%;
}

.ezs-mainhero-image-team .ezs-mainhero-image-mask,
.ezs-mainhero-image-team img {
    animation-delay: 1.48s;
}

.ezs-mainhero-image-code {
    bottom: 22.7%;
    left: 8%;
    width: 23.3%;
    height: 23%;
}

.ezs-mainhero-image-code .ezs-mainhero-image-mask,
.ezs-mainhero-image-code img {
    animation-delay: 1.68s;
}

.ezs-mainhero-text {
    position: absolute;
    top: 59%;
    left: 52.8%;
    z-index: 12;
    width: 40%;
    max-width: 650px;
}

.ezs-mainhero-text-title,
.ezs-mainhero-text-description,
.ezs-mainhero-request-link {
    opacity: 0;
    transform: translateY(40px);
    animation: ezs-mainhero-text-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ezs-mainhero-text-title {
    color: #fff;
    font-size: clamp(23px, 1.55vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.045em;
    animation-delay: 1.85s;
}

.ezs-mainhero-text-description {
    margin-top: 20px !important;
    color: var(--ezs-mainhero-gray);
    font-size: clamp(15px, 0.95vw, 19px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.035em;
    animation-delay: 2s;
}

.ezs-mainhero-request-link {
    position: relative;
    display: inline-flex;
    width: 210px;
    height: 66px;
    align-items: center;
    justify-content: space-between;
    margin-top: 27px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ezs-mainhero-cyan);
    padding: 0 32px 0 38px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    animation-delay: 2.15s;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ezs-mainhero-request-link::before {
    position: absolute;
    inset: 0;
    background: var(--ezs-mainhero-pink);
    content: "";
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.ezs-mainhero-request-link span,
.ezs-mainhero-request-icon {
    position: relative;
    z-index: 1;
}

.ezs-mainhero-request-link:hover,
.ezs-mainhero-request-link:focus {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.ezs-mainhero-request-link:hover::before,
.ezs-mainhero-request-link:focus::before {
    transform: translateX(0);
}

.ezs-mainhero-request-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.ezs-mainhero-request-link:hover .ezs-mainhero-request-icon,
.ezs-mainhero-request-link:focus .ezs-mainhero-request-icon {
    transform: translateX(5px);
}

.ezs-mainhero-scroll {
    position: absolute;
    bottom: 4.8%;
    left: 50%;
    z-index: 15;
    display: flex;
    width: 40px;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateX(-50%);
    animation: ezs-mainhero-scroll-reveal 0.7s ease 2.5s forwards;
}

.ezs-mainhero-scroll span {
    display: block;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(45deg);
    animation: ezs-mainhero-scroll-move 1.8s infinite;
}

.ezs-mainhero-scroll span:nth-child(2) { animation-delay: 0.15s; }

.ezs-mainhero-scroll span:nth-child(3) { animation-delay: 0.3s; }

/* --------------------------------------------------------------------------
   03-2. 애니메이션
   -------------------------------------------------------------------------- */

@keyframes ezs-mainhero-line-reveal {
    to { transform: scaleY(1); }
}

@keyframes ezs-mainhero-title-reveal {
    to { transform: translateY(0); }
}

@keyframes ezs-mainhero-image-reveal {
    to { clip-path: inset(0); }
}

@keyframes ezs-mainhero-image-scale {
    to { transform: scale(1); }
}

@keyframes ezs-mainhero-text-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ezs-mainhero-scroll-reveal {
    to { opacity: 1; }
}

@keyframes ezs-mainhero-scroll-move {
    0% {
        opacity: 0;
        transform: translateY(-8px) rotate(45deg);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(10px) rotate(45deg);
    }
}

/* --------------------------------------------------------------------------
   03-3. 반응형
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1450px) {
    .ezs-mainhero-title {
            top: 31%;
            left: 6%;
        }

    .ezs-mainhero-image-team {
            right: 9%;
        }

    .ezs-mainhero-image-code {
            left: 6%;
        }

    .ezs-mainhero-text {
            left: 52.5%;
        }
}

@media only screen and (max-width: 1100px) {
    .ezs-mainhero {
            --ezs-mainhero-nav-height: 78px;
            min-height: 900px;
        }

    .ezs-mainhero-content {
            min-height: 900px;
        }

    .ezs-mainhero-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

    .ezs-mainhero-grid-line:nth-child(5) {
            display: none;
        }

    .ezs-mainhero-title {
            top: 21%;
            left: 7%;
        }

    .ezs-mainhero-title-text {
            font-size: clamp(80px, 13vw, 130px);
        }

    .ezs-mainhero-image-control {
            top: 34%;
            left: 41%;
            width: 45%;
            height: 25%;
        }

    .ezs-mainhero-image-team {
            top: 52%;
            right: 5%;
            width: 40%;
            height: 22%;
        }

    .ezs-mainhero-image-code {
            bottom: 14%;
            left: 6%;
            width: 40%;
            height: 22%;
        }

    .ezs-mainhero-text {
            top: auto;
            bottom: 12%;
            left: 51%;
            width: 44%;
        }

    .ezs-mainhero-text-title {
            font-size: 23px;
        }

    .ezs-mainhero-text-description {
            font-size: 14px;
        }

    .ezs-mainhero-scroll {
            display: none;
        }
}

@media only screen and (max-width: 767px) {
    .ezs-mainhero {
            --ezs-mainhero-nav-height: 78px;
            width: 100%;
            height: 100vh;
            height: 100svh;
            min-height: 620px;
            padding: 0;
            overflow: hidden;
        }

    .ezs-mainhero-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    .ezs-mainhero-grid-line:nth-child(n + 3) {
            display: none;
        }

    .ezs-mainhero-content {
            position: relative;
            display: block;
            width: 100%;
            height: 100vh;
            height: 100svh;
            min-height: 620px;
            padding:
                calc(var(--ezs-mainhero-nav-height) + 16px)
                16px
                16px;
        }

    .ezs-mainhero-title {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            z-index: 20;
            width: 100%;
            margin: 0 0 -7px;
        }

    .ezs-mainhero-title-text {
            font-size: clamp(42px, 13.8vw, 62px);
            line-height: 0.86;
            letter-spacing: -0.075em;
            white-space: nowrap;
        }

    .ezs-mainhero-image-control {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            left: auto;
            z-index: 3;
            width: 88%;
            height: clamp(210px, 36svh, 310px);
            margin-left: 12%;
            overflow: hidden;
            border-radius: 14px;
        }

    .ezs-mainhero-image-control img,
    .ezs-mainhero-image-control video {
            object-position: center;
        }

    .ezs-mainhero-image-team {
            position: absolute;
            top: 46%;
            right: auto;
            bottom: auto;
            left: 16px;
            z-index: 8;
            width: 42%;
            height: clamp(96px, 16svh, 138px);
            margin: 0;
            overflow: hidden;
            border: 4px solid var(--ezs-mainhero-background);
            border-radius: 12px;
        }

    .ezs-mainhero-image-code {
            position: absolute;
            top: 57%;
            right: 16px;
            bottom: auto;
            left: auto;
            z-index: 8;
            width: 45%;
            height: clamp(92px, 15svh, 132px);
            margin: 0;
            overflow: hidden;
            border: 4px solid var(--ezs-mainhero-background);
            border-radius: 12px;
        }

    .ezs-mainhero-text {
            position: absolute;
            top: auto;
            right: 16px;
            bottom: 18px;
            left: 16px;
            z-index: 12;
            width: auto;
            max-width: none;
            margin: 0;
        }

    .ezs-mainhero-text-title {
            max-width: 320px;
            font-size: clamp(17px, 4.8vw, 21px);
            line-height: 1.3;
            letter-spacing: -0.045em;
            word-break: keep-all;
        }

    .ezs-mainhero-text-description {
            max-width: 330px;
            margin-top: 7px !important;
            font-size: 13px;
            line-height: 1.5;
            word-break: keep-all;
        }

    .ezs-mainhero-text-description br {
            display: none;
        }

    .ezs-mainhero-request-link {
            width: 152px;
            height: 50px;
            margin-top: 10px;
            padding: 0 18px 0 22px;
            font-size: 14px;
        }

    .ezs-mainhero-request-link:hover,
    .ezs-mainhero-request-link:focus {
            transform: none;
        }

    .ezs-mainhero-scroll {
            display: none;
        }
}

@media only screen and (max-width: 430px) {
    .ezs-mainhero-title-text {
            font-size: 42px;
        }

    .ezs-mainhero-text-title {
            font-size: 22px;
        }
}

@media only screen and (max-width: 767px) and (max-height: 720px) {
    .ezs-mainhero {
            min-height: 560px;
        }

    .ezs-mainhero-content {
            min-height: 560px;
            padding-top: calc(var(--ezs-mainhero-nav-height) + 8px);
        }

    .ezs-mainhero-title-text {
            font-size: 38px;
        }

    .ezs-mainhero-image-control {
            height: 31svh;
            min-height: 170px;
        }

    .ezs-mainhero-image-team {
            top: 44%;
            height: 14svh;
            min-height: 82px;
        }

    .ezs-mainhero-image-code {
            top: 54%;
            height: 13svh;
            min-height: 78px;
        }

    .ezs-mainhero-text {
            bottom: 30px;
        }

    .ezs-mainhero-request-link {
            height: 50px;
            margin-top: 8px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ezs-mainhero *,
    .ezs-mainhero *::before,
    .ezs-mainhero *::after {
            animation-duration: 0.01ms !important;
            animation-delay: 0s !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

    .ezs-mainhero-grid-line::after {
            transform: scaleY(1);
        }

    .ezs-mainhero-title-text,
    .ezs-mainhero-text-title,
    .ezs-mainhero-text-description,
    .ezs-mainhero-request-link {
            opacity: 1;
            transform: none;
        }

    .ezs-mainhero-image-mask {
            clip-path: inset(0);
        }

    .ezs-mainhero-image img {
            transform: none;
        }
}


/* ============================================================================
   04. 서비스
   ============================================================================ */

/* --------------------------------------------------------------------------
   04-1. 기본 스타일
   -------------------------------------------------------------------------- */

.ezshs-section,
.ezshs-section *,
.ezshs-section *::before,
.ezshs-section *::after {
    box-sizing: border-box;
}

.ezshs-section {
    --ezshs-bg: #f7fafc;
    --ezshs-white: #ffffff;
    --ezshs-text: #1a1a1a;
    --ezshs-muted: #5f6c7b;
    --ezshs-line: rgba(255, 255, 255, 0.5);
    --ezshs-cyan: #12c5d2;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 120px 28px 100px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    color: var(--ezshs-text);
    font-family: "Paperozi", sans-serif;
}

.ezshs-section .ezshs-inner {
    width: min(100%, 1540px);
    margin: 0 auto;
}

.ezshs-section .ezshs-heading-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 60px;
}

.ezshs-section .ezshs-kicker {
    margin-bottom: 18px;
    color: var(--ezshs-cyan);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
}

.ezshs-section .ezshs-heading {
    color: var(--ezshs-text);
    font-size: clamp(46px, 5vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.065em;
    word-break: keep-all;
}

.ezshs-section .ezshs-intro {
    max-width: 470px;
    margin-bottom: 8px;
    color: var(--ezshs-muted);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -0.035em;
    word-break: keep-all;
    text-align: right;
}

.ezshs-section .ezshs-list {
    display: flex;
    width: 100%;
    height: 570px;
    gap: 14px;
    overflow: hidden;
    background: transparent;
}

.ezshs-section .ezshs-item {
    position: relative;
    flex: 0.72 1 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ezshs-line);
    border-radius: 28px;
    background: #e7edf1;
    cursor: default;
    isolation: isolate;

    transition:
        flex 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.ezshs-section .ezshs-item.ezshs-item-active {
    flex: 2.45 1 0;
}

.ezshs-section .ezshs-item-background {
    position: absolute;
    inset: -2%;
    z-index: 0;
    background-image: var(--ezshs-bg-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: saturate(0.72) brightness(1.12);
    transform: scale(1.15);

    transition:
        transform 1.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.2s ease;
}

.ezshs-section .ezshs-item::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    
    content: "";
    transition:
        background 1.1s ease,
        opacity 1.1s ease;
}

.ezshs-section .ezshs-item::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    
    content: "";
    opacity: 0;
    transition: opacity 0.95s ease;
}

.ezshs-section
.ezshs-item:not(.ezshs-item-active)
.ezshs-item-background {
    filter: saturate(0.66) brightness(1.14);
    transform: scale(1.17);
}

.ezshs-section
.ezshs-item.ezshs-item-active
.ezshs-item-background {
    filter: saturate(0.98) brightness(1.03);
    transform: scale(1.025);
}

.ezshs-section
.ezshs-item.ezshs-item-active::before {
    
}

.ezshs-section
.ezshs-item.ezshs-item-active::after {
    opacity: 1;
}

.ezshs-section .ezshs-item-top {
    position: absolute;
    top: 30px;
    right: 28px;
    left: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    white-space: nowrap;
}

.ezshs-section .ezshs-item-number {
    color: #00d3df;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    
}

.ezshs-section .ezshs-item-category {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.13em;
    text-overflow: ellipsis;
    
}

.ezshs-section .ezshs-item-content {
    position: absolute;
    right: 30px;
    bottom: 32px;
    left: 30px;
    z-index: 3;
}

.ezshs-section .ezshs-item-title {
    width: max-content;
    max-width: 100%;
    color: var(--ezshs-white);
    font-size: clamp(30px, 2.8vw, 54px);
    font-weight: 800;
    line-height: 1.03;
    word-break: keep-all;
    transform: translateY(0);
    transition:
        font-size 0.92s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.98s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.75s ease;
}

.ezshs-section
.ezshs-item:not(.ezshs-item-active)
.ezshs-item-title {
    font-size: clamp(24px, 2vw, 34px);
    transform: translateY(5px);
}

.ezshs-section .ezshs-item-detail {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(34px);
    filter: blur(4px);

    transition:
        max-height 1.08s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.56s ease,
        transform 0.92s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.78s ease,
        visibility 0s linear 0.82s;
}

.ezshs-section
.ezshs-item.ezshs-item-active
.ezshs-item-detail {
    max-height: 430px;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);

    transition:
        max-height 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.84s ease 0.2s,
        transform 1.04s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
        filter 0.92s ease 0.12s,
        visibility 0s;
}

.ezshs-section .ezshs-item-description {
    margin-top: 22px;
    color: rgba(255,255,255,.8);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -0.035em;
    word-break: keep-all;
}

.ezshs-section .ezshs-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.ezshs-section .ezshs-item-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 15px;
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.025em;
    box-shadow: 0 8px 20px rgba(31, 46, 65, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ezshs-section .ezshs-item-info {
    display: grid;
    max-width: 720px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(77, 95, 112, 0.16);
}

.ezshs-section .ezshs-item-info-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 7px 0;
}

.ezshs-section .ezshs-item-info-row strong,
.ezshs-section .ezshs-item-info-row span {
    font-size: 14px;
    line-height: 1.55;
}

.ezshs-section .ezshs-item-info-row strong {
    color: var(--ezshs-white);
    font-weight: 800;
}

.ezshs-section .ezshs-item-info-row span {
    color: rgba(255,255,255,0.8);
}

/* --------------------------------------------------------------------------
   04-3. 반응형
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1280px) {
    .ezshs-section .ezshs-list {
            height: 600px;
        }

    .ezshs-section .ezshs-item {
            flex: 0.8 1 0;
        }

    .ezshs-section
        .ezshs-item.ezshs-item-active {
            flex: 2.2 1 0;
        }

    .ezshs-section .ezshs-item-title {
            font-size: 44px;
        }

    .ezshs-section .ezshs-item-info {
            grid-template-columns: 1fr;
        }

    .ezshs-section
        .ezshs-item-info-row:nth-child(n + 4) {
            display: none;
        }
}

@media only screen and (max-width: 991px) {
    .ezshs-section {
            padding: 92px 20px 80px;
        }

    .ezshs-section .ezshs-heading-wrap {
            grid-template-columns: 1fr;
            gap: 24px;
            margin-bottom: 44px;
        }

    .ezshs-section .ezshs-heading {
            font-size: 52px;
        }

    .ezshs-section .ezshs-intro {
            font-size: 15px;
            text-align: left;
        }

    .ezshs-section .ezshs-list {
            height: 560px;
            gap: 12px;
        }

    .ezshs-section .ezshs-item {
            border-radius: 22px;
        }

    .ezshs-section
        .ezshs-item.ezshs-item-active {
            flex: 2.4 1 0;
        }

    .ezshs-section .ezshs-item-top {
            top: 24px;
            right: 22px;
            left: 22px;
        }

    .ezshs-section .ezshs-item-content {
            right: 22px;
            bottom: 25px;
            left: 22px;
        }

    .ezshs-section .ezshs-item-title {
            font-size: 38px;
        }

    .ezshs-section
        .ezshs-item:not(.ezshs-item-active)
        .ezshs-item-title {
            font-size: 25px;
        }

    .ezshs-section .ezshs-item-description {
            font-size: 14px;
        }

    .ezshs-section .ezshs-item-info {
            display: none;
        }
}

@media only screen and (max-width: 767px) {
    .ezshs-section {
            padding: 72px 16px 64px;
        }

    .ezshs-section .ezshs-heading-wrap {
            margin-bottom: 34px;
        }

    .ezshs-section .ezshs-kicker {
            margin-bottom: 13px;
            font-size: 11px;
        }

    .ezshs-section .ezshs-heading {
            font-size: 38px;
            line-height: 1.12;
        }

    .ezshs-section .ezshs-intro {
            font-size: 14px;
            line-height: 1.7;
            text-align: left;
        }

    .ezshs-section .ezshs-list {
            display: block;
            height: auto;
            overflow: visible;
        }

    .ezshs-section .ezshs-item,
    .ezshs-section
        .ezshs-item.ezshs-item-active {
            min-height: 360px;
            margin-bottom: 14px;
            border-radius: 22px;
        }

    .ezshs-section .ezshs-item-background,
    .ezshs-section
        .ezshs-item.ezshs-item-active
        .ezshs-item-background {
            filter: saturate(0.9) brightness(1.04);
            transform: scale(1.03);
        }

    .ezshs-section .ezshs-item-top {
            top: 23px;
            right: 21px;
            left: 21px;
        }

    .ezshs-section .ezshs-item-content {
            right: 21px;
            bottom: 25px;
            left: 21px;
        }

    .ezshs-section .ezshs-item-title,
    .ezshs-section
        .ezshs-item:not(.ezshs-item-active)
        .ezshs-item-title {
            font-size: 30px;
            transform: none;
        }

    .ezshs-section .ezshs-item-detail,
    .ezshs-section
        .ezshs-item.ezshs-item-active
        .ezshs-item-detail {
            max-height: none;
            visibility: visible;
            opacity: 1;
            transform: none;
            filter: none;
        }

    .ezshs-section .ezshs-item-description {
            margin-top: 18px;
            font-size: 13px;
            line-height: 1.7;
        }

    .ezshs-section .ezshs-item-tags {
            margin-top: 18px;
        }

    .ezshs-section .ezshs-item-info {
            display: none;
        }

    .ezshs-section .ezshs-guide {
            display: none;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ezshs-section *,
    .ezshs-section *::before,
    .ezshs-section *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
}


/* Product */
#portfolio.bg-f5f { padding: 100px 24px; overflow: hidden; background: #f3f5f7; font-family: "Paperozi"; }
#portfolio.bg-f5f * { box-sizing: border-box; }
#portfolio .ezsp-wrap { width: min(100%, 1540px); margin: 0 auto; }
#portfolio .ezsp-header { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: 60px; align-items: end; margin-bottom: 58px; }
#portfolio .ezsp-heading {margin: 0;color: #1a1a1a;font-family: "Paperozi";font-size: clamp(64px, 8vw, 50px); font-weight: 800;line-height: .85;}
#portfolio .ezsp-description { margin: 0 0 5px; color: #68707a; font-size: 16px; line-height: 1.85; letter-spacing: -.035em; word-break: keep-all; }
#portfolio .ezsp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: ezsp-card; }
#portfolio .ezsp-card { position: relative; overflow: hidden; border: 1px solid #e1e5e9; border-radius: 26px; background: #fff; counter-increment: ezsp-card; transition: transform .4s ease, box-shadow .4s ease; }
#portfolio .ezsp-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(20, 30, 45, .13); }
#portfolio .ezsp-link { display: block; color: inherit; text-decoration: none; }
#portfolio .ezsp-image { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #dfe4e8; }
#portfolio .ezsp-image::before { position: absolute; top: 22px; left: 22px; z-index: 2; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; content: counter(ezsp-card, decimal-leading-zero); }
#portfolio .ezsp-image::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 48%, rgba(0, 0, 0, .18)); content: ""; transition: background .4s ease; }
#portfolio .ezsp-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transform: scale(1.01); transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .5s ease; }
#portfolio .ezsp-card:hover .ezsp-image img { filter: grayscale(0); transform: scale(1.08); }
#portfolio .ezsp-more { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #171717; font-size: 29px; font-weight: 300; line-height: 1; transform: rotate(0); transition: transform .4s ease, background .4s ease, color .4s ease; }
#portfolio .ezsp-card:hover .ezsp-more { background: #11c6d3; color: #fff; transform: rotate(90deg); }
#portfolio .ezsp-content { position: relative; padding: 27px 28px 30px; }
#portfolio .ezsp-content h3 {margin: 0;color: #1a1a1a;font-size: 24px;font-weight: 700;line-height: 1.2;letter-spacing: -.045em;font-family: "Paperozi";}
#portfolio .ezsp-content p { margin: 9px 0 0; color: #848b93; font-size: 14px; line-height: 1.5; letter-spacing: -.025em; }
#portfolio .ezsp-content::after { position: absolute; right: 28px; bottom: 31px; color: #b4bbc2; font-size: 19px; content: "↗"; transition: color .3s ease, transform .3s ease; }
#portfolio .ezsp-card:hover .ezsp-content::after { color: #11c6d3; transform: translate(3px, -3px); }

/* 태블릿 */
@media only screen and (max-width: 991px) {
    #portfolio.bg-f5f { padding: 70px 20px; }
    #portfolio .ezsp-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 42px; }
    #portfolio .ezsp-heading { font-size: 60px; }
    #portfolio .ezsp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* 모바일 */
@media only screen and (max-width: 600px) {
    #portfolio.bg-f5f { padding: 50px 16px; }
    #portfolio .ezsp-heading { font-size: 40px; }
    #portfolio .ezsp-description { font-size: 14px; }
    #portfolio .ezsp-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
    #portfolio .ezsp-card { border-radius: 20px; }
    #portfolio .ezsp-content { padding: 15px; }
    #portfolio .ezsp-more{width: 38px; height: 38px; right: 10px; bottom: auto; top: 10px;}
    #portfolio .ezsp-image::before{top: 15px; left: 15px;}
    #portfolio .ezsp-content::after{content: none;}
    #portfolio .ezsp-content h3{font-size: 20px;}
}

/* ========================================================================== */
/* PRODUCT MODAL */
/* ========================================================================== */

[id^="portfolioModal"] { padding: 24px !important; font-family: "Paperozi", sans-serif; }
[id^="portfolioModal"] .modal-dialog { width: calc(100% - 48px); max-width: 1200px; margin: 32px auto; }
[id^="portfolioModal"] .modal-content {min-height: 0 !important;overflow: hidden;border: 0;border-radius: 24px;background: #fff;box-shadow: 0 30px 90px rgba(0, 0, 0, .22);padding: 60px 0;}
[id^="portfolioModal"] .modal-body {width: 100%;max-height: calc(100vh - 20vh);overflow-y: auto;padding: 0px !important;}
[id^="portfolioModal"] .modal-body > .container { width: 100%; max-width: none; margin: 0 auto; padding: 0; }
[id^="portfolioModal"] .modal-body .row { width: 100%; margin-right: 0; margin-left: 0; }
[id^="portfolioModal"] .modal-body [class*="col-"] { width: 100%; max-width: 100%; padding-right: 0; padding-left: 0; }
[id^="portfolioModal"] h2 { margin: 0 0 10px; color: #181818; font-family: "Paperozi", sans-serif; font-size: clamp(36px, 5vw, 54px); font-weight: 700; line-height: 1.1; letter-spacing: -.05em; text-transform: none; }
[id^="portfolioModal"] .item-intro,
[id^="portfolioModal"] .text-muted { margin: 0 0 30px; color: #76808b !important; font-family: "Paperozi", sans-serif !important; font-size: 15px; line-height: 1.7; }
[id^="portfolioModal"] img {display: block;width: 100%;max-width: none;max-height: 360px;margin: 0 auto 30px !important;border-radius: 18px;object-fit: cover;}
[id^="portfolioModal"] p { width: 100%; max-width: 900px; margin: 0 auto 14px; color: #4f5964; font-size: 15px; line-height: 1.8; letter-spacing: -.025em; word-break: keep-all; }
[id^="portfolioModal"] ul.list-inline { width: 100%; max-width: 900px; margin: 25px auto 0; padding: 20px 0 0; border-top: 1px solid #edf0f2; }
[id^="portfolioModal"] .btn { margin-top: 25px; border: 0; border-radius: 999px; background: #12c5d2; padding: 13px 28px; color: #fff; font-size: 14px; font-weight: 700; }
[id^="portfolioModal"] .close-modal { position: absolute; top: 18px; right: 18px; z-index: 10; width: 46px; height: 46px; border-radius: 50%; background: #f2f4f5; opacity: 1; transition: transform .3s ease, background .3s ease; }
[id^="portfolioModal"] .close-modal:hover {background: #333; transform: rotate(90deg); }
[id^="portfolioModal"] .close-modal .lr {left: 22px;height: 22px;margin-top: 12px;margin-left: 23px;background: #222;}
[id^="portfolioModal"] .close-modal .lr .rl { height: 22px; background: #222; }
[id^="portfolioModal"] .close-modal:hover .lr,
[id^="portfolioModal"] .close-modal:hover .lr .rl { background: #fff; }
.modal-backdrop.show,
.modal-backdrop.in { opacity: .62; }

/* ========================================================================== */
/* PRODUCT MODAL — TABLET */
/* ========================================================================== */

@media only screen and (max-width: 991px) {
    [id^="portfolioModal"] { padding: 16px !important; }
    [id^="portfolioModal"] .modal-dialog { width: calc(100% - 32px); margin: 24px auto; }
    [id^="portfolioModal"] .modal-body { max-height: calc(100vh - 48px); padding: 54px 32px 38px !important; }
    [id^="portfolioModal"] img { max-height: 440px; }
}


/* ========================================================================== */
/* PRODUCT MODAL — MOBILE */
/* ========================================================================== */

@media only screen and (max-width: 600px) {
    [id^="portfolioModal"] { padding: 8px !important; }
    [id^="portfolioModal"] .modal-dialog { width: calc(100% - 16px); margin: 12px auto; }
    [id^="portfolioModal"] .modal-content {border-radius: 18px;padding: 20px;}
    [id^="portfolioModal"] .modal-body {max-height: calc(100vh - 20vh);padding: 0px !important;}
    [id^="portfolioModal"] h2 { font-size: 34px; }
    [id^="portfolioModal"] img {max-height: 140px;border-radius: 13px;}
    [id^="portfolioModal"] p { font-size: 14px; }
    [id^="portfolioModal"] .close-modal { top: 12px; right: 12px; width: 40px; height: 40px; }
    [id^="portfolioModal"] .modal-content h2{font-size: 2em;}
    [id^="portfolioModal"] .close-modal .lr {left: 22px;height: 22px;margin-top: 10px;margin-left: 20px;background: #222;}
}


/* ========================================================================== */
/* ABOUT */
/* ========================================================================== */

#about { position: relative; overflow: hidden; padding: 120px 24px 170px; font-family: "Paperozi",sans-serif; }
#about * { box-sizing: border-box; }
#about .container { position: relative; z-index: 1; width: min(100%,1440px); max-width: 1440px; margin: 0 auto; padding: 0; }
#about .text-center { margin: 0 auto; text-align: center !important; }

/* 제목 */
#about .section-heading {margin: 0;color: #171717;font-size: clamp(62px,7vw,60px);font-weight: 900;line-height: .9; text-transform: uppercase;font-family: "Paperozi",sans-serif;}
#about .section-heading::after { display: block; width: 54px; height: 5px; margin: 28px auto 24px; border-radius: 999px; background: #12c5d2; content: ""; }
#about .section-subheading {margin: 0;color: #20252a !important;font-size: clamp(20px,2vw,26px);font-style: normal;font-weight: 700;line-height: 1.45;letter-spacing: -.045em;word-break: keep-all;font-family: "Paperozi",sans-serif;}

/* 회사 소개 */
#about .container > .row.ezs_content:not(:last-child) { display: block !important; width: 100%; margin: 0 !important; }
#about .forH3 {margin: 25px auto 0; color: #6b7680; font-size: 15px; line-height: 1.9; letter-spacing: -.025em; word-break: keep-all; text-align: center; }

/* 프로세스 한 줄 */
#about .container > .row.ezs_content:last-child { position: relative; display: grid !important; width: 100%; grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 12px; margin: 90px 0 0 !important; padding: 0 !important; flex-wrap: nowrap !important; isolation: isolate; counter-reset: about-step; }

/* 검은 연결선 */
#about .container > .row.ezs_content:last-child::before { position: absolute; top: 69px; right: 7%; left: 7%; z-index: 0; display: block !important; height: 3px; border-radius: 999px; background: #111; content: ""; }

/* 각 단계 */
#about .about_process { position: relative; z-index: 1; float: none !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 8px !important; text-align: center; counter-increment: about-step; }
#about .about_process:nth-child(even) { transform: translateY(76px); }

/* 아이콘 원형 */
#about .aboutBox { position: relative; display: block; width: 138px; height: 138px; margin: 0 auto 30px; border: 8px solid #fff; border-radius: 50%; background-color: #e9f9fa; background-image: none !important; box-shadow: 0 20px 50px rgba(31,82,91,.15); transition: transform .4s ease,background-color .4s ease,box-shadow .4s ease; }

/* 스프라이트 아이콘 */
#about .aboutBox::before { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; background-image: url("http://ezsi.kr/img/about_icon.png"); background-repeat: no-repeat; background-size: 240px 600px; content: ""; transform: translate(-50%,-50%); }

/* 아이콘별 위치 */
#about .process1::before { background-position: -120px 0; }
#about .process2::before { background-position: -120px -240px; }
#about .process3::before { background-position: -120px -120px; }
#about .process4::before { background-position: -120px -360px; }
#about .process5::before { background-position: 0 -360px; }
#about .process6::before { background-position: 0 -480px; }

/* 번호 */
#about .aboutBox::after { position: absolute; top: -5px; right: -7px; z-index: 3; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: #111; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; content: "0" counter(about-step); }

/* 단계 문구 */
#about .about_process dl { margin: 0; padding: 0; }
#about .about_process dt { margin: 0; color: #171717; font-size: 17px; font-weight: 900; line-height: 1.2; letter-spacing: -.025em; }
#about .about_process dt::after { display: block; width: 0; height: 0; margin: 18px auto 0; border-top: 5px solid #111; border-right: 5px solid transparent; border-left: 5px solid transparent; content: ""; }
#about .about_process dd { max-width: 220px; margin: 20px auto 0; color: #74808a; font-size: 13px; line-height: 1.7; letter-spacing: -.02em; word-break: keep-all; }

/* 호버 */
#about .about_process:hover .aboutBox { background-color: #d9f6f8; box-shadow: 0 25px 55px rgba(18,197,210,.28);}
#about .about_process:hover dt { color: #0daebb; }

/* ========================================================================== */
/* ABOUT — TABLET */
/* ========================================================================== */

@media only screen and (max-width: 991px) {
    #about { padding: 100px 20px; }
    #about .container > .row.ezs_content:last-child { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 55px 20px; margin-top: 70px !important; }
    #about .container > .row.ezs_content:last-child::before { display: none !important; }
    #about .about_process:nth-child(even) { transform: none; }
}

/* ========================================================================== */
/* ABOUT — MOBILE */
/* ========================================================================== */

@media only screen and (max-width: 600px) {
    #about { padding: 76px 16px; }
    #about .section-heading { font-size: 40px; }
    #about .section-subheading { font-size: 20px; }
    #about .forH3 { font-size: 14px; }
    #about .container > .row.ezs_content:last-child { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 45px 12px; margin-top: 54px !important; }
    #about .about_process { padding: 0 4px !important; }
    #about .aboutBox { width: 110px; height: 110px; border-width: 6px; }
    #about .aboutBox::before { width: 96px; height: 96px; background-size: 192px 480px; }
    #about .process1::before { background-position: -96px 0; }
    #about .process2::before { background-position: -96px -192px; }
    #about .process3::before { background-position: -96px -96px; }
    #about .process4::before { background-position: -96px -288px; }
    #about .process5::before { background-position: 0 -288px; }
    #about .process6::before { background-position: 0 -384px; }
    #about .about_process dt { font-size: 14px; }
    #about .about_process dd { font-size: 12px; }
}



/* ========================================================================== */
/* CLIENT */
/* ========================================================================== */

#client.bg-faded { position: relative; overflow: hidden; padding: 120px 0 130px; background: #f4f7f8; font-family: "Paperozi", sans-serif; }
#client.bg-faded * { box-sizing: border-box; }
#client .container { position: relative; z-index: 1; width: 100%; max-width: none; padding: 0; }
#client .container > .row:first-child { width: min(calc(100% - 40px),1440px); margin: 0 auto 60px; }
#client .text-center { text-align: center !important; }
#client .section-heading {margin: 0; text-transform: uppercase;color: #171717;font-size: clamp(62px, 7vw, 60px);font-weight: 900;line-height: .9; font-family: "Paperozi", sans-serif;}
#client .section-heading::after { display: block; width: 54px; height: 5px; margin: 27px auto 23px; border-radius: 999px; background: #12c5d2; content: ""; }
#client .section-subheading {  font-family: "Paperozi", sans-serif; max-width: 720px; margin: 0 auto; color: #68757f !important; font-size: 17px; font-style: normal; font-weight: 500; line-height: 1.8; letter-spacing: -.035em; word-break: keep-all; }

/* 움직이는 로고 영역 */
#client .client-marquee { display: grid; width: 100%; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
#client .client-lane { width: 100%; overflow: hidden; }
#client .client-track { display: flex; width: max-content; will-change: transform; animation: client-logo-flow 34s linear infinite; }
#client .client-lane:nth-child(2) .client-track { animation-duration: 40s; animation-direction: reverse; }
#client .client-lane:nth-child(3) .client-track { animation-duration: 37s; }
#client .client-group { display: flex; flex-shrink: 0; gap: 16px; padding-right: 16px; }
#client .client-logo-item { flex: 0 0 220px; width: 220px; margin: 0; padding: 0; }
#client .ezs-client { display: flex; width: 100%; height: 112px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e5eaed; border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(25,48,60,.045); transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
#client .ezs-client img { display: block; width: auto; max-width: 100%; height: auto; max-height: 54px; margin: 0 auto; object-fit: contain; filter: grayscale(1); opacity: 1; mix-blend-mode: multiply; transition: transform .35s ease,filter .35s ease,opacity .35s ease; }
#client .client-logo-item:hover .ezs-client img { filter: grayscale(0); opacity: 1; transform: scale(1.06); }

@keyframes client-logo-flow { to { transform: translateX(-50%); } }

/* ========================================================================== */
/* CLIENT — TABLET */
/* ========================================================================== */

@media only screen and (max-width: 991px) {
    #client.bg-faded { padding: 96px 0 105px; }
    #client .container > .row:first-child { margin-bottom: 48px; }
    #client .client-logo-item { flex-basis: 190px; width: 190px; }
    #client .ezs-client { height: 102px; }
}

/* ========================================================================== */
/* CLIENT — MOBILE */
/* ========================================================================== */

@media only screen and (max-width: 600px) {
    #client.bg-faded { padding: 74px 0 82px; }
    #client .container > .row:first-child { width: calc(100% - 32px); margin-bottom: 40px; }
    #client .section-heading { font-size: 40px; }
    #client .section-subheading { font-size: 14px; }
    #client .client-marquee { gap: 12px; -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }
    #client .client-group { gap: 12px; padding-right: 12px; }
    #client .client-logo-item { flex-basis: 160px; width: 160px; }
    #client .ezs-client { height: 88px; border-radius: 13px; }
    #client .ezs-client img { max-width: 100%; max-height: 43px; }
}

/* 움직임 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
    #client .client-lane { overflow-x: auto; }
    #client .client-track { animation: none !important; transform: none !important; }
    #client .client-group[aria-hidden="true"] { display: none; }
}



/* ========================================================================== */
/* REQUEST */
/* ========================================================================== */

#request { position: relative; overflow: hidden; padding: 120px 24px 130px; font-family: "Paperozi",sans-serif; }
#request * { box-sizing: border-box; }
#request .container { position: relative; z-index: 1; width: min(100%,1280px); max-width: 1280px; margin: 0 auto; padding: 0; }
#request > .container > .row { margin-right: 0; margin-left: 0; }
#request > .container > .row:first-child { margin-bottom: 60px; }
#request > .container > .row > .col-lg-12 { padding-right: 0; padding-left: 0; }

/* 제목 */
#request .section-heading {margin: 0; text-transform: uppercase; color: #171717; font-size: clamp(62px, 7vw, 60px); font-weight: 900; line-height: .9; font-family: "Paperozi", sans-serif;}
#request .section-heading::after { display: block; width: 54px; height: 5px; margin: 28px auto 24px; border-radius: 999px; background: #12c5d2; content: ""; }
#request .section-subheading {max-width: 720px;margin: 0 auto;color: #67747e !important;font-size: 18px;font-style: normal;font-weight: 500;line-height: 1.75;letter-spacing: -.035em;word-break: keep-all;font-family: "Paperozi", sans-serif;}

/* 폼 전체 */
#request form { margin: 0; overflow: hidden; border: 1px solid #e1eaed; border-radius: 24px; background: #fff; box-shadow: 0 25px 70px rgba(33,78,88,.1); }
#request form > .row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
#request form > .row > .col-md-6 { float: none !important; width: auto !important; max-width: none !important; min-width: 0; padding: 30px; }
#request form > .row > .col-md-6 + .col-md-6 { border-left: 1px solid #e5ecef; background: #fbfdfd; }
#request form > .row > .clearfix { display: none; }
#request form > .row > .col-lg-12 { grid-column: 1 / -1; float: none !important; width: auto !important; max-width: none !important; padding: 20px 30px 35px; border-top: 1px solid #e5ecef; background: #fff; }

/* 영역 제목 */
#request .service-heading {position: relative;margin: 0 0 30px;padding: 0 0 18px 18px;color: #171717;font-size: 22px;font-weight: 800;line-height: 1.3;letter-spacing: -.04em;font-family: "Paperozi", sans-serif;}
#request .service-heading::before { position: absolute; top: 3px; bottom: 20px; left: 0; width: 4px; border-radius: 999px; background: #12c5d2; content: ""; }
#request .service-heading::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #e5ecef; content: ""; }

/* 입력 영역 */
#request .form-group { position: relative; margin: 0 0 16px; }
#request .form-control { display: block; width: 100%; height: 58px; border: 1px solid #dce5e9; border-radius: 10px; padding: 0 18px; background: #fff; color: #20272c; font-family: "Paperozi",sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.025em; box-shadow: none; outline: none; transition: border-color .25s ease,box-shadow .25s ease,background-color .25s ease; }
#request textarea.form-control { height: 206px; min-height: 206px; padding-top: 18px; padding-bottom: 18px; line-height: 1.75; resize: vertical; }
#request .form-control::placeholder { color: #9aa4ab; font-family: "Paperozi", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: -.025em; opacity: 1; }
#request .form-control:hover { border-color: #b9c8ce; }
#request .form-control:focus { border-color: #12c5d2; background: #fff; box-shadow: 0 0 0 4px rgba(18,197,210,.1); }
#request .help-block { min-height: 0; margin: 6px 0 0; color: #d9534f; font-size: 12px; line-height: 1.5; }

/* 전송 결과 */
#request #success { margin: 0 0 14px; color: #52616a; font-size: 14px; line-height: 1.7; }

/* 버튼 */
#request .SubmitBtn { position: relative; display: inline-flex; min-width: 230px; height: 60px; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0 34px; background: #12c5d2; font-family: "Paperozi",sans-serif; font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: -.03em; box-shadow: 0 14px 32px rgba(18,197,210,.25); cursor: pointer; transition: transform .3s ease,background-color .3s ease,box-shadow .3s ease; }
#request .SubmitBtn::after { display: inline-block; width: 8px; height: 8px; margin-left: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; transform: rotate(45deg); }
#request .SubmitBtn:hover { background: #35d1dc; box-shadow: 0 18px 38px rgba(18,197,210,.32); transform: translateY(-3px); }
#request .SubmitBtn:focus { outline: none; box-shadow: 0 0 0 4px rgba(18,197,210,.14),0 18px 38px rgba(18,197,210,.28); }
#request .SubmitBtn:active { transform: translateY(-1px); }

/* ========================================================================== */
/* REQUEST — TABLET */
/* ========================================================================== */

@media only screen and (max-width: 900px) {
    #request { padding: 100px 20px; }
    #request form > .row { grid-template-columns: 1fr; }
    #request form > .row > .col-md-6 { padding: 38px 34px 34px; }
    #request form > .row > .col-md-6 + .col-md-6 { border-top: 1px solid #e5ecef; border-left: 0; }
    #request form > .row > .col-lg-12 { padding: 28px 34px 36px; }
}

/* ========================================================================== */
/* REQUEST — MOBILE */
/* ========================================================================== */

@media only screen and (max-width: 600px) {
    #request { padding: 76px 16px 84px; }
    #request > .container > .row:first-child { margin-bottom: 42px; }
    #request .section-heading { font-size: 40px; }
    #request .section-subheading { font-size: 15px; }
    #request form { border-radius: 18px; }
    #request form > .row > .col-md-6 { padding: 28px 20px 24px; }
    #request form > .row > .col-lg-12 { padding: 24px 20px 28px; }
    #request .service-heading { margin-bottom: 22px; font-size: 19px; }
    #request .form-control { height: 54px; padding: 0 15px; font-size: 13px; }
    #request textarea.form-control { height: 170px; min-height: 170px; padding-top: 15px; }
    #request .SubmitBtn { width: 100%; min-width: 0; height: 58px; font-size: 15px; }
}


/* ========================================================================== */
/* CONTACT */
/* ========================================================================== */
#contact{font-family: "Paperozi", sans-serif;}
#contact h3.section-subheading{color: #fff!important; font-family: "Paperozi", sans-serif;}
#contact .contact_infoBox .infoBox{height: auto; border-radius: 10px;  overflow: hidden;}
#contact .section-heading{ font-family: "Paperozi", sans-serif;}

@media only screen and (max-width: 600px) {
    #contact h3.section-subheading{margin-bottom: 0;}
}

/* ========================================================================== */
/* footer */
/* ========================================================================== */
footer{background: #1a1a1a!important;  font-family: "Paperozi", sans-serif;}




/* 스크롤시 등장 액션*/
/* ========================================================================== */
/* SCROLL REVEAL */
/* ========================================================================== */

html.motion-ready .scroll-motion { --motion-x: 0px; --motion-y: 42px; opacity: 0; translate: var(--motion-x) var(--motion-y); }
html.motion-ready .scroll-motion.motion-left { --motion-x: -48px; --motion-y: 0px; }
html.motion-ready .scroll-motion.motion-right { --motion-x: 48px; --motion-y: 0px; }
html.motion-ready .scroll-motion.motion-small { --motion-x: 0px; --motion-y: 24px; }
html.motion-ready .scroll-motion.is-visible { animation: scroll-motion-show .9s cubic-bezier(.22,1,.36,1) var(--motion-delay,0ms) both; }

@keyframes scroll-motion-show {
    from { opacity: 0; translate: var(--motion-x) var(--motion-y); }
    to { opacity: 1; translate: 0 0; }
}

/* ABOUT 연결선 등장 */
html.motion-ready #about .ezs_content.motion-line::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.15s cubic-bezier(.22,1,.36,1) .15s; }
html.motion-ready #about .ezs_content.motion-line.is-visible::before { transform: scaleX(1); }

/* CLIENT는 화면에 보일 때부터 움직임 시작 */
html.motion-ready #client .client-marquee.scroll-motion:not(.is-visible) .client-track { animation-play-state: paused; }

/* 모바일은 이동 거리를 조금 줄임 */
@media only screen and (max-width: 600px) {
    html.motion-ready .scroll-motion { --motion-y: 28px; }
    html.motion-ready .scroll-motion.motion-left { --motion-x: -26px; }
    html.motion-ready .scroll-motion.motion-right { --motion-x: 26px; }
}

/* 움직임 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
    html.motion-ready .scroll-motion { opacity: 1 !important; translate: 0 0 !important; animation: none !important; }
    html.motion-ready #about .ezs_content.motion-line::before { transform: scaleX(1) !important; transition: none !important; }
}