@charset "utf-8";

/* common */

html, body, button {
    font-family: 'NanumSquare', "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: #282A2D;
    font-weight: 700;
    font-size: 8px;
    line-height: 1;
}

/* color */

:root {
    --main-text: #282A2D;
    --main-color: #20c75a;
    --blue-bg: #ebfcec;
    --sub-text: #909090;
    --gray-bg: #F7F8FB;
    --navy-color: #2bb583;
    --sub-blue: #27cc83;
    --hover-color: #24ed6a;
    --gra01-blue: linear-gradient(180deg, #FFFFFF 0%, #cafae9 100%);
}

/* main */

.container.main {
    width: 100%;
}

/* section01 */

.main .sec01 {
    width: 100%;
    background: url(../img/img-main-bg.svg) center no-repeat;
    padding: 12rem 0;
}

.main .sec01_con {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.main .sec01_con .txt_m {
    font-size: 2rem;
    color: var(--main-color);
}

.main .sec01_con .txt_l {
    font-size: 2rem;
    line-height: 3rem;
}

.main .sec01_con .main_logo_btn {
    width: 23.1rem;
    height: 5rem;
    background: var(--main-color);
    border-radius: 8px;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: #fff;
}

.main .sec01_con .main_logo_btn:hover {
    background: var(--hover-color);
}

/* section02_plus */

.main .sec02_plus {
    width: 100%;
    padding: 10rem 0;
    background-color: #F7F8FB;
}

.main .sec02_plus_con {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
}

.main .sec02_plus_con h3 {
    font-size: 3.6rem;
    max-width: 41rem;
    width: 100%;
    padding: 2rem 0;
    background: #ECEFF8;
    border-radius: 8px;
    margin: 0 auto 6.8rem;
    text-align: center;
    color: #51535D;
}

/* section02 */

.main .sec02 {
    width: 100%;
    padding: 12rem 0;
    background-color: var(--blue-bg);
}

.main .sec02_con {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
}

.main .sec02_con .box {
    max-width: 80rem;
    height: 22.8rem;
    margin: 0 auto;
    padding: 5rem 0 5rem 10rem;
}

.main .sec02_con .box_flex {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.main .sec02_con .box_flex .txt01 {
    font-size: 2.6rem;
    font-weight: 800;
}

.main .sec02_con .box_flex .txt02 {
    font-size: 3.2rem;
    color: var(--main-color);
}

.main .sec02_con .box_flex .txt03 {
    font-size: 2rem;
    color: var(--sub-text);
}

.main .sec02_con .btm_txt {
    font-size: 2.2rem;
    line-height: 3.3rem;
    text-align: center;
}

/* section03 */

.main .sec03 {
    width: 100%;
    background-color: #fff;
    padding: 12rem 0;
}

.main .sec03_con {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.main .sec03_con h2 {
    font-size: 3.6rem;
    text-align: center;
    margin-bottom: 3rem;
}

.main .sec03_con h3 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 1rem;
}

.main .sec03_con .sub_txt {
    font-size: 2rem;
    color: var(--sub-text);
    margin-bottom: 6rem;
}

.main .sec03_con img[alt='chart'] {
    display: block;
    margin: 0 auto;
}

.main .sec03_con .table_flex {
    max-width: 99.7rem;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.main .sec03_con .table_name .line_btn {
    width: 18rem;
    height: 4.4rem;
    border-radius: 30px;
    font-size: 1.8rem;
    background-color: #fff;
    padding: 1.3rem 0;
}

.main .sec03_con .table_name .line_btn.black {
    border: 1px solid var(--main-text);
}
.main .sec03_con .table_name .line_btn.blue {
    border: 1px solid var(--main-color);
}

.main .sec03_con .table_con {
    max-width: 79.5rem;
    width: 100%;
    height: 15rem;
}

.main .sec03_con .table_con ul {
    display: flex;
    align-items: center;
}

.main .sec03_con .table_con li {
    max-width: 15.9rem;
    width: 100%;
    height: 5rem;
    border-right: 1px solid rgba(40, 42, 45, 0.1);
}

.main .sec03_con .table_con li:last-child {
    border-right: none;
}

.main .sec03_con .table_con .th li {
    background: var(--gray-bg);
    padding: 1.6rem 0;
    font-size: 1.8rem;
}

.main .sec03_con .table_con .td li {
    padding: 1.7rem 0;
    font-size: 1.8rem;
    font-weight: 700;
}

/* section04 */

.main .sec04 {
    width: 100%;
    padding-top: 13rem;
    background: var(--gra01-blue);
}

.main .sec04_con {
    position: relative;
    max-width: 120rem;
    width: 100%;
    height: 55.7rem;
    margin: 0 auto;
}

.main .sec04_con img {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 33.9rem;
}

.main .sec04_con .box {
    float: right;
    max-width: 103.1rem;
    width: 100%;
    height: 35.4rem;
    padding: 6rem 0;
}

.main .sec04_con .box p {
    font-size: 1.8rem;
    line-height: 2.7rem;
    letter-spacing: 0.02em;
    text-align: center;
}

.main .sec04_con .box p .big_txt {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 3.9rem;
}

/* section05 */

.main .sec05 {
    width: 100%;
    padding: 5.6rem 0;
    background-color: var(--gray-bg);
}

.main .sec05_con {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.main .sec05_con p {
    font-size: 2.2rem;
}

/* 모바일 */

@media (max-width:1199px) {
    .main .sec02_plus {
        padding: 12rem 2rem;
    }

    .main .sec03_con .table_flex {
        max-width: 79.5rem;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        margin: 0 auto;
    }

    .main .sec03_con .table_name {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1.2rem;
    }

    .main .sec03_con .table_con {
        margin-bottom: 2rem;
    }

    .main .sec04 {
        padding: 13rem 2rem 0;
    }
}

@media (max-width:800px) {
    .main .sec02 {
        padding: 13.6rem 2rem;
    }

    .main .sec03 {
        padding: 13.6rem 2rem;
    }
}

@media (max-width:768px) {
    /* margin */

    .mb100 {
        margin-bottom: 4rem !important;
    }

    .mb60 {
        margin-bottom: 4rem !important;
    }

    .mb40 {
        margin-bottom: 2rem !important;
    }

    .mb30 {
        margin-bottom: 1.6rem !important;
    }

    .mb20 {
        margin-bottom: 1rem !important;
    }

    /* section01 */

    .main .sec01 {
        background: url(../img/img-main-bg-m.svg) center no-repeat;
        background-size: cover;
        padding: 10rem 0;
    }

    .main .sec01_con .txt_m {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .main .sec01_con .txt_l {
        font-size: 1.6rem;
        line-height: 2.4rem;
        margin-bottom: 4rem !important;
    }

    /* section02_plus */

    .main .sec02_plus {
        padding: 7rem 1.6rem;
    }

    .main .sec02_plus_con h3 {
        font-size: 2.4rem;
        max-width: 29rem;
        width: 100%;
        padding: 1.3rem 0;
        border-radius: 8px;
        margin: 0 auto 3rem;
        text-align: center;
    }

    .main .sec02_plus_img.mobile img {
        max-width: 32.9rem;
        width: 100%;
        margin: 0 auto;
    }

    /* section02 */

    .main .sec02 {
        padding: 7rem 1.6rem;
    }

    .main .sec02_con .box {
        height: 13.6rem;
        padding: 3rem 2.8rem;
    }

    .main .sec02_con .box.mb50 {
        margin-bottom: 2rem !important;
    }
    .main .sec02_con .box.mb80 {
        margin-bottom: 4rem !important;
    }

    .main .sec02_con .box_flex {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        justify-content: center;
    }

    .main .sec02_con .box_flex img {
        width: 7.6rem;
    }

    .main .sec02_con .box_flex .txt01 {
        font-size: 1.6rem;
    }

    .main .sec02_con .box_flex .txt02 {
        font-size: 1.6rem;
    }

    .main .sec02_con .box_flex .txt03 {
        font-size: 1.4rem;
    }

    .main .sec02_con .btm_txt {
        font-size: 1.4rem;
        line-height: 2.1rem;
    }

    /* section03 */

    .main .sec03 {
        padding: 7rem 1.6rem;
    }

    .main .sec03_con h2 {
        font-size: 2.4rem;
    }

    .main .sec03_con h3 {
        font-size: 2rem;
        line-height: 3rem;
    }

    .main .sec03_con .sub_txt {
        font-size: 1.6rem;
        margin-bottom: 4rem;
    }

    .main .sec03_con .table_name .line_btn {
        width: 12rem;
        height: 3.6rem;
        font-size: 1.4rem;
        padding: 1.1rem 0;
    }

    .main .sec03_con .table_con {
        height: 14rem;
    }

    .main .sec03_con .table_con li {
        height: 4rem;
    }

    .main .sec03_con .table_con .th li {
        padding: 1.2rem 0;
        font-size: 1.6rem;
    }

    .main .sec03_con .table_con .td li {
        /* padding: 1.2rem 0; */
        font-size: 1.2rem;
        height: 5rem;
    }

    /* section04 */

    .main .sec04 {
        padding-top: 4.6rem;
        padding: 4.6rem 1.6rem 0;
    }

    .main .sec04_con {
        height: 50.7rem;
    }

    .main .sec04_con img {
        width: 22.5rem;
        height: 19.9rem;
    }

    .main .sec04_con .box {
        max-width: 28rem;
        width: 100%;
        height: 40.2rem;
        padding: 2.8rem;
    }

    .main .sec04_con .box p {
        font-size: 1.4rem;
        line-height: 2.24rem;
    }

    .main .sec04_con .box p .big_txt {
        font-size: 2rem;
        line-height: 3.2rem;
    }

    /* section05 */

    .main .sec05 {
        padding: 5rem 0;
    }

    .main .sec05_con p {
        font-size: 1.6rem;
    }

    .main .sec05_con p.mb20 {
        margin-bottom: 2rem !important;
    }
}

@media (max-width:400px) {
    .main .sec04_con img {
        width: 17.6rem;
        height: 15.6rem;
    }
}