/*****************/
/* =========================================================
   ALF COMPANY PROFILE
   Black : #000000
   Point : #593591
   Sub   : #E3DD8B
========================================================= */

.alf-profile {
    --alf-black: #000000;
    --alf-purple: #593591;
    --alf-yellow: #E3DD8B;
    --alf-white: #ffffff;
    --alf-gray: #858585;
    --alf-dark-gray: #4b4b4b;

    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: var(--alf-black);
    color: var(--alf-white);
}


/* =========================================================
   BACKGROUND
========================================================= */

.alf-profile::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(89,53,145,.12),
            transparent 30%
        );
    pointer-events: none;
}

.alf-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.alf-circle01 {
    width: 700px;
    height: 700px;
    right: -300px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(89,53,145,.18);
}

.alf-circle02 {
    width: 480px;
    height: 480px;
    right: -190px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(227,221,139,.08);
}

.alf-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(89,53,145,.08);
    filter: blur(80px);
    pointer-events: none;
}


/* =========================================================
   INNER
========================================================= */

.alf-profile-inner {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 1fr 1fr;

    width: min(1500px, calc(100% - 120px));
    min-height: 100vh;

    margin: 0 auto;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.alf-content {
    position: relative;
    padding: 90px 100px 80px 0;
}


/* 상단 */

.alf-content-top {
    padding-bottom: 60px;
}

.alf-eyebrow {
    display: block;

    margin-bottom: 35px;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;

    color: #ffffff;
}

.alf-content-top h1 {
    margin: 0;

    font-size: clamp(55px, 5vw, 82px);
    line-height: .95;

    font-weight: 300;
    letter-spacing: -4px;
}

.alf-content-top h1 strong {
    font-weight: 800;
    color: var(--alf-purple);
}

.alf-intro {
    margin: 35px 0 0;

    font-size: 16px;
    line-height: 1.9;

    color: #969696;
}

.alf-line {
    width: 80px;
    height: 2px;

    margin-top: 35px;

    background:
        linear-gradient(
            90deg,
            var(--alf-purple),
            var(--alf-yellow)
        );
}


/* =========================================================
   MENU
========================================================= */

.alf-menu {
    display: flex;
    flex-direction: column;
}

.alf-menu-item {
    position: relative;

    display: grid;
    grid-template-columns: 50px 1px 1fr;

    gap: 20px;

    min-height: 102px;

    transition:
        transform .45s ease,
        opacity .45s ease;
}

.alf-menu-item:hover {
    transform: translateX(8px);
}


/* NUMBER */

.alf-number {
    padding-top: 2px;

    font-size: 15px;
    font-weight: 400;

    color: #ffffff;

    transition:
        color .35s ease,
        transform .35s ease;
}

.alf-menu-item:hover .alf-number {
    color: var(--alf-yellow);
    transform: scale(1.08);
}


/* LINE */

.alf-menu-line {
    position: relative;

    width: 1px;

    background: #292929;
}

.alf-menu-line::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 4px;

    width: 8px;
    height: 8px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #ffffff;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.alf-menu-item:hover .alf-menu-line::before {
    background: var(--alf-yellow);

    box-shadow:
        0 0 0 5px rgba(227,221,139,.08),
        0 0 18px rgba(227,221,139,.35);

    transform: translateX(-50%) scale(1.15);
}


/* CONTENT */

.alf-menu-content {
    padding-bottom: 30px;
}

.alf-menu-content h2 {
    margin: 0;

    font-size: 24px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.7px;

    transition:
        color .35s ease,
        letter-spacing .35s ease;
}

.alf-menu-item:hover .alf-menu-content h2 {
    color: var(--alf-yellow);
    letter-spacing: -.3px;
}

.alf-menu-content p {
    margin: 10px 0 0;

    font-size: 13px;
    line-height: 1.7;

    color: #ffff;

    transition: color .35s ease;
}

.alf-menu-item:hover .alf-menu-content p {
    color: #a5a5a5;
}

.alf-menu-content small {
    display: block;

    margin-top: 2px;

    font-size: 11px;
    line-height: 1.6;

    color: #555555;
}


/* =========================================================
   BOTTOM COPY
========================================================= */

.alf-bottom-copy {
    margin-top: 25px;
}

.alf-bottom-copy span {
    font-size: 13px;
    font-weight: 600;

    color: #ffffff;
}


/* =========================================================
   RIGHT LOGO AREA
========================================================= */

.alf-logo-area {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;

    border-left: 1px solid #292929;
}


/* LOGO */

.alf-logo-wrap {
    position: relative;
    z-index: 5;

    width: 80%;

    text-align: center;
}

.alf-logo-label {
    display: block;

    margin-bottom: 40px;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 3px;

    color: #707070;
}


/* LOGO BOX */

.alf-logo-box {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 330px;
    height: 330px;

    margin: 0 auto;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(89,53,145,.13),
            rgba(0,0,0,0) 68%
        );
}

.alf-logo-box::before {
    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid rgba(89,53,145,.35);

    border-radius: 50%;

    animation: alfRotate 18s linear infinite;
}

.alf-logo-box::after {
    content: "";

    position: absolute;

    inset: 25px;

    border: 1px solid rgba(227,221,139,.15);

    border-radius: 50%;

    animation: alfRotateReverse 14s linear infinite;
}

.alf-logo-box img {
    position: relative;
    z-index: 3;

    display: block;

    width: 210px;
    height: auto;

    object-fit: contain;
}


/* LOGO DESCRIPTION */

.alf-logo-description {
    margin-top: 40px;
}

.alf-logo-description span {
    display: block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;

    color: var(--alf-yellow);
}

.alf-logo-description p {
    margin: 14px 0 0;

    font-family: Georgia, serif;

    font-size: 17px;
    line-height: 1.7;

    color: #ffff;
}


/* =========================================================
   RIGHT CIRCLE
========================================================= */

.alf-right-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.alf-right-circle.circle01 {
    width: 530px;
    height: 530px;

    border: 1px solid rgba(89,53,145,.14);
}

.alf-right-circle.circle02 {
    width: 400px;
    height: 400px;

    border: 1px solid rgba(227,221,139,.08);
}


/* =========================================================
   DIVIDER DOTS
========================================================= */

.alf-divider {
    position: absolute;

    z-index: 10;

    left: 50%;
    top: 0;

    width: 1px;
    height: 100%;

    transform: translateX(-50%);

    pointer-events: none;
}

.divider-dot {
    position: absolute;

    left: 50%;

    width: 10px;
    height: 10px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 5px rgba(255,255,255,.03);

    animation: alfDotPulse 3s ease-in-out infinite;
}

.dot01 {
    top: 11%;
}

.dot02 {
    top: 26%;
}

.dot03 {
    top: 41%;
}

.dot04 {
    top: 56%;
}

.dot05 {
    top: 71%;
}

.dot06 {
    top: 86%;
}


/* =========================================================
   REVEAL
========================================================= */

.alf-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);
}

