#ci{
        background-color: #FFF;
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 100vw;
    }
    #ci p{
        font-family: var(--font-sans);
    }
    #ci .ci-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .ci-wrap .ci-header{
        position: relative;
        width: 100%;
        min-height: 100svh;
        max-height: 100lvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        gap: 6.9725rem;
        padding-bottom: 11.0875rem;
    }

    .ci-wrap .ci-header::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: .62;
        background-color: #000;
        z-index: 1;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #000 43%, #000002 61%, #030109 69%, #080216 75%, #0F0527 80%, #18083F 84%, #240B5C 88%, #31107E 92%, #4115A6 96%, #521BD2 99%, #5B1EE8 100%);
    }
    .ci-wrap .ci-header::after{
        content: '';
        display: block;
        width: 100%;
        height: .6875rem;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(90deg, #000 0%, #671AEB 41.83%, #F1E5FF 97.6%);
    }
    .ci-wrap .ci-header>img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        z-index: 0;
    }
    .ci-wrap .ci-header .header-info {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: calc(16.765rem + var(--header-height));
        gap: .8125rem;
    }
    
    .ci-wrap .ci-header p{
        color: var(--white-color);
        text-align: center;
        line-height: 100%;
        letter-spacing: -0.03125rem;
        z-index: 1;
    }
    .ci-wrap .ci-header p.eng {
        font-size : var(--font-size-24);
        font-weight: 500;
    }
    .ci-wrap .ci-header p.kor {
        font-size : var(--font-size-36);
        font-weight: 700;
    }
    .ci-wrap .ci-header .logo-info {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 1;
        gap: 4.875rem;
    }
    .ci-wrap .ci-header .logo-info > img {
        width: 16.875rem;
        height: 11.07706rem;
        object-fit: cover;
    }

    .ci-wrap .ci-header .logo-info>.ci-header-text p {
        font-size: var(--font-size-24);
        font-style: normal;
        font-weight: 400;
        line-height: 160%; /* 2.4rem */
        letter-spacing: -0.03125rem;
        text-align: start;
    }

    .ci-wrap .ci-header .logo-info>.ci-header-text strong {
        color: #FFF;
        font-size: var(--font-size-36);
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 2.25rem */
        letter-spacing: -0.03125rem;
    }

    .ci-wrap .ci-header .logo-info>.ci-header-text {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .ci-wrap .ci-header svg{
        width: 2rem;
        height: 2rem;
        z-index: 1;
        position: absolute;
        bottom: 3.8125rem;
        animation: infinity 2s ease-in-out infinite;
    }
    @keyframes infinity {
        0% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-1rem)
        }

        100% {
            transform: translateY(0)
        }
    }
    .ci-wrap>.ci-about {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12.5rem 20.075rem;
        max-width: 1920px;

        margin: 0 auto;
        width: 100%;
        gap: 7.5rem;
    }

    .ci-wrap>.ci-about>.about-title {
        display: flex;
        flex-direction: row;
        gap: 7.485rem;
        padding-left:1.65rem;
        width: 100%;
    }

    .ci-wrap>.ci-about>.about-title>.title {
        display: flex;
        flex-direction: row;
        gap: 1.25rem;
    }

    .ci-wrap>.ci-about>.about-title>.title>p {
        font-size: var(--font-size-32);
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 2rem */
        letter-spacing: -0.03125rem;
        display: flex;
        margin-left: -1.5rem;
    }

    .ci-wrap>.ci-about>.about-title>.title>svg {
    }

    .ci-wrap>.ci-about>.about-title>.content>p {
        font-size: var(--font-size-20);
        font-style: normal;
        font-weight: 400;
        line-height: 170%; /* 2.125rem */
        letter-spacing: -0.03125rem;
    }


    .ci-logo-wrap .ci-wrap>.ci-about>.ci-logo-wrap>.info {
        display: flex;
        flex-direction: row;
    }

    .ci-logo-wrap .ci-wrap>.ci-about>.ci-logo-wrap {
        display: flex;
        flex-direction: column;
    }

    .ci-wrap>.ci-about>.ci-logo-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* padding: 20.065rem; */
    }

    .ci-wrap>.ci-about>.ci-logo-wrap>.info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-left: 2rem;
    }


    .ci-wrap>.ci-about>.ci-logo-wrap>.ci-img {
        width: 100%;
        position: relative;
    }
    .ci-wrap>.ci-about>.ci-logo-wrap>.ci-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ci-logo-color {
        background: #F5F5F5;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 2.125rem;
        padding: 4.3125rem 20rem;
    }
    .ci-logo-color img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 25.25rem;
    }
    .ci-color-system {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 13.6875rem;
        gap: 7.5rem;
    }

    .ci-color-system>.system-title {
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;
    }

    .ci-color-system>.system-title>p {
        font-size: var(--font-size-32);
        font-weight: 400;
        line-height: 100%; /* 2rem */
        letter-spacing: -0.03125rem;
        margin-left: -1rem;
    }

    .ci-color-system>.color-list {
        display: flex;
        gap: 5rem;
    }
    .ci-color-system>.color-list strong {
        font-size: var(--font-size-30);
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 2.625rem */
        letter-spacing: -0.03125rem;
    }

    .ci-color-system>.color-list>div {
        display: flex;
        flex-direction: column;
        gap: .625rem;
        align-items: center;
        text-align: center;
    }

    .ci-color-system>.color-list p {
        font-size: var(--font-size-20);
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 1.25rem */
        letter-spacing: -0.03125rem;
    }

    .gray>.box {
        background: #DEDEDE;
        width: 8.75rem;
        height: 8.75rem;
    }

    .purple>.box {
        background: var(--primary-color);
        width: 8.75rem;
        height: 8.75rem;
    }
    .black>.box{
        background: #000;
        width: 8.75rem;
        height: 8.75rem;
    }
    .d1{
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }
    span.about-line{
        width: 3.75rem;
        height: 0.25rem;
        transform: rotate(-65deg);
        background-color: var(--primary-color);
    }
    .ci-wrap>.ci-about>.about-title>.title .about-line{
        top: .5rem;
        position: relative;
    }
    @media screen and (max-width: 767.9px) {
        .ci-wrap .ci-header{
            gap: 9.3725rem;
        }
        .ci-wrap .ci-header>img{
            object-position: 30%;
        }
        .ci-wrap .ci-header .header-info{
            padding-top: calc(2.8125rem + var(--header-height));
            gap: 0;
        }
        .ci-wrap .ci-header p.eng{
            font-size: var(--font-size-16);
            line-height: 150%;
        }
        .ci-wrap .ci-header p.kor{
            font-size: var(--font-size-25);
            line-height: 140%;
        }
        .ci-wrap .ci-header .logo-info{
            flex-direction: column;
            padding: 0 2.55rem;
            gap: 1.5rem;
            align-items: start;
        }
        .ci-wrap .ci-header .logo-info > img{
            width: 6.65625rem;
            height: 4.36931rem;
        }
        .ci-wrap .ci-header .logo-info>.ci-header-text{
            gap:1rem;
        }
        .ci-wrap .ci-header .logo-info>.ci-header-text strong{
            font-size: var(--font-size-16);
        }
        .ci-wrap .ci-header .logo-info>.ci-header-text p{
            font-size: var(--font-size-14);
            line-height: 150%;
        }
        .ci-wrap .ci-header svg{
            bottom : 5.435rem;
        }
        .ci-wrap>.ci-about{
            padding: 2.5rem 15rem;
            gap:3rem;
        }
        .ci-wrap>.ci-about>.about-title{
            flex-direction: column;
            gap:1.5rem;
            padding-left: 0;
            align-items: start;
        }
        .ci-wrap>.ci-about>.about-title>.title>svg{
            width: 1.5rem;
            height: 2.125rem;
        }
        .ci-wrap>.ci-about>.about-title>.title{
            gap:.375rem;
        }
        .ci-wrap>.ci-about>.about-title>.title>p{
            font-size: var(--font-size-16);
        }
        .ci-wrap>.ci-about>.about-title>.content>p{
            font-size: .8125rem;
            line-height: 190%;
        }
        .ci-wrap>.ci-about>.ci-logo-wrap>.ci-img{
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .ci-logo-color{
            padding: 2.5rem 1rem;
            gap: 1.5rem;
            flex-direction: column;
            align-items: center;
        }
        .ci-logo-color img{
            border-radius: 2px;
        }
        .ci-color-system{
            padding: 3.75rem 2rem;
            gap: 3rem;
        }
        .ci-color-system>.system-title{
            gap: .3875rem;
        }
        .system-title>svg {
            width: 1.5rem;
            height: 1.5rem;
        }
        .ci-color-system>.system-title>p{
            font-size: var(--font-size-16);
        }
        .gray>.box{
            width: 3rem;
            height: 3rem;
        }
        .purple>.box{
            width: 3rem;
            height: 3rem;
        }
        .black>.box{
            width: 3rem;
            height: 3rem;
        }
        .ci-color-system>.color-list{
            gap: .875rem;
            padding-bottom: 1.25rem;
        }
        .ci-color-system>.color-list strong{
            font-size: var(--font-size-16);
            line-height: 100%;
        }
        .ci-color-system>.color-list p{
            font-size: var(--font-size-12);
        }
    }
    @media screen and (max-width: 767.9px) {
        .ci-wrap>.ci-about>.about-title>.title .about-line{
            top: 0;
        }
        .ci-wrap>.ci-about>.about-title>.title>p{
            margin-left: 0;
        }
        .ci-wrap>.ci-about>.about-title>.title{
            align-items: center;
        }
        .ci-color-system>.system-title>p{
            margin-left: 0;
        }
        span.about-line{
            width: 1.5rem;
            height: .125rem;
        }
        .ci-wrap>.ci-about{
            padding: 2.5rem 1rem;
            gap:3rem;
        }
        
    }