* {
    box-sizing: border-box;
}
:root {
    --padding: 0 20px;
}
main {
    /* max-width: 1200px;
    width: 100%;
    margin: 6rem auto; */
    margin: 80px 0 70px;
}
.inner {
    max-width: 1200px;
    padding: 0 30px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

/* header */
header {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 80px;
    background: #fff;
    z-index: 999;
}
header .header_inner {
    max-width: 1200px;
    padding: 0 30px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
header .header_inner .left {
    display: block;
    height: 22px;
    margin-bottom: 5px;
}
header .header_inner .left img {
    display: block;
    height: 100%;
}
header .header_inner .right {
    display: flex;
    align-items: center;
    gap: 80px;
}
header .header_inner .right a {
    display: block;
    font-size: 17px;
    color: #64686F;
    font-weight: 300;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}
header .header_inner .right li.on a {
    color: #F9AB2D;
    border-bottom: 2px solid #F9AB2D;
    padding-bottom: 3px;
}

/* index */
.indexTop {
    padding: 50px 0 70px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}
.indexTop .left .index_title {
    font-size: 45px;
    font-family: 'NanumSquareExtraBold';
    padding-top: 80px;
    margin-bottom: 30px;
}
.indexTop .left .index_cont {
    font-size: 17px;
    color: #50555C;
    line-height: 1.5;
}
.indexTop img {
    display: block;
    width: 45%;
}
.index_btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.index_btns li {
    width: calc(50% - 15px);
    height: 240px;
}
.index_btns li img {
    display: block;
    width: 100%;
    height: 100%;
}
.index_btns li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    border: 1px solid #C8CCCE;
    height: 100%;
    border-radius: 20px;
    gap: 25px;
}
.index_btns li a p {
    font-size: 20px;
    color: #4374F5;
    font-family: 'NanumSquareExtraBold';
}
.index_btns li a span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: #39434A;
}
.index_btns li a span .arrow_ico {
    display: block;
    width: 23px; height: 23px;
    background: url(../img/arrow-1.png) no-repeat center/contain;
}
.mo_btns {
    display: none;
}
.mo_btns li {
    margin-bottom: 2rem;
    height: 15rem;
}
.mo_btns li a {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 2.3rem 1.5rem;
    border-radius: 1.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.mo_btns li a.risk_info {
    background-image: url(../img/img-1.png);
}
.mo_btns li a.risk_manager {
    background-image: url(../img/img-2.png);
}
.mo_btns li a.risk_case {
    background-image: url(../img/img-3.png);
}
.mo_btns li a.risk_faq {
    background-image: url(../img/img-4.png);
}
.mo_btns li a p {
    color: #fff;
    font-size: 1.8rem;
    font-family: 'NanumSquareBold';
}
.mo_btns li a span {
    color: #fff;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.5rem;
}
.mo_btns li a span .arrow_ico {
    display: block;
    width: 2rem; height: 2rem;
    background: url(../img/arrow-2.png) no-repeat center/contain;
}
/* sub */
.inner.sub {
    padding: 45px 30px 0;
}
.sub_title {
    width: fit-content;
    background: #4575F5;
    color: #fff;
    font-size: 20px;
    padding: 13px 30px;
    border-radius: 25px;
    font-family: 'NanumSquareBold';
    margin-bottom: 20px;
}
.sub_box {
    border: 1px solid #CCC4D3;
    padding: 30px;
    border-radius: 15px;
}
.sub_sub_tit {
    font-size: 19px;
    color: #4172F5;
    font-family: 'NanumSquareExtraBold';
    margin-bottom: 10px;
}
.sub_cont .point3 {
    font-size: 17px;
    color: #F9A319;
    display: inline-block;
    padding-bottom: 10px;
}
.sub_cont {
    font-size: 17px;
    color: #192838;
    display: block;
    margin-bottom: 40px;
    line-height: 1.6;
}
.sub_box .sub_cont:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 767px) {
    header {
        height: 9rem;
    }
    main {
        margin: 90px 0 40px;
    }
    .inner {
        padding: 0 2rem;
    }
    header .header_inner {
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
    }
    header .header_inner .left {
        height: 1.7rem;
    }
    .index_btns {
        display: none;
    }
    .index_btns li a img {
        width: 4rem; height: 4rem;
    }
    .index_btns li a span {
        font-size: 1.8rem;
    }
    header .header_inner .right {
        gap: 2.5rem;
    }
    header .header_inner .right a {
        font-size: 1.6rem;
    }
    .inner.sub .sub_cont {
        font-size: 1.6rem;
    }
    .indexTop {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem 0 7rem;
    }
    .indexTop .left .index_title {
        font-size: 4.5rem;
        text-align: center;
        padding-top: 0;
    }
    .indexTop .left .index_cont {
        text-align: center;
        margin-bottom: 4rem;
        font-size: 1.6rem;
    }
    .indexTop img {
        width: 85%;
    }
    .mo_btns {
        display: block;
    }
    .inner.sub {
        padding: 2rem 1.5rem 0;
    }
    .sub_title {
        font-size: 1.8rem;
    }
    .sub_box {
        padding: 2rem 1.5rem;
    }
    .sub_sub_tit {
        font-size: 1.8rem;
        line-height: 1.3;
        word-break: break-all;
    }
    .sub_cont .point3 {
        line-height: 1.3;
    }
}