.alf-reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes alfRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes alfRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes alfDotPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(255,255,255,.03);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(89,53,145,.12),
            0 0 15px rgba(89,53,145,.25);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .alf-profile-inner {
        width: calc(100% - 70px);
    }

    .alf-content {
        padding-right: 60px;
    }

    .alf-content-top h1 {
        font-size: 60px;
    }

    .alf-menu-content h2 {
        font-size: 20px;
    }

    .alf-menu-content p {
        font-size: 12px;
    }

    .alf-logo-box {
        width: 270px;
        height: 270px;
    }

    .alf-logo-box img {
        width: 175px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alf-profile {
        min-height: auto;
    }


    /* 전체 */

    .alf-profile-inner {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-height: auto;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .alf-logo-area {
        order: 1;

        min-height: 480px;

        padding: 80px 20px;

        border-left: 0;
        border-bottom: 1px solid #242424;
    }

    .alf-logo-wrap {
        width: 100%;
    }

    .alf-logo-label {
        margin-bottom: 25px;

        font-size: 8px;
        letter-spacing: 2px;
    }

    .alf-logo-box {
        width: 230px;
        height: 230px;
    }

    .alf-logo-box::after {
        inset: 18px;
    }

    .alf-logo-box img {
        width: 145px;
    }

    .alf-logo-description {
        margin-top: 25px;
    }

    .alf-logo-description span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .alf-logo-description p {
        margin-top: 10px;
        font-size: 14px;
    }


    /* =====================================================
       CONTENT
    ===================================================== */

    .alf-content {
        order: 2;

        padding: 75px 25px 70px;
    }

    .alf-content-top {
        padding-bottom: 55px;
    }

    .alf-eyebrow {
        margin-bottom: 25px;

        font-size: 9px;
        letter-spacing: 2px;
    }

    .alf-content-top h1 {
        font-size: 45px;
        line-height: .98;
        letter-spacing: -2px;
    }

    .alf-intro {
        margin-top: 25px;

        font-size: 13px;
        line-height: 1.8;
    }

    .alf-line {
        width: 55px;
        margin-top: 25px;
    }


    /* =====================================================
       MENU
    ===================================================== */

    .alf-menu-item {
        grid-template-columns: 35px 1px 1fr;

        gap: 13px;

        min-height: 95px;
    }

    .alf-number {
        font-size: 12px;
    }

    .alf-menu-content {
        padding-bottom: 25px;
    }

    .alf-menu-content h2 {
        font-size: 18px;
        line-height: 1.25;
        letter-spacing: -.5px;
    }

    .alf-menu-content p {
        margin-top: 8px;

        font-size: 11px;
        line-height: 1.6;
    }

    .alf-menu-content small {
        font-size: 9px;
    }

    .alf-menu-item:hover {
        transform: translateX(0);
    }


    /* =====================================================
       BOTTOM
    ===================================================== */

    .alf-bottom-copy {
        margin-top: 20px;
    }

    .alf-bottom-copy span {
        font-size: 11px;
    }


    /* =====================================================
       DIVIDER
    ===================================================== */

    .alf-divider {
        display: none;
    }


    /* =====================================================
       BACKGROUND
    ===================================================== */

    .alf-circle01 {
        width: 450px;
        height: 450px;

        right: -300px;
        top: 10px;

        transform: none;
    }

    .alf-circle02 {
        width: 300px;
        height: 300px;

        right: -200px;
        top: 80px;

        transform: none;
    }

    .alf-glow {
        width: 250px;
        height: 250px;

        right: -100px;
        top: 150px;

        transform: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alf-logo-area {
        min-height: 430px;
        padding: 65px 15px;
    }

    .alf-logo-box {
        width: 200px;
        height: 200px;
    }

    .alf-logo-box img {
        width: 125px;
    }

    .alf-content {
        padding: 65px 20px;
    }

    .alf-content-top h1 {
        font-size: 40px;
    }

    .alf-menu-item {
        grid-template-columns: 30px 1px 1fr;
        gap: 10px;
    }

    .alf-menu-content h2 {
        font-size: 16px;
    }

}

/* =========================================================
   ALOF BRAND STORY
========================================================= */

.alof-brand-story {
    position: relative;
    width: 100%;
    min-height: 760px;

    overflow: hidden;

    background: #000000;
    color: #ffffff;
}


/* =========================================================
   TOP HEADER
========================================================= */

.alof-story-header {
    position: absolute;
    z-index: 20;

    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    width: 100%;
    height: 45px;

    padding: 0 7%;

    box-sizing: border-box;
}

.alof-story-header-left {
    flex-shrink: 0;

    font-size: 14px;
    font-weight: 400;

    color: #ffffff;
}

.alof-story-header-line {
    flex: 1;

    height: 1px;

    margin: 0 15px;

    background: #414141;
}

.alof-story-header-right {
    flex-shrink: 0;

    font-size: 14px;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   CENTER VERTICAL LINE
========================================================= */

.alof-story-line {
    position: absolute;
    z-index: 5;

    left: 31.8%;
    top: 0;
    bottom: 0;

    width: 1px;

    background: #414141;
}


/* =========================================================
   WHITE DOT
========================================================= */

.alof-story-dot {
    position: absolute;

    left: 50%;
    top: 36%;

    width: 15px;
    height: 15px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 7px rgba(89,53,145,.12),
        0 0 20px rgba(89,53,145,.3);

    animation:
        alof-dot-pulse 3s ease-in-out infinite;
}


/* =========================================================
   CONTENT AREA
========================================================= */

.alof-story-inner {
    position: relative;
    z-index: 10;

    width: 100%;
    min-height: 760px;
}


/* =========================================================
   BRAND STORY CONTENT
========================================================= */

.alof-story-content {
    position: absolute;

    left: calc(31.8% + 57px);
    top: 36%;

    width: 700px;

    transform: translateY(-50%);

    /*
     * 중요
     * opacity를 0으로 하지 않습니다.
     * 기존 JS 충돌을 방지합니다.
     */

    opacity: 1;

    animation:
        alof-story-show 1.1s
        cubic-bezier(.22,.61,.36,1)
        both;
}


/* =========================================================
   BRAND STORY LABEL
========================================================= */

.alof-story-label {
    margin-bottom: 40px;

    font-size: 21px;
    font-weight: 400;

    letter-spacing: -.5px;

    color: #9B7BC4;
}


/* =========================================================
   PURPLE BAR
========================================================= */

.alof-story-accent {
    width: 22px;
    height: 5px;

    margin-bottom: 42px;

    background: #593591;

    animation:
        alof-accent-show 1.4s
        ease-out .3s
        both;
}


/* =========================================================
   TITLE
========================================================= */

.alof-story-content h2 {
    margin: 0;

    font-size: 34px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -1.5px;

    color: #ffffff;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.alof-story-content p {
    margin: 22px 0 0;

    font-size: 14px;
    line-height: 2;

    font-weight: 300;

    letter-spacing: -.3px;

    color: #fff;
}


/* =========================================================
   RIGHT CIRCLES
========================================================= */

.alof-story-circle {
    position: absolute;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;
}

.alof-story-circle.circle01 {
    width: 500px;
    height: 500px;

    right: -250px;
    top: 58%;

    transform: translateY(-50%);

    border: 1px solid rgba(89,53,145,.16);

    animation:
        alof-circle-show 1.8s ease-out both;
}

.alof-story-circle.circle02 {
    width: 330px;
    height: 330px;

    right: -165px;
    top: 58%;

    transform: translateY(-50%);

    border: 1px solid rgba(227,221,139,.10);

    animation:
        alof-circle-show 2s ease-out .15s both;
}


/* =========================================================
   CONTENT SHOW ANIMATION
========================================================= */

@keyframes alof-story-show {

    0% {
        opacity: 0;

        transform:
            translateY(calc(-50% + 45px));
    }

    100% {
        opacity: 1;

        transform:
            translateY(-50%);
    }

}


/* =========================================================
   ACCENT ANIMATION
========================================================= */

@keyframes alof-accent-show {

    0% {
        opacity: 0;
        width: 0;
    }

    100% {
        opacity: 1;
        width: 22px;
    }

}


/* =========================================================
   CIRCLE ANIMATION
========================================================= */

@keyframes alof-circle-show {

    0% {
        opacity: 0;
        transform:
            translateY(-50%)
            scale(.85);
    }

    100% {
        opacity: 1;
        transform:
            translateY(-50%)
            scale(1);
    }

}


/* =========================================================
   DOT ANIMATION
========================================================= */

@keyframes alof-dot-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(89,53,145,.08),
            0 0 10px rgba(89,53,145,.1);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(89,53,145,.14),
            0 0 22px rgba(89,53,145,.35);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-brand-story {
        min-height: 680px;
    }


    /* HEADER */

    .alof-story-header {
        height: 45px;

        padding: 0 15px;
    }

    .alof-story-header-left {
        font-size: 10px;
    }

    .alof-story-header-right {
        font-size: 10px;
    }

    .alof-story-header-line {
        margin: 0 10px;
    }


    /* VERTICAL LINE */

    .alof-story-line {
        left: 25px;

        top: 45px;
        bottom: 0;
    }


    /* DOT */

    .alof-story-dot {
        top: 35%;

        width: 12px;
        height: 12px;
    }


    /* CONTENT */

    .alof-story-inner {
        min-height: 680px;
    }

    .alof-story-content {
        left: 65px;
        right: 25px;

        top: 35%;

        width: auto;
    }


    /* LABEL */

    .alof-story-label {
        margin-bottom: 27px;

        font-size: 17px;
    }


    /* BAR */

    .alof-story-accent {
        width: 18px;
        height: 4px;

        margin-bottom: 28px;
    }


    /* TITLE */

    .alof-story-content h2 {
        font-size: 25px;

        line-height: 1.4;

        letter-spacing: -1px;
    }


    /* DESCRIPTION */

    .alof-story-content p {
        margin-top: 17px;

        font-size: 12px;

        line-height: 1.9;

        word-break: keep-all;
    }


    /* CIRCLE */

    .alof-story-circle.circle01 {
        width: 350px;
        height: 350px;

        right: -270px;

        top: 55%;
    }

    .alof-story-circle.circle02 {
        width: 240px;
        height: 240px;

        right: -215px;

        top: 55%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-story-header {
        padding: 0 12px;
    }

    .alof-story-header-left,
    .alof-story-header-right {
        font-size: 9px;
    }

    .alof-story-line {
        left: 20px;
    }

    .alof-story-content {
        left: 52px;
        right: 18px;
    }

    .alof-story-label {
        font-size: 15px;
    }

    .alof-story-content h2 {
        font-size: 22px;
    }

    .alof-story-content p {
        font-size: 11px;
    }

}



/*****사업영역****/
/* =========================================================
   ALOF BUSINESS OVERVIEW
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-business {
    --alof-black: #000000;
    --alof-purple: #593591;
    --alof-yellow: #E3DD8B;
    --alof-white: #ffffff;
    --alof-gray: #ffff;
    --alof-line: #3b3b3b;

    position: relative;

    width: 100%;
    min-height: 760px;

    overflow: hidden;

    background: #000000;
    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.alof-business-header {
    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    width: 100%;
    height: 45px;

    padding: 0 7%;

    box-sizing: border-box;
}

.alof-business-company {
    flex-shrink: 0;

    font-size: 14px;
    font-weight: 400;

    color: #ffffff;
}

.alof-business-current {
    flex-shrink: 0;

    margin-left: 14px;

    font-size: 13px;

    color: #ffff;
}

.alof-business-header-line {
    flex: 1;

    height: 1px;

    margin: 0 15px;

    background: #414141;
}

.alof-business-logo {
    flex-shrink: 0;

    font-size: 14px;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.alof-business-inner {
    position: relative;
    z-index: 5;

    width: min(1300px, calc(100% - 100px));

    min-height: 760px;

    margin: 0 auto;

    padding-top: 100px;

    box-sizing: border-box;
}


/* =========================================================
   TITLE
========================================================= */

.alof-business-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 125px;
}

.alof-business-title-wrap h1 {
    margin: 0;

    font-size: clamp(42px, 4vw, 52px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: #9B79C3;
}

.alof-business-title-wrap p {
    flex: 1;

    margin: 0;

    font-size: 14px;

    line-height: 1.9;

    font-weight: 300;

    color: #dddddd;

    text-align: right;

    letter-spacing: -.4px;
}


/* =========================================================
   GRID
========================================================= */

.alof-business-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 55px;
}


/* =========================================================
   CARD
========================================================= */

.alof-business-card {
    position: relative;

    text-align: center;

    min-width: 0;

    transition:
        transform .45s ease;
}

.alof-business-card:hover {
    transform: translateY(-12px);
}


/* =========================================================
   ICON
========================================================= */

.alof-business-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 258px;
    height: 258px;

    max-width: 100%;

    margin: 0 auto;

    border: 1px solid #555555;

    border-radius: 50%;

    box-sizing: border-box;

    transition:
        border-color .45s ease,
        background .45s ease,
        transform .45s ease,
        box-shadow .45s ease;
}

.alof-business-icon::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid transparent;

    transition:
        border-color .45s ease,
        transform .45s ease;
}

.alof-business-card:hover .alof-business-icon {
    border-color: var(--alof-purple);

    background: rgba(89,53,145,.05);

    box-shadow:
        0 0 35px rgba(89,53,145,.13);

    transform: scale(1.025);
}

.alof-business-card:hover .alof-business-icon::before {
    border-color: rgba(227,221,139,.2);

    transform: rotate(12deg);
}


/* SVG */

.alof-business-icon svg {
    width: 145px;
    height: 145px;

    overflow: visible;
}


/* SVG LINE */

.alof-business-icon .icon-line {
    fill: none;

    stroke: #ffffff;

    stroke-width: 3.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}


/* SVG FILL */

.alof-business-icon .icon-fill {
    fill: #ffffff;
}


/* 흰색 아이콘 원 */

