:root {

    /* common color */
    --color-white: #fff;
    --color-black: #000;

    /* gray color */
    --color-0A0A0A: #0A0A0A;
    --color-232323: #232323;
    --color-3D3D3D: #3D3D3D;
    --color-666: #666;
    --color-999: #999;

    /* primary color */
    --color-183829: #183829;
    --color-2E613A: #2E613A;
    --color-2D7859: #2D7859;
    --color-397F5A: #397F5A;
    --color-4C9B70: #4C9B70;

    /* secondary color */
    --color-FEF6C8: #FEF6C8;
    --color-FEF6C8: #E8DFB1;
    --color-FEF6C8: #EDC194;
    --color-FEF6C8: #A98A72;

    /* palette color */
    --color-FA4247: #FA4247;
    --color-495F53: #495F53;
    --color-155270: #155270;
    --color-155270: #155270;

    /* gradient color */
    --color-gr100: linear-gradient(90deg, rgba(45,120,89,1) 0%, rgba(34,96,67,1) 55%, rgba(24,56,41,1) 100%);


    /* ------------------------------------------------------------------------------- */

    
    /* padding */
    --padding: 0 4.4rem;

}


.wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.title h1 {
    font-size: 5.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--color-white);
}
.title p {
    font-size: 2.4rem;
    line-height: 1.3;
    color: var(--color-999);
}

i {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.tab-area {
    margin-top: 4.8rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.1rem;
}
.tab-area a {
    padding: 2rem;
    font-size: 2.4rem;
    background-color: var(--color-232323);
    color: var(--color-999);
    text-align: center;
    transition: .3s;
}
.tab-area li:hover a {
    background-color: var(--color-3D3D3D);
}
.tab-area li.active a {
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-2D7859);
}

@media (max-width: 1200px) {

    .title {
        gap: 1.2rem;
    }
    .title h1 {
        font-size: 4.8rem;
    }
    .title p {
        font-size: 2rem;
    }

}

@media (max-width: 767px) {

    :root {
        /* padding */
        --padding: 0 2rem;
    }
    .title h1 {
        font-size: 3.2rem;
    }
    .title p {
        font-size: 1.6rem;
    }

}


/* 애니메이션 */
@keyframes bounce1 {
    50% {
      transform: translate(0, 0%);
  }
}

@keyframes add-chart1 {
	100%	{transform: translateY(0px);opacity:1;}
}