:root {

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

    /* gray color */
    --color-1E1E1E: #1E1E1E;
    --color-444444: #444444;
    --color-707070: #707070;
    --color-727272: #727272;
    --color-808080: #808080;

    /* primary color */
    --color-FFE800: #FFE800;
    --color-9124FF: #9124FF;
    --color-DDC5FF: #DDC5FF;

    /* gradient color */
    --color-gr-1: linear-gradient(180deg, #FCEA4E 0%, #FDD644 100%);
    --color-gr-2: linear-gradient(180deg, #FFFFFF 11%, #FFFAC9 45%, #FFE800 100%);

    
    .bDDC5FF { background: #DDC5FF;}
    .bFFF9C1 { background: #FFF9C1;}
    
    
    
    /* ------------------------------------------------------------------------------- */

    /* box-shadow */
    --box-shadow: 1rem 1rem 0 0 rgba(0,0,0,0.1);
    --box-shadow-2: 0.5rem 0.5rem 0 0 rgba(0,0,0,0.1);

}

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

/* 공통 wrap */
.wrap {
    max-width: 1060px;
    padding: 0 4rem;
    margin: 0 auto;
}

/* section 공통 패딩 */
.section {
    padding: 15rem 0;
}

/* title 공통 */
h1.title {
    font-family: "Gasoek One", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 5rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--color-black);
    margin-bottom: 5rem;
}

/* box 테두리 공통 */
.box-outline {
    border: 2px solid var(--color-black);
    border-radius: 2rem;
    box-shadow: var(--box-shadow);
}

/* 아이콘 디폴트 */
i {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


br.mb-ver {
    display: none;
}
@media (max-width: 1200px) {

    h1.title {
        font-size: 4.8rem;
    }
    .section {
        padding: 10rem 0;
    }
    

}

@media (max-width: 767px) {
    br.mb-ver {
        display: block;
    }
    h1.title {
        font-size: 3.2rem;
    }
    .wrap {
        padding: 0 2rem;
    }
    .section {
        padding: 8rem 0;
    }

}


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

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