.alof-business-icon.icon-white {
    background: #ffffff;

    border-color: #ffffff;
}

.alof-business-icon.icon-white .icon-line {
    stroke: #000000;
}

.alof-business-icon.icon-white .icon-fill {
    fill: #000000;
}

.alof-business-card:hover .alof-business-icon.icon-white {
    background: var(--alof-yellow);

    border-color: var(--alof-yellow);

    box-shadow:
        0 0 35px rgba(227,221,139,.13);
}


/* =========================================================
   CARD TEXT
========================================================= */

.alof-business-card-text {
    margin-top: 42px;
}

.alof-business-card-text h2 {
    margin: 0;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -1px;

    color: #9B79C3;

    transition:
        color .35s ease;
}

.alof-business-card:hover .alof-business-card-text h2 {
    color: var(--alof-yellow);
}

.alof-business-card-text p {
    min-height: 80px;

    margin: 16px 0 0;

    font-size: 12px;

    line-height: 2;

    font-weight: 300;

    color: #ffff;

    word-break: keep-all;
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.alof-business-bottom-line {
    position: absolute;

    left: 7%;
    right: 7%;
    bottom: 25px;

    height: 1px;

    background: #222222;
}


/* =========================================================
   REVEAL
========================================================= */

.alof-business-reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);
}

.alof-business-reveal.active {
    opacity: 1;

    transform: translateY(0);
}


/* 순차 딜레이 */

.alof-business-card:nth-child(1) {
    transition-delay: .05s;
}

.alof-business-card:nth-child(2) {
    transition-delay: .18s;
}

.alof-business-card:nth-child(3) {
    transition-delay: .31s;
}

.alof-business-card:nth-child(4) {
    transition-delay: .44s;
}


/* =========================================================
   ICON FLOAT ANIMATION
========================================================= */

.alof-business-card:nth-child(1) .alof-business-icon {
    animation: alofIconFloat 5s ease-in-out infinite;
}

.alof-business-card:nth-child(2) .alof-business-icon {
    animation:
        alofIconFloat 5s ease-in-out .7s infinite;
}

.alof-business-card:nth-child(3) .alof-business-icon {
    animation:
        alofIconFloat 5s ease-in-out 1.2s infinite;
}

.alof-business-card:nth-child(4) .alof-business-icon {
    animation:
        alofIconFloat 5s ease-in-out 1.7s infinite;
}

@keyframes alofIconFloat {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -7px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .alof-business-inner {
        width: calc(100% - 70px);
    }

    .alof-business-grid {
        gap: 25px;
    }

    .alof-business-icon {
        width: 210px;
        height: 210px;
    }

    .alof-business-icon svg {
        width: 120px;
        height: 120px;
    }

    .alof-business-title-wrap {
        margin-bottom: 100px;
    }

    .alof-business-card-text {
        margin-top: 32px;
    }

    .alof-business-card-text h2 {
        font-size: 18px;
    }

    .alof-business-card-text p {
        font-size: 11px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-business {
        min-height: auto;
    }


    /* HEADER */

    .alof-business-header {
        position: relative;

        height: 45px;

        padding: 0 15px;
    }

    .alof-business-company {
        font-size: 10px;
    }

    .alof-business-current {
        margin-left: 8px;

        font-size: 9px;
    }

    .alof-business-header-line {
        margin: 0 10px;
    }

    .alof-business-logo {
        font-size: 10px;
    }


    /* INNER */

    .alof-business-inner {
        width: calc(100% - 40px);

        min-height: auto;

        padding-top: 65px;

        padding-bottom: 70px;
    }


    /* TITLE */

    .alof-business-title-wrap {
        display: block;

        margin-bottom: 70px;
    }

    .alof-business-title-wrap h1 {
        font-size: 37px;

        line-height: 1.1;

        letter-spacing: -1.5px;
    }

    .alof-business-title-wrap p {
        margin-top: 20px;

        font-size: 12px;

        line-height: 1.8;

        text-align: left;

        word-break: keep-all;
    }

    .pc-only {
        display: none;
    }


    /* GRID */

    .alof-business-grid {
        grid-template-columns: 1fr;

        gap: 75px;
    }


    /* CARD */

    .alof-business-card {
        width: 100%;
    }


    /* ICON */

    .alof-business-icon {
        width: 220px;
        height: 220px;
    }

    .alof-business-icon svg {
        width: 125px;
        height: 125px;
    }


    /* TEXT */

    .alof-business-card-text {
        margin-top: 28px;
    }

    .alof-business-card-text h2 {
        font-size: 20px;
    }

    .alof-business-card-text p {
        min-height: auto;

        margin-top: 13px;

        font-size: 12px;

        line-height: 1.9;
    }


    /* BOTTOM */

    .alof-business-bottom-line {
        left: 15px;
        right: 15px;

        bottom: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-business-inner {
        width: calc(100% - 30px);
    }

    .alof-business-title-wrap h1 {
        font-size: 32px;
    }

    .alof-business-icon {
        width: 200px;
        height: 200px;
    }

    .alof-business-icon svg {
        width: 112px;
        height: 112px;
    }

    .alof-business-grid {
        gap: 65px;
    }

}

/*****오시는 길 ********/
/* =========================================================
   ALOF LOCATION / CONTACT
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-location {
    --alof-black: #000000;
    --alof-purple: #593591;
    --alof-yellow: #E3DD8B;
    --alof-white: #ffffff;
    --alof-gray: #777777;
    --alof-line: #343434;

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background: #000000;
    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.alof-location-header {
    position: relative;

    z-index: 20;

    display: flex;
    align-items: center;

    width: 100%;
    height: 45px;

    padding: 0 7%;

    box-sizing: border-box;
}

.alof-location-company {
    flex-shrink: 0;

    font-size: 14px;
    font-weight: 400;

    color: #ffffff;
}

.alof-location-current {
    flex-shrink: 0;

    margin-left: 14px;

    font-size: 13px;

    color: #777777;
}

.alof-location-header-line {
    flex: 1;

    height: 1px;

    margin: 0 15px;

    background: #414141;
}

.alof-location-logo {
    flex-shrink: 0;

    font-size: 14px;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.alof-location-inner {
    position: relative;
    z-index: 5;

    width: min(1300px, calc(100% - 100px));

    margin: 0 auto;

    padding: 95px 0 80px;
}


/* =========================================================
   TITLE
========================================================= */

.alof-location-title {
    display: flex;
    align-items: flex-start;

    gap: 25px;

    margin-bottom: 70px;
}

.alof-location-title-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border: 1px solid #4a4a4a;

    border-radius: 50%;

    font-size: 11px;

    color: #aaaaaa;
}

.alof-location-title > div:last-child > span {
    display: block;

    margin-bottom: 14px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

    color: #8c8c8c;
}

.alof-location-title h1 {
    margin: 0;

    font-size: clamp(42px, 4vw, 55px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: #9B79C3;
}

.alof-location-title p {
    margin: 22px 0 0;

    font-size: 14px;

    line-height: 1.9;

    color: #fff;
}


/* =========================================================
   CONTENT
========================================================= */

.alof-location-content {
    display: grid;

    grid-template-columns:
        390px minmax(0, 1fr);

    gap: 80px;

    align-items: start;
}


/* =========================================================
   INFORMATION
========================================================= */

.alof-location-info {
    display: flex;

    flex-direction: column;

    gap: 0;
}

.alof-location-info-item {
    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 27px 0;

    border-bottom: 1px solid #262626;
}

.alof-location-info-item:first-child {
    padding-top: 0;
}


/* =========================================================
   INFO ICON
========================================================= */

.alof-location-info-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border: 1px solid #3d3d3d;

    border-radius: 50%;

    transition:
        border-color .35s ease,
        background .35s ease;
}


/* 위치 아이콘 */

.alof-location-info-icon::before {
    content: "";

    width: 12px;
    height: 16px;

    border: 1px solid #ffffff;

    border-radius: 8px 8px 8px 8px;

    transform: rotate(0deg);

    transition: border-color .35s ease;
}

.alof-location-info-icon::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 4px;
    height: 4px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #ffffff;
}


/* company */

.alof-location-info-icon.company::before {
    width: 16px;
    height: 13px;

    border-radius: 2px;
}

.alof-location-info-icon.company::after {
    width: 4px;
    height: 4px;

    border-radius: 0;

    background: #ffffff;

    box-shadow:
        -6px 0 #ffffff,
        6px 0 #ffffff;
}


/* phone */

.alof-location-info-icon.phone::before {
    width: 10px;
    height: 17px;

    border-radius: 3px;

    transform: rotate(-30deg);
}

.alof-location-info-icon.phone::after {
    width: 3px;
    height: 3px;

    top: 30px;

    background: #ffffff;
}


/* mail */

.alof-location-info-icon.mail::before {
    width: 18px;
    height: 12px;

    border-radius: 2px;

    transform: none;
}

.alof-location-info-icon.mail::after {
    content: "";

    width: 9px;
    height: 9px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -65%)
        rotate(45deg);

    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;

    border-radius: 0;

    background: transparent;
}


/* hover */

.alof-location-info-item:hover
.alof-location-info-icon {
    border-color: var(--alof-purple);

    background: rgba(89,53,145,.12);
}

.alof-location-info-item:hover
.alof-location-info-icon::before {
    border-color: var(--alof-yellow);
}

.alof-location-info-item:hover
.alof-location-info-icon::after {
    background: var(--alof-yellow);
}


/* =========================================================
   INFO TEXT
========================================================= */

.alof-location-info-text small {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #777777;
}

.alof-location-info-text h2 {
    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 400;

    letter-spacing: -.4px;

    color: #eeeeee;
}


/* =========================================================
   MAP WRAP
========================================================= */

.alof-location-map-wrap {
    min-width: 0;
}

.alof-location-map-label {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}

.alof-location-map-label span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #777777;
}

.alof-location-map-label strong {
    font-size: 13px;

    font-weight: 500;

    color: #ffffff;
}


/* =========================================================
   GOOGLE MAP
========================================================= */

.alof-location-map {
    position: relative;

    width: 100%;

    height: 440px;

    overflow: hidden;

    border: 1px solid #333333;

    background: #111111;

    transition:
        border-color .4s ease,
        box-shadow .4s ease;
}

.alof-location-map::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border: 1px solid rgba(89,53,145,.15);

    box-shadow:
        inset 0 0 60px rgba(0,0,0,.15);
}

.alof-location-map:hover {
    border-color: var(--alof-purple);

    box-shadow:
        0 0 40px rgba(89,53,145,.12);
}

.alof-location-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   MAP BUTTONS
========================================================= */

.alof-map-buttons {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 15px;
}

.alof-map-btn {
    display: flex;

    align-items: center;

    min-height: 72px;

    padding: 0 18px;

    box-sizing: border-box;

    text-decoration: none !important;

    border: 1px solid #303030;

    background: #080808;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.alof-map-btn:hover {
    transform: translateY(-5px);

    border-color: var(--alof-purple);

    background: #0e0e0e;
}

.alof-map-btn .map-btn-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin-right: 13px;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 15px;
    font-weight: 800;

    color: #000000;
}

.alof-map-btn.naver .map-btn-icon {
    background: #E3DD8B;
}

.alof-map-btn.kakao .map-btn-icon {
    background: #593591;
    color: #ffffff;
}

.alof-map-btn div {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.alof-map-btn small {
    font-size: 8px;

    letter-spacing: 1.5px;

    color: #666666;
}

.alof-map-btn strong {
    font-size: 12px;

    font-weight: 500;

    color: #eeeeee;
}

.alof-map-btn b {
    margin-left: auto;

    font-size: 17px;
    font-weight: 300;

    color: #777777;

    transition:
        color .3s ease,
        transform .3s ease;
}

.alof-map-btn:hover b {
    color: var(--alof-yellow);

    transform: translate(3px, -3px);
}


/* =========================================================
   BOTTOM
========================================================= */

.alof-location-bottom {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 70px;
}

.alof-location-bottom-line {
    flex: 1;

    height: 1px;

    background: #222222;
}

.alof-location-bottom p {
    flex-shrink: 0;

    margin: 0;

    font-size: 11px;

    color: #666666;
}

.alof-location-bottom p span {
    margin-right: 8px;

    color: var(--alof-yellow);

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.alof-location-reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.22,.61,.36,1);
}

.alof-location-reveal.active {
    opacity: 1;

    transform: translateY(0);
}


/* 순차 등장 */

.alof-location-info-item:nth-child(1) {
    transition-delay: .05s;
}

.alof-location-info-item:nth-child(2) {
    transition-delay: .15s;
}

.alof-location-info-item:nth-child(3) {
    transition-delay: .25s;
}

.alof-location-info-item:nth-child(4) {
    transition-delay: .35s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .alof-location-inner {
        width: calc(100% - 70px);
    }

    .alof-location-content {
        grid-template-columns: 330px minmax(0, 1fr);

        gap: 45px;
    }

    .alof-location-map {
        height: 400px;
    }

    .alof-location-info-text h2 {
        font-size: 14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-location {
        min-height: auto;
    }


    /* HEADER */

    .alof-location-header {
        height: 45px;

        padding: 0 15px;
    }

    .alof-location-company {
        font-size: 10px;
    }

    .alof-location-current {
        margin-left: 8px;

        font-size: 9px;
    }

    .alof-location-header-line {
        margin: 0 10px;
    }

    .alof-location-logo {
        font-size: 10px;
    }


    /* INNER */

    .alof-location-inner {
        width: calc(100% - 40px);

        padding: 70px 0 60px;
    }


    /* TITLE */

    .alof-location-title {
        gap: 15px;

        margin-bottom: 50px;
    }

    .alof-location-title-number {
        width: 36px;
        height: 36px;

        font-size: 9px;
    }

    .alof-location-title > div:last-child > span {
        margin-bottom: 10px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .alof-location-title h1 {
        font-size: 35px;

        letter-spacing: -1.5px;
    }

    .alof-location-title p {
        margin-top: 17px;

        font-size: 11px;

        line-height: 1.8;

        word-break: keep-all;
    }


    /* CONTENT */

    .alof-location-content {
        display: flex;

        flex-direction: column;

        gap: 55px;
    }


    /* INFO */

    .alof-location-info {
        width: 100%;
    }

    .alof-location-info-item {
        gap: 14px;

        padding: 22px 0;
    }

    .alof-location-info-icon {
        width: 38px;
        height: 38px;
    }

    .alof-location-info-text small {
        margin-bottom: 6px;

        font-size: 8px;
    }

    .alof-location-info-text h2 {
        font-size: 13px;

        line-height: 1.7;

        word-break: keep-all;
    }


    /* MAP */

    .alof-location-map-label {
        margin-bottom: 12px;
    }

    .alof-location-map-label span {
        font-size: 8px;
    }

    .alof-location-map-label strong {
        font-size: 11px;
    }

    .alof-location-map {
        height: 330px;
    }


    /* MAP BUTTON */

    .alof-map-buttons {
        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin-top: 10px;
    }

    .alof-map-btn {
        min-height: 62px;

        padding: 0 12px;
    }

    .alof-map-btn .map-btn-icon {
        width: 30px;
        height: 30px;

        margin-right: 8px;

        font-size: 12px;
    }

    .alof-map-btn small {
        font-size: 7px;

        letter-spacing: 1px;
    }

    .alof-map-btn strong {
        font-size: 10px;
    }

    .alof-map-btn b {
        font-size: 14px;
    }


    /* BOTTOM */

    .alof-location-bottom {
        display: block;

        margin-top: 55px;

        text-align: center;
    }

    .alof-location-bottom-line {
        width: 100%;

        margin-bottom: 18px;
    }

    .alof-location-bottom p {
        font-size: 10px;

        line-height: 1.7;
    }

    .alof-location-bottom .alof-location-bottom-line:last-child {
        margin-top: 18px;
        margin-bottom: 0;
    }

    .pc-only {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-location-inner {
        width: calc(100% - 30px);
    }

    .alof-location-title h1 {
        font-size: 31px;
    }

    .alof-location-map {
        height: 280px;
    }

    .alof-map-btn {
        min-height: 58px;

        padding: 0 9px;
    }

    .alof-map-btn .map-btn-icon {
        width: 27px;
        height: 27px;

        margin-right: 6px;
    }

    .alof-map-btn strong {
        font-size: 9px;
    }

    .alof-map-btn b {
        display: none;
    }

}

/***********국내제조서비스*********/
/* =========================================================
   ALOF MANUFACTURING SERVICE
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-manufacturing {

    --alof-black: #000000;
    --alof-purple: #593591;
    --alof-yellow: #E3DD8B;

    --alof-white: #ffffff;
    --alof-gray: #777777;
    --alof-dark-gray: #333333;

    position: relative;

    display: grid;

    grid-template-columns:
        46% 54%;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    background: #000000;

    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.alof-manufacturing-header {

    position: absolute;

    z-index: 30;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;

    width: 100%;

    height: 62px;

    padding: 0 18px;

    box-sizing: border-box;

    pointer-events: none;
}


.alof-manufacturing-company {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 400;

    color: #ffffff;
}


.alof-manufacturing-current {

    flex-shrink: 0;

    margin-left: 14px;

    font-size: 13px;

    color: #777777;
}


.alof-manufacturing-header-line {

    flex: 1;

    height: 1px;

    margin: 0 15px;

    background: rgba(255,255,255,.4);
}


.alof-manufacturing-logo {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 700;

    color: #000000;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.alof-manufacturing-content {

    position: relative;

    z-index: 10;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    min-width: 0;

    padding:

        110px
        clamp(50px, 5vw, 85px)
        70px
        clamp(50px, 5vw, 75px);

    box-sizing: border-box;

    background: #000000;
}


/* =========================================================
   TITLE
========================================================= */

.alof-manufacturing-title {

    display: flex;

    flex-direction: column;

    margin-top: 0;

    font-size: clamp(45px, 4vw, 58px);

    line-height: .98;

    letter-spacing: -2px;
}


.alof-manufacturing-title span {

    display: block;

    font-weight: 700;

    color: #9B79C3;
}


.alof-manufacturing-title strong {

    display: block;

    font-weight: 700;

    color: #9B79C3;
}


/* =========================================================
   TEXT AREA
========================================================= */

.alof-manufacturing-text-wrap {

    margin-top: 125px;

}


.alof-manufacturing-text {

    margin-bottom: 55px;

}


.alof-manufacturing-text:last-child {

    margin-bottom: 0;

}


/* TEXT TITLE */

.alof-manufacturing-text-title {

    margin-bottom: 15px;

    font-size: 19px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -.7px;

    color: #9B79C3;

    transition:

        color .35s ease,

        transform .35s ease;

}


.alof-manufacturing-text:hover
.alof-manufacturing-text-title {

    color: var(--alof-yellow);

    transform: translateX(5px);

}


/* DESCRIPTION */

.alof-manufacturing-text p {

    margin: 0;

    font-size: 13px;

    line-height: 2.05;

    font-weight: 300;

    color: #fff

    letter-spacing: -.3px;

    word-break: keep-all;

}


/* =========================================================
   BOTTOM
========================================================= */

.alof-manufacturing-bottom {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;

    padding-top: 50px;

}


.alof-manufacturing-bottom span {

    width: 35px;

    height: 2px;

    background:

        linear-gradient(

            90deg,

            var(--alof-purple),

            var(--alof-yellow)

        );

}


.alof-manufacturing-bottom p {

    margin: 0;

    font-size: 9px;

    letter-spacing: 2px;

    color: #555555;

}


/* =========================================================
   RIGHT IMAGE AREA
========================================================= */

.alof-manufacturing-images {

    position: relative;

    display: grid;

    grid-template-columns: 42% 58%;

    grid-template-rows: 50% 50%;

    width: 100%;

    height: 100vh;

    min-height: 700px;

    overflow: hidden;

}


/* =========================================================
   IMAGE
========================================================= */

.alof-manufacturing-image {

    position: relative;

    overflow: hidden;

    background: #111111;

    opacity: 0;

    transform: scale(1.06);

    transition:

        opacity 1.1s ease,

        transform 1.3s

        cubic-bezier(.22,.61,.36,1);

}


/* 이미지 위치 */

.alof-manufacturing-image.image01 {

    grid-column: 1;

    grid-row: 1;

}


.alof-manufacturing-image.image02 {

    grid-column: 1;

    grid-row: 2;

}


.alof-manufacturing-image.image03 {

    grid-column: 2;

    grid-row: 1 / 3;

}


/* IMAGE ACTIVE */

.alof-manufacturing-image.active {

    opacity: 1;

    transform: scale(1);

}


/* =========================================================
   IMAGE
========================================================= */

.alof-manufacturing-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:

        transform 1s

        cubic-bezier(.22,.61,.36,1),

        filter .6s ease;

}


/* Hover */

.alof-manufacturing-image:hover img {

    transform: scale(1.07);

    filter: brightness(.78);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.alof-image-overlay {

    position: absolute;

    z-index: 5;

    left: 25px;

    right: 25px;

    bottom: 25px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    opacity: 0;

    transform: translateY(15px);

    transition:

        opacity .4s ease,

        transform .4s ease;

}


.alof-manufacturing-image:hover
.alof-image-overlay {

    opacity: 1;

    transform: translateY(0);

}


.alof-image-overlay span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--alof-yellow);

}


.alof-image-overlay strong {

    font-size: 15px;

    font-weight: 600;

    color: #ffffff;

}


/* =========================================================
   IMAGE BORDER
========================================================= */

.alof-manufacturing-image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    border: 1px solid rgba(255,255,255,.08);

    transition:

        border-color .4s ease;

}


.alof-manufacturing-image:hover::after {

    border-color:

        rgba(227,221,139,.55);

}


/* =========================================================
   IMAGE LOAD DELAY
========================================================= */

.alof-manufacturing-image.image01 {

    transition-delay: .05s;

}


.alof-manufacturing-image.image02 {

    transition-delay: .2s;

}


.alof-manufacturing-image.image03 {

    transition-delay: .35s;

}


/* =========================================================
   CONTENT REVEAL
========================================================= */

.alof-manufacturing-reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s

        cubic-bezier(.22,.61,.36,1);

}


.alof-manufacturing-reveal.active {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   TITLE DELAY
========================================================= */

.alof-manufacturing-title {

    transition-delay: .05s;

}


.alof-manufacturing-text:nth-child(1) {

    transition-delay: .18s;

}


.alof-manufacturing-text:nth-child(2) {

    transition-delay: .32s;

}


.alof-manufacturing-bottom {

    transition-delay: .45s;

}


/* =========================================================
   SIDE LINE
========================================================= */

.alof-manufacturing-side-line {

    position: absolute;

    z-index: 20;

    top: 62px;

    bottom: 0;

    left: 46%;

    width: 1px;

    background: rgba(255,255,255,.18);

    pointer-events: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .alof-manufacturing {

        grid-template-columns: 44% 56%;

    }


    .alof-manufacturing-content {

        padding:

            100px
            45px
            50px
            45px;

    }


    .alof-manufacturing-title {

        font-size: 45px;

    }


    .alof-manufacturing-text-wrap {

        margin-top: 90px;

    }


    .alof-manufacturing-text {

        margin-bottom: 40px;

    }


    .alof-manufacturing-text-title {

        font-size: 16px;

    }


    .alof-manufacturing-text p {

        font-size: 11px;

        line-height: 1.9;

    }


    .alof-manufacturing-images {

        min-height: 650px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-manufacturing {

        display: flex;

        flex-direction: column;

        min-height: auto;

    }


    /* HEADER */

    .alof-manufacturing-header {

        position: relative;

        height: 45px;

        padding: 0 15px;

        background: #000000;

    }


    .alof-manufacturing-company {

        font-size: 10px;

    }


    .alof-manufacturing-current {

        margin-left: 8px;

        font-size: 9px;

    }


    .alof-manufacturing-header-line {

        margin: 0 10px;

    }


    .alof-manufacturing-logo {

        color: #ffffff;

        font-size: 10px;

    }


    /* CONTENT */

    .alof-manufacturing-content {

        order: 1;

        padding:

            65px
            25px
            55px;

    }


    /* TITLE */

    .alof-manufacturing-title {

        font-size: 39px;

        letter-spacing: -1.5px;

    }


    /* TEXT */

    .alof-manufacturing-text-wrap {

        margin-top: 70px;

    }


    .alof-manufacturing-text {

        margin-bottom: 45px;

    }


    .alof-manufacturing-text-title {

        margin-bottom: 12px;

        font-size: 18px;

    }


    .alof-manufacturing-text p {

        font-size: 12px;

        line-height: 1.9;

    }


    .desktop-only {

        display: none;

    }


    /* BOTTOM */

    .alof-manufacturing-bottom {

        padding-top: 10px;

    }


    /* IMAGES */

    .alof-manufacturing-images {

        order: 2;

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-template-rows: 260px 260px;

        width: 100%;

        height: 520px;

        min-height: 0;

    }


    .alof-manufacturing-image.image01 {

        grid-column: 1;

        grid-row: 1;

    }


    .alof-manufacturing-image.image02 {

        grid-column: 1;

        grid-row: 2;

    }


    .alof-manufacturing-image.image03 {

        grid-column: 2;

        grid-row: 1 / 3;

    }


    /* 모바일에서는 overlay 항상 살짝 표시 */

    .alof-image-overlay {

        left: 12px;

        right: 12px;

        bottom: 15px;

        opacity: 1;

        transform: translateY(0);

    }


    .alof-image-overlay span {

        font-size: 6px;

        letter-spacing: 1px;

    }


    .alof-image-overlay strong {

        font-size: 10px;

    }


    /* SIDE LINE */

    .alof-manufacturing-side-line {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-manufacturing-content {

        padding-left: 20px;

        padding-right: 20px;

    }


    .alof-manufacturing-title {

        font-size: 34px;

    }


    .alof-manufacturing-text-wrap {

        margin-top: 60px;

    }


    .alof-manufacturing-text-title {

        font-size: 16px;

    }


    .alof-manufacturing-text p {

        font-size: 11px;

    }


    .alof-manufacturing-images {

        grid-template-rows: 220px 220px;

        height: 440px;

    }

}

/********* 글로벌 인증 서비스(중국 위생허가, 미국 FDA MoCRA)
******/
/* =========================================================
   ALOF GLOBAL REGULATION
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-regulation {

    --reg-black: #000000;
    --reg-purple: #593591;
    --reg-yellow: #E3DD8B;
    --reg-white: #ffffff;
    --reg-gray: #777777;

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background: #000000;

    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.alof-regulation-header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    width: 100%;
    height: 60px;

    padding: 0 18px;

    box-sizing: border-box;
}


.alof-regulation-company {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 400;

    color: #ffffff;
}


.alof-regulation-current {

    flex-shrink: 0;

    margin-left: 14px;

    font-size: 13px;

    color: #777777;
}


.alof-regulation-header-line {

    flex: 1;

    height: 1px;

    margin: 0 25px;

    background: #444444;
}


.alof-regulation-logo {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.alof-regulation-inner {

    width: min(1300px, calc(100% - 100px));

    min-height: 100vh;

    margin: 0 auto;

    padding:

        105px
        0
        50px;

    box-sizing: border-box;
}


/* =========================================================
   HEADING
========================================================= */

.alof-regulation-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 135px;
}


.alof-regulation-heading h1 {

    margin: 0;

    font-size: clamp(42px, 4vw, 53px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: #9B79C3;
}


.alof-regulation-heading p {

    margin: 8px 0 0;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 300;

    text-align: right;

    color: #dddddd;

    letter-spacing: -.4px;
}


/* =========================================================
   CARDS
========================================================= */

.alof-regulation-cards {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 26px;
}


/* =========================================================
   CARD
========================================================= */

.alof-regulation-card {

    position: relative;

    min-height: 405px;

    padding:

        42px
        35px
        35px;

    box-sizing: border-box;

    text-align: center;

    background: #ffffff;

    border-radius: 36px;

    color: #000000;

    overflow: hidden;

    transition:

        transform .45s cubic-bezier(.22,.61,.36,1),

        box-shadow .45s ease;
}


.alof-regulation-card::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 0;

    height: 4px;

    background:

        linear-gradient(
            90deg,
            var(--reg-purple),
            var(--reg-yellow)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:

        transform .5s ease;
}


.alof-regulation-card:hover {

    transform: translateY(-12px);

    box-shadow:

        0 25px 60px
        rgba(89,53,145,.18);
}


.alof-regulation-card:hover::before {

    transform: scaleX(1);
}


/* =========================================================
   ICON
========================================================= */

.alof-regulation-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 155px;
    height: 155px;

    margin: 0 auto 25px;

    color: var(--reg-purple);

    transition:

        transform .5s ease;
}


.alof-regulation-card:hover
.alof-regulation-icon {

    transform:

        translateY(-5px)
        scale(1.05);
}


.alof-regulation-icon svg {

    width: 100%;
    height: 100%;

    overflow: visible;
}


/* SVG LINE */

.alof-regulation-icon .reg-icon-line {

    fill: none;

    stroke: #9575BA;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

}


/* SVG FILL */

.alof-regulation-icon .reg-icon-fill {

    fill: #9575BA;
}


/* =========================================================
   CARD TITLE
========================================================= */

.alof-regulation-card h2 {

    margin: 0;

    font-size: 23px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -1.2px;

    color: #111111;

    transition:

        color .35s ease;
}


.alof-regulation-card:hover h2 {

    color: var(--reg-purple);
}


/* =========================================================
   CARD LINE
========================================================= */

.alof-regulation-card-line {

    width: 100%;

    height: 1px;

    margin: 14px 0 15px;

    background: #c9c9c9;

    transition:

        background .35s ease;
}


.alof-regulation-card:hover
.alof-regulation-card-line {

    background:

        linear-gradient(
            90deg,
            var(--reg-purple),
            var(--reg-yellow)
        );
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.alof-regulation-card p {

    max-width: 330px;

    margin: 0 auto;

    font-size: 13px;

    line-height: 1.8;

    font-weight: 400;

    color: #333333;

    letter-spacing: -.4px;

    word-break: keep-all;
}


/* =========================================================
   BOTTOM
========================================================= */

.alof-regulation-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 45px;

    font-size: 8px;

    letter-spacing: 3px;

    color: #555555;
}


.alof-regulation-bottom span {

    flex: 1;

    height: 1px;

    background: #222222;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.alof-regulation-reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s
        cubic-bezier(.22,.61,.36,1);
}


.alof-regulation-reveal.active {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   CARD DELAY
========================================================= */

.alof-regulation-card:nth-child(1) {

    transition-delay: .08s;
}


.alof-regulation-card:nth-child(2) {

    transition-delay: .22s;
}


.alof-regulation-card:nth-child(3) {

    transition-delay: .36s;
}


/* =========================================================
   ICON DRAW ANIMATION
========================================================= */

.alof-regulation-card
.reg-icon-line {

    stroke-dasharray: 500;

    stroke-dashoffset: 500;

    transition:

        stroke-dashoffset 1.2s
        cubic-bezier(.22,.61,.36,1);
}


.alof-regulation-card.active
.reg-icon-line {

    stroke-dashoffset: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .alof-regulation-inner {

        width: calc(100% - 70px);

    }


    .alof-regulation-heading {

        margin-bottom: 90px;

    }


    .alof-regulation-cards {

        gap: 18px;

    }


    .alof-regulation-card {

        min-height: 390px;

        padding:

            35px
            25px
            30px;

        border-radius: 30px;

    }


    .alof-regulation-icon {

        width: 135px;
        height: 135px;

    }


    .alof-regulation-card h2 {

        font-size: 20px;

    }


    .alof-regulation-card p {

        font-size: 12px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-regulation {

        min-height: auto;

    }


    /* HEADER */

    .alof-regulation-header {

        position: relative;

        height: 45px;

        padding: 0 15px;

    }


    .alof-regulation-company {

        font-size: 10px;

    }


    .alof-regulation-current {

        margin-left: 8px;

        font-size: 9px;

    }


    .alof-regulation-header-line {

        margin: 0 10px;

    }


    .alof-regulation-logo {

        font-size: 10px;

    }


    /* INNER */

    .alof-regulation-inner {

        width: calc(100% - 40px);

        min-height: auto;

        padding:

            65px
            0
            60px;

    }


    /* HEADING */

    .alof-regulation-heading {

        display: block;

        margin-bottom: 55px;

    }


    .alof-regulation-heading h1 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.5px;

    }


    .alof-regulation-heading p {

        margin-top: 20px;

        font-size: 12px;

        line-height: 1.8;

        text-align: left;

        word-break: keep-all;

    }


    /* CARDS */

    .alof-regulation-cards {

        display: flex;

        flex-direction: column;

        gap: 25px;

    }


    /* CARD */

    .alof-regulation-card {

        width: 100%;

        min-height: auto;

        padding:

            38px
            25px
            35px;

        border-radius: 28px;

    }


    /* ICON */

    .alof-regulation-icon {

        width: 135px;
        height: 135px;

        margin-bottom: 20px;

    }


    /* TITLE */

    .alof-regulation-card h2 {

        font-size: 20px;

    }


    /* DESCRIPTION */

    .alof-regulation-card p {

        max-width: 100%;

        font-size: 12px;

        line-height: 1.9;

    }


    /* BOTTOM */

    .alof-regulation-bottom {

        margin-top: 35px;

        font-size: 7px;

        letter-spacing: 2px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-regulation-inner {

        width: calc(100% - 30px);

    }


    .alof-regulation-heading h1 {

        font-size: 32px;

    }


    .alof-regulation-card {

        padding:

            32px
            20px
            30px;

        border-radius: 24px;

    }


    .alof-regulation-icon {

        width: 120px;
        height: 120px;

    }


    .alof-regulation-card h2 {

        font-size: 18px;

    }


    .alof-regulation-card p {

        font-size: 11px;

    }


    .alof-regulation-bottom {

        font-size: 6px;

    }

}

/******** 인증 및 수입·무역대행(한국 KC 인증, 중국→한국 수입통관)***********/
/* =========================================================
   ALOF CERTIFICATION & TRADE
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-certification {

    --cert-black: #000000;
    --cert-purple: #593591;
    --cert-purple-light: #9B79C3;
    --cert-yellow: #E3DD8B;

    --cert-white: #ffffff;
    --cert-gray: #777777;
    --cert-line: #3a3a3a;

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background: #000000;

    color: #ffffff;
}


/* =========================================================
   TOP HEADER
========================================================= */

.alof-certification-header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;

    width: 100%;
    height: 60px;

    padding: 0 18px;

    box-sizing: border-box;
}


.alof-certification-company {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 400;

    color: #ffffff;
}


.alof-certification-current {

    flex-shrink: 0;

    margin-left: 14px;

    font-size: 13px;

    color: #777777;
}


.alof-certification-header-line {

    flex: 1;

    height: 1px;

    margin: 0 20px;

    background: #424242;
}


.alof-certification-logo {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.alof-certification-inner {

    width: min(1300px, calc(100% - 100px));

    min-height: 100vh;

    margin: 0 auto;

    padding:

        112px
        0
        55px;

    box-sizing: border-box;
}


/* =========================================================
   HEADING
========================================================= */

.alof-certification-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 135px;
}


.alof-certification-heading h1 {

    margin: 0;

    font-size: clamp(43px, 4vw, 55px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: var(--cert-purple-light);
}


.alof-certification-heading p {

    margin: 8px 0 0;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 300;

    text-align: right;

    color: #dddddd;

    letter-spacing: -.4px;
}


/* =========================================================
   CONTENT
========================================================= */

.alof-certification-content {

    display: grid;

    grid-template-columns:
        34% minmax(0, 66%);

    gap: 22px;

    align-items: stretch;
}


/* =========================================================
   LEFT PURPLE CARD
========================================================= */

.alof-certification-main-card {

    position: relative;

    min-height: 403px;

    padding: 40px 50px;

    box-sizing: border-box;

    overflow: hidden;

    border-radius: 38px;

    background: var(--cert-purple);

    color: #ffffff;

    transition:

        transform .5s
        cubic-bezier(.22,.61,.36,1),

        box-shadow .5s ease;
}


.alof-certification-main-card::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    top: -110px;

    border: 1px solid rgba(227,221,139,.2);

    border-radius: 50%;

    transition:

        transform .8s ease;
}


.alof-certification-main-card::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: -60px;
    bottom: -60px;

    border: 1px solid rgba(255,255,255,.1);

    border-radius: 50%;
}


.alof-certification-main-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 30px 60px
        rgba(89,53,145,.3);
}


.alof-certification-main-card:hover::before {

    transform: scale(1.3);
}


/* =========================================================
   LEFT CARD INNER
========================================================= */

.alof-certification-main-inner {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: center;

    height: 100%;

    text-align: center;
}


/* =========================================================
   LEFT CARD TITLE
========================================================= */

.alof-certification-main-title {

    display: flex;

    flex-direction: column;

    gap: 2px;

    font-size: 31px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -1.7px;

    color: #ffffff;
}


/* =========================================================
   LEFT CARD LINE
========================================================= */

.alof-certification-main-line {

    width: 100%;

    height: 1px;

    margin: 42px 0 22px;

    background: rgba(255,255,255,.4);
}


/* =========================================================
   LEFT CARD DESCRIPTION
========================================================= */

.alof-certification-main-inner > p {

    margin: 0;

    font-size: 13px;

    line-height: 1.8;

    font-weight: 300;

    color: rgba(255,255,255,.9);

    word-break: keep-all;
}


/* =========================================================
   LEFT CARD BOTTOM
========================================================= */

.alof-certification-main-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 30px;

    opacity: .55;
}


.alof-certification-main-bottom span {

    width: 22px;

    height: 1px;

    background: var(--cert-yellow);
}


.alof-certification-main-bottom small {

    font-size: 7px;

    letter-spacing: 2px;

    color: var(--cert-yellow);
}


/* =========================================================
   RIGHT LIST
========================================================= */

.alof-certification-list {

    display: flex;

    flex-direction: column;

    min-height: 403px;

    padding: 25px 70px;

    box-sizing: border-box;

    border: 1px solid #8a8a8a;

    border-radius: 38px;

    background: transparent;
}


/* =========================================================
   ITEM
========================================================= */

.alof-certification-item {

    display: grid;

    grid-template-columns: 90px minmax(0, 1fr);

    gap: 20px;

    align-items: start;

    padding: 24px 0;

}


.alof-certification-item + .alof-certification-item {

    border-top: 1px solid #3b3b3b;

}


/* =========================================================
   NUMBER
========================================================= */

.alof-certification-number {

    font-size: 52px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: var(--cert-purple-light);

    transition:

        color .35s ease,

        transform .35s ease;
}


.alof-certification-item:hover
.alof-certification-number {

    color: var(--cert-yellow);

    transform: translateX(5px);
}


/* =========================================================
   ITEM CONTENT
========================================================= */

.alof-certification-item-content {

    padding-top: 3px;
}


.alof-certification-item-content h2 {

    margin: 0 0 13px;

    font-size: 21px;

    line-height: 1.45;

    font-weight: 700;

    letter-spacing: -.8px;

    color: #ffffff;
}


.alof-certification-item-content h2 span {

    font-weight: 600;

    color: #ffffff;
}


.alof-certification-item-content p {

    margin: 0;

    font-size: 13px;

    line-height: 1.8;

    font-weight: 300;

    color: #fff;

    word-break: keep-all;
}


/* =========================================================
   ITEM HOVER
========================================================= */

.alof-certification-item {

    position: relative;

    transition:

        padding-left .35s ease;
}


.alof-certification-item:hover {

    padding-left: 8px;
}


.alof-certification-item:hover
.alof-certification-item-content h2 {

    color: #ffffff;
}


/* =========================================================
   BOTTOM
========================================================= */

.alof-certification-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 38px;
}


.alof-certification-bottom span {

    flex: 1;

    height: 1px;

    background: #222222;
}


.alof-certification-bottom p {

    margin: 0;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 3px;

    color: #555555;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.alof-certification-reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s
        cubic-bezier(.22,.61,.36,1);
}


.alof-certification-reveal.active {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   ANIMATION DELAY
========================================================= */

.alof-certification-heading {

    transition-delay: .05s;
}


.alof-certification-main-card {

    transition-delay: .15s;
}


.alof-certification-list {

    transition-delay: .28s;
}


.alof-certification-bottom {

    transition-delay: .45s;
}


/* =========================================================
   PURPLE CARD LIGHT EFFECT
========================================================= */

.alof-certification-main-card {

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(227,221,139,.12),
            transparent 30%
        ),

        #593591;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .alof-certification-inner {

        width: calc(100% - 70px);

    }


    .alof-certification-heading {

        margin-bottom: 90px;

    }


    .alof-certification-content {

        grid-template-columns:
            35% minmax(0, 65%);

        gap: 18px;

    }


    .alof-certification-main-card {

        min-height: 390px;

        padding: 35px 30px;

        border-radius: 30px;

    }


    .alof-certification-main-title {

        font-size: 25px;

    }


    .alof-certification-main-inner > p {

        font-size: 11px;

    }


    .alof-certification-list {

        min-height: 390px;

        padding: 20px 40px;

        border-radius: 30px;

    }


    .alof-certification-item {

        grid-template-columns: 70px minmax(0, 1fr);

    }


    .alof-certification-number {

        font-size: 44px;

    }


    .alof-certification-item-content h2 {

        font-size: 18px;

    }


    .alof-certification-item-content p {

        font-size: 11px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-certification {

        min-height: auto;

    }


    /* HEADER */

    .alof-certification-header {

        position: relative;

        height: 45px;

        padding: 0 15px;

    }


    .alof-certification-company {

        font-size: 10px;

    }


    .alof-certification-current {

        margin-left: 8px;

        font-size: 9px;

        white-space: nowrap;

    }


    .alof-certification-header-line {

        margin: 0 8px;

    }


    .alof-certification-logo {

        font-size: 10px;

    }


    /* INNER */

    .alof-certification-inner {

        width: calc(100% - 40px);

        min-height: auto;

        padding:

            65px
            0
            60px;

    }


    /* HEADING */

    .alof-certification-heading {

        display: block;

        margin-bottom: 55px;

    }


    .alof-certification-heading h1 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.5px;

    }


    .alof-certification-heading p {

        margin-top: 20px;

        font-size: 12px;

        line-height: 1.8;

        text-align: left;

        word-break: keep-all;

    }


    /* CONTENT */

    .alof-certification-content {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }


    /* PURPLE CARD */

    .alof-certification-main-card {

        min-height: 350px;

        padding: 40px 28px;

        border-radius: 28px;

    }


    .alof-certification-main-title {

        font-size: 26px;

    }


    .alof-certification-main-line {

        margin: 30px 0 20px;

    }


    .alof-certification-main-inner > p {

        font-size: 12px;

        line-height: 1.9;

    }


    /* RIGHT LIST */

    .alof-certification-list {

        min-height: auto;

        padding: 10px 25px;

        border-radius: 28px;

    }


    /* ITEM */

    .alof-certification-item {

        grid-template-columns: 55px minmax(0, 1fr);

        gap: 12px;

        padding: 25px 0;

    }


    .alof-certification-number {

        font-size: 38px;

        letter-spacing: -1px;

    }


    .alof-certification-item-content {

        padding-top: 2px;

    }


    .alof-certification-item-content h2 {

        margin-bottom: 10px;

        font-size: 17px;

        line-height: 1.5;

        letter-spacing: -.7px;

    }


    .alof-certification-item-content h2 span {

        display: inline;

    }


    .alof-certification-item-content p {

        font-size: 11px;

        line-height: 1.85;

    }


    /* BOTTOM */

    .alof-certification-bottom {

        margin-top: 30px;

    }


    .alof-certification-bottom p {

        font-size: 6px;

        letter-spacing: 2px;

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-certification-inner {

        width: calc(100% - 30px);

    }


    .alof-certification-heading h1 {

        font-size: 31px;

    }


    .alof-certification-main-card {

        min-height: 330px;

        padding: 35px 20px;

        border-radius: 24px;

    }


    .alof-certification-main-title {

        font-size: 23px;

    }


    .alof-certification-main-inner > p {

        font-size: 11px;

    }


    .alof-certification-list {

        padding: 8px 20px;

        border-radius: 24px;

    }


    .alof-certification-item {

        grid-template-columns: 48px minmax(0, 1fr);

        gap: 10px;

    }


    .alof-certification-number {

        font-size: 34px;

    }


    .alof-certification-item-content h2 {

        font-size: 15px;

    }


    .alof-certification-item-content p {

        font-size: 10.5px;

    }

}

/******** 통합 소싱(제조사 발굴·품목 소싱)***********/
/* =========================================================
   ALOF INTEGRATED SOURCING
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-sourcing {

    --source-black: #000000;
    --source-purple: #593591;
    --source-purple-light: #9B79C3;
    --source-yellow: #E3DD8B;

    --source-white: #ffffff;
    --source-gray: #777777;
    --source-line: #3a3a3a;

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background: #000000;

    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.alof-sourcing-header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;

    width: 100%;
    height: 60px;

    padding: 0 10px;

    box-sizing: border-box;
}


.alof-sourcing-company {

    flex-shrink: 0;

    font-size: 14px;

    font-weight: 400;

    color: #ffffff;
}


.alof-sourcing-current {

    flex-shrink: 0;

    margin-left: 14px;

    font-size: 13px;

    color: #777777;
}


.alof-sourcing-header-line {

    flex: 1;

    height: 1px;

    margin: 0 20px;

    background: #444444;
}


.alof-sourcing-logo {

    flex-shrink: 0;

    padding-right: 0;

    font-size: 14px;

    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   INNER
========================================================= */

.alof-sourcing-inner {

    width: min(1300px, calc(100% - 100px));

    min-height: 100vh;

    margin: 0 auto;

    padding:

        104px
        0
        50px;

    box-sizing: border-box;
}


/* =========================================================
   HEADING
========================================================= */

.alof-sourcing-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 125px;
}


.alof-sourcing-heading h1 {

    margin: 0;

    font-size: clamp(43px, 4vw, 54px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -2px;

    color: var(--source-purple-light);
}


.alof-sourcing-heading p {

    margin: 8px 0 0;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 300;

    text-align: right;

    color: #dddddd;

    letter-spacing: -.4px;
}


/* =========================================================
   GRID
========================================================= */

.alof-sourcing-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 76px;

    align-items: start;
}


/* =========================================================
   CARD WRAP
========================================================= */

.alof-sourcing-card-wrap {

    min-width: 0;

    text-align: center;

    transition:

        transform .45s
        cubic-bezier(.22,.61,.36,1);
}


.alof-sourcing-card-wrap:hover {

    transform: translateY(-10px);
}


/* =========================================================
   CARD
========================================================= */

.alof-sourcing-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    height: 262px;

    padding: 40px 25px 25px;

    box-sizing: border-box;

    border-radius: 26px;

    overflow: hidden;

    transition:

        background .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;
}


/* =========================================================
   WHITE CARD
========================================================= */

.alof-sourcing-card.white-card {

    background: #ffffff;

    border: 1px solid #ffffff;

    color: #000000;
}


.alof-sourcing-card.white-card::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 0;

    height: 4px;

    background:

        linear-gradient(
            90deg,
            var(--source-purple),
            var(--source-yellow)
        );

    transform: scaleX(0);

    transform-origin: center;

    transition:

        transform .5s ease;
}


.alof-sourcing-card-wrap:hover
.white-card::before {

    transform: scaleX(1);
}


/* =========================================================
   DARK CARD
========================================================= */

.alof-sourcing-card.dark-card {

    background: #000000;

    border: 6px solid #8063A5;

    color: #ffffff;

    box-shadow:

        inset 0 0 0 1px
        rgba(255,255,255,.05);
}


.alof-sourcing-card.dark-card::before {

    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid
        rgba(227,221,139,.08);

    border-radius: 17px;

    pointer-events: none;
}


.alof-sourcing-card-wrap:hover
.dark-card {

    border-color: var(--source-yellow);

    box-shadow:

        0 0 35px
        rgba(89,53,145,.25);
}


/* =========================================================
   NUMBER
========================================================= */

.alof-sourcing-card-number {

    position: relative;

    z-index: 2;

    font-size: 27px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: -.5px;

    color: var(--source-purple-light);
}


.alof-sourcing-card.dark-card
.alof-sourcing-card-number {

    color: var(--source-purple-light);
}


/* =========================================================
   ENGLISH TITLE
========================================================= */

.alof-sourcing-card h2 {

    position: relative;

    z-index: 2;

    margin: 11px 0 0;

    font-size: 27px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.8px;

    color: var(--source-purple-light);
}


.alof-sourcing-card.dark-card h2 {

    color: var(--source-purple-light);
}


/* =========================================================
   ICON
========================================================= */

.alof-sourcing-icon {

    position: relative;

    z-index: 2;

    width: 115px;

    height: 95px;

    margin-top: 17px;

    transition:

        transform .45s ease;
}


.alof-sourcing-card-wrap:hover
.alof-sourcing-icon {

    transform:

        translateY(-5px)
        scale(1.08);
}


.alof-sourcing-icon svg {

    width: 100%;
    height: 100%;

    overflow: visible;
}


/* =========================================================
   SVG
========================================================= */

.alof-sourcing-icon .source-icon-line {

    fill: none;

    stroke: #9575BA;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.alof-sourcing-card-text {

    margin-top: 32px;

    text-align: center;
}


.alof-sourcing-card-text h3 {

    margin: 0;

    font-size: 21px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -1px;

    color: #ffffff;

    transition:

        color .35s ease;
}


.alof-sourcing-card-wrap:hover
.alof-sourcing-card-text h3 {

    color: var(--source-yellow);
}


.alof-sourcing-card-text p {

    margin: 13px 0 0;

    font-size: 13px;

    line-height: 1.9;

    font-weight: 300;

    color: #fff;

    word-break: keep-all;
}


/* =========================================================
   BOTTOM
========================================================= */

.alof-sourcing-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 45px;
}


.alof-sourcing-bottom span {

    flex: 1;

    height: 1px;

    background: #222222;
}


.alof-sourcing-bottom p {

    margin: 0;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 3px;

    color: #555555;
}


/* =========================================================
   REVEAL
========================================================= */

.alof-sourcing-reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s
        cubic-bezier(.22,.61,.36,1);
}


.alof-sourcing-reveal.active {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   DELAY
========================================================= */

.alof-sourcing-heading {

    transition-delay: .05s;
}


.alof-sourcing-card-wrap:nth-child(1) {

    transition-delay: .12s;
}


.alof-sourcing-card-wrap:nth-child(2) {

    transition-delay: .26s;
}


.alof-sourcing-card-wrap:nth-child(3) {

    transition-delay: .40s;
}


.alof-sourcing-bottom {

    transition-delay: .55s;
}


/* =========================================================
   ICON DRAW ANIMATION
========================================================= */

.alof-sourcing-card
.source-icon-line {

    stroke-dasharray: 500;

    stroke-dashoffset: 500;

    transition:

        stroke-dashoffset 1.1s
        cubic-bezier(.22,.61,.36,1);
}


.alof-sourcing-card-wrap.active
.source-icon-line {

    stroke-dashoffset: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .alof-sourcing-inner {

        width: calc(100% - 70px);

    }


    .alof-sourcing-heading {

        margin-bottom: 90px;

    }


    .alof-sourcing-grid {

        gap: 25px;

    }


    .alof-sourcing-card {

        height: 245px;

        padding: 35px 15px 20px;

    }


    .alof-sourcing-card-number {

        font-size: 24px;

    }


    .alof-sourcing-card h2 {

        font-size: 23px;

    }


    .alof-sourcing-icon {

        width: 100px;

        height: 85px;

    }


    .alof-sourcing-card-text h3 {

        font-size: 18px;

    }


    .alof-sourcing-card-text p {

        font-size: 11px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-sourcing {

        min-height: auto;

    }


    /* HEADER */

    .alof-sourcing-header {

        position: relative;

        height: 45px;

        padding: 0 15px;

    }


    .alof-sourcing-company {

        font-size: 10px;

    }


    .alof-sourcing-current {

        margin-left: 8px;

        font-size: 9px;

        white-space: nowrap;

    }


    .alof-sourcing-header-line {

        margin: 0 8px;

    }


    .alof-sourcing-logo {

        font-size: 10px;

    }


    /* INNER */

    .alof-sourcing-inner {

        width: calc(100% - 40px);

        min-height: auto;

        padding:

            65px
            0
            60px;

    }


    /* HEADING */

    .alof-sourcing-heading {

        display: block;

        margin-bottom: 55px;

    }


    .alof-sourcing-heading h1 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.5px;

    }


    .alof-sourcing-heading p {

        margin-top: 20px;

        font-size: 12px;

        line-height: 1.8;

        text-align: left;

        word-break: keep-all;

    }


    /* GRID */

    .alof-sourcing-grid {

        display: flex;

        flex-direction: column;

        gap: 38px;

    }


    /* CARD */

    .alof-sourcing-card {

        height: 255px;

        padding: 38px 25px 25px;

        border-radius: 25px;

    }


    .alof-sourcing-card.dark-card {

        border-width: 5px;

    }


    /* NUMBER */

    .alof-sourcing-card-number {

        font-size: 25px;

    }


    /* TITLE */

    .alof-sourcing-card h2 {

        margin-top: 10px;

        font-size: 25px;

    }


    /* ICON */

    .alof-sourcing-icon {

        width: 105px;

        height: 88px;

        margin-top: 16px;

    }


    /* TEXT */

    .alof-sourcing-card-text {

        margin-top: 22px;

    }


    .alof-sourcing-card-text h3 {

        font-size: 19px;

    }


    .alof-sourcing-card-text p {

        margin-top: 10px;

        font-size: 11px;

        line-height: 1.85;

    }


    /* BOTTOM */

    .alof-sourcing-bottom {

        margin-top: 40px;

    }


    .alof-sourcing-bottom p {

        font-size: 6px;

        letter-spacing: 2px;

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-sourcing-inner {

        width: calc(100% - 30px);

    }


    .alof-sourcing-heading h1 {

        font-size: 31px;

    }


    .alof-sourcing-card {

        height: 240px;

        border-radius: 22px;

    }


    .alof-sourcing-card-number {

        font-size: 23px;

    }


    .alof-sourcing-card h2 {

        font-size: 23px;

    }


    .alof-sourcing-icon {

        width: 95px;

        height: 80px;

    }


    .alof-sourcing-card-text h3 {

        font-size: 17px;

    }


    .alof-sourcing-card-text p {

        font-size: 10.5px;

    }

}

/**********고객센터*********/
/* =========================================================
   ALOF CONTACT
   BLACK   : #000000
   POINT   : #593591
   SUB     : #E3DD8B
========================================================= */

.alof-contact {

    --contact-black: #000000;
    --contact-purple: #593591;
    --contact-purple-light: #9B79C3;
    --contact-yellow: #E3DD8B;

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    background: #000000;

    color: #ffffff;
}


/* =========================================================
   TOP HEADER
========================================================= */

.alof-contact-header {

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;

    width: 100%;

    height: 60px;

    padding: 0 10px;

    box-sizing: border-box;
}


/* COMPANY PROFILE */

.alof-contact-profile {

    flex-shrink: 0;

    font-size: 14px;

    line-height: 1;

    font-weight: 400;

    color: #ffffff;

    white-space: nowrap;
}


/* HEADER LINE */

.alof-contact-line {

    flex: 1;

    height: 1px;

    margin-left: 16px;
    margin-right: 16px;

    background: #555555;
}


/* LOGO */

.alof-contact-logo {

    flex-shrink: 0;

    font-size: 14px;

    line-height: 1;

    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   VERTICAL LINE
========================================================= */

.alof-contact-vertical-line {

    position: absolute;

    z-index: 5;

    top: 18px;
    bottom: 0;

    left: 30%;

    width: 1px;

    background:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.35),
            rgba(255,255,255,.2)
        );
}


/* =========================================================
   CENTER DOT
========================================================= */

.alof-contact-dot {

    position: absolute;

    left: 50%;

    top: 39%;

    width: 15px;
    height: 15px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #ffffff;

    box-shadow:

        0 0 0 7px
        rgba(89,53,145,.12),

        0 0 25px
        rgba(89,53,145,.35);

    animation:

        alofContactDot
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   CONTENT
========================================================= */

.alof-contact-content {

    position: relative;

    width: min(1200px, calc(100% - 80px));

    min-height: 100vh;

    margin: 0 auto;

    padding:

        245px
        0
        100px
        30%;

    box-sizing: border-box;
}


/* =========================================================
   INTRO
========================================================= */

.alof-contact-intro {

    position: relative;

    margin-bottom: 82px;
}


/* INTRO TEXT */

.alof-contact-intro p {

    margin: 0;

    font-size: 20px;

    line-height: 1.7;

    font-weight: 400;

    letter-spacing: -.7px;

    color: var(--contact-purple-light);

    word-break: keep-all;
}


/* =========================================================
   ACCENT
========================================================= */

.alof-contact-accent {

    width: 22px;

    height: 5px;

    margin-top: 32px;

    background: var(--contact-purple-light);

    box-shadow:

        0 0 15px
        rgba(89,53,145,.35);
}


/* =========================================================
   CONTACT INFO
========================================================= */

.alof-contact-info {

    position: relative;
}


.alof-contact-info h1 {

    margin: 0 0 28px;

    font-size: 34px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -1px;

    color: #ffffff;
}


/* =========================================================
   CONTACT LIST
========================================================= */

.alof-contact-list {

    display: grid;

    grid-template-columns:

        minmax(210px, auto)
        minmax(210px, auto);

    column-gap: 60px;

    row-gap: 16px;

    align-items: center;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.alof-contact-item {

    display: flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    text-decoration: none;

    transition:

        transform .35s ease,

        opacity .35s ease;
}


.alof-contact-item:hover {

    transform: translateX(7px);

    opacity: .85;
}


/* =========================================================
   ICON
========================================================= */

.alof-contact-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    flex-shrink: 0;
}


.alof-contact-icon svg {

    width: 100%;
    height: 100%;

    overflow: visible;
}


.alof-contact-icon
.contact-icon-line {

    fill: none;

    stroke: #dddddd;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   TEXT
========================================================= */

.alof-contact-text {

    font-size: 17px;

    line-height: 1.4;

    font-weight: 300;

    letter-spacing: -.2px;

    color: #fff;

    transition:

        color .35s ease;
}


.alof-contact-item:hover
.alof-contact-text {

    color: var(--contact-yellow);
}


/* =========================================================
   GOLD DECORATION
========================================================= */

.alof-contact-gold-line {

    position: absolute;

    left: calc(30% + 57%);

    top: 67%;

    width: 80px;

    height: 1px;

    background: var(--contact-yellow);

    opacity: .15;

    transform: rotate(-35deg);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.alof-contact-reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity .9s ease,

        transform .9s
        cubic-bezier(.22,.61,.36,1);
}


.alof-contact-reveal.active {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   INTRO DELAY
========================================================= */

.alof-contact-intro {

    transition-delay: .1s;
}


.alof-contact-info {

    transition-delay: .3s;
}


/* =========================================================
   DOT ANIMATION
========================================================= */

@keyframes alofContactDot {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        box-shadow:

            0 0 0 7px
            rgba(89,53,145,.12),

            0 0 20px
            rgba(89,53,145,.2);
    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.12);

        box-shadow:

            0 0 0 10px
            rgba(89,53,145,.08),

            0 0 35px
            rgba(89,53,145,.45);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .alof-contact-vertical-line {

        left: 28%;

    }


    .alof-contact-content {

        width: calc(100% - 70px);

        padding-left: 32%;

        padding-top: 220px;

    }


    .alof-contact-intro p {

        font-size: 19px;

    }


    .alof-contact-list {

        column-gap: 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alof-contact {

        min-height: auto;

    }


    /* HEADER */

    .alof-contact-header {

        position: relative;

        height: 45px;

        padding: 0 15px;

    }


    .alof-contact-profile {

        font-size: 10px;

    }


    .alof-contact-line {

        margin-left: 10px;
        margin-right: 10px;

    }


    .alof-contact-logo {

        font-size: 10px;

    }


    /* VERTICAL LINE */

    .alof-contact-vertical-line {

        top: 45px;
        bottom: 0;

        left: 22px;

        background:

            linear-gradient(
                to bottom,
                rgba(255,255,255,.25),
                rgba(255,255,255,.08)
            );

    }


    /* DOT */

    .alof-contact-dot {

        left: 50%;

        top: 300px;

        width: 12px;
        height: 12px;

    }


    /* CONTENT */

    .alof-contact-content {

        width: calc(100% - 40px);

        min-height: auto;

        margin-left: 22px;

        padding:

            105px
            20px
            80px
            38px;

        box-sizing: border-box;

    }


    /* INTRO */

    .alof-contact-intro {

        margin-bottom: 60px;

    }


    .alof-contact-intro p {

        font-size: 17px;

        line-height: 1.8;

        letter-spacing: -.6px;

    }


    .alof-contact-accent {

        width: 20px;

        height: 4px;

        margin-top: 25px;

    }


    /* CONTACT */

    .alof-contact-info h1 {

        margin-bottom: 25px;

        font-size: 30px;

    }


    /* LIST */

    .alof-contact-list {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 17px;

    }


    .alof-contact-item {

        gap: 9px;

    }


    .alof-contact-icon {

        width: 21px;
        height: 21px;

    }


    .alof-contact-text {

        font-size: 12px;

    }


    /* GOLD LINE */

    .alof-contact-gold-line {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alof-contact-content {

        width: calc(100% - 30px);

        padding-left: 32px;

    }


    .alof-contact-intro p {

        font-size: 15px;

    }


    .alof-contact-info h1 {

        font-size: 27px;

    }


    .alof-contact-text {

        font-size: 11px;

    }

}