body {
    font-size: 17px;
}
.progressbar {
    font-size: 0.8rem;
    font-family: "AritaM";
    color: #4F81BD;
}

.progress {
    display: flex;
    height: 0.2rem !important;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef !important;
    border-radius: 0.25rem;
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #4F81BD !important;
    transition: width .6s ease;
}
.top-logo {
    display: flex;
    align-items: center;
}
.info_header {
    font-size: 1.7rem;
    font-family: "AritaB"
}

.info_header_sub {
    font-size: 1.6rem;
    color: #152855;
    font-family: "AritaB";
    letter-spacing: -0.99px !important;
    word-break: keep-all;
}

.info_title {
    font-size: 1.1rem;
    font-weight: bold;
    padding-left: 2rem;
    padding-right: 2rem;
    font-family: "AritaM";
}

.main_header {
    font-size: 1.2rem;
    font-family: "AritaM";
    word-break: keep-all;
}

.main_header_sub {
    font-size: 1rem;
    font-family: "AritaL";
}


.main_header_point {
    font-family: "AritaSB";
    color: #4F81BD;
    font-size:1.5rem;
}

.card {
    border-radius: 0;
    border: 0;
}

.card .card-header {
    border-radius: 0;
    border-top: 2px solid rgb(19, 40, 85);
    border-left: 2px solid rgb(19, 40, 85);
    border-right: 2px solid rgb(19, 40, 85);
    border-bottom: 2px solid rgb(19, 40, 85);
    padding-left: 120px;
    padding-right: 120px;
}

.card .card-body {
    border-radius: 0;
    border-top: 3px solid rgb(154, 161, 172);
    border-left: 1px solid rgb(19, 40, 85);
    border-right: 1px solid rgb(19, 40, 85);
    padding-left: 120px;
    padding-right: 100px;
}

.myRadioBox {
    padding-left: 0;
}

.divResult {
    border: 3px solid #c0c0c0;
    border-radius: 10%;
}

/*.btn_next {
    background-color: #0A1D46 !important;
    color: #ffffff !important;
    font-family: "AritaB";
}

    .btn_next:hover {
        background-color: #ffffff !important;
        color: #0A1D46 !important;*/
        /*border: 1px solid #ffffff;*/
        /*font-family: "AritaB";
    }*/

.btn_next:hover {
    background-color: #0A1D60 !important;
}

    .option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 16px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 44px;
    width: 44px;
    transition: all 0.15s ease-out 0s;
    background: #cbd1d8;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0rem;
    outline: none;
    position: relative;
    z-index: 1000;
}

    .option-input:hover {
        background: #9faab7;
    }


    .option-input:checked::before {
        width: 38px;
        height: 40px;
        display: flex;
        /*content: '\f00c';*/
        content: '\f111';
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        align-items: center;
        justify-content: center;
        font-family: 'Font Awesome 5 Free';
    }


.main_header_point_eng {
    font-size: 0.8rem;
}

.main_middle_info {
    font-size: 1rem;
    font-family: "AritaM";
}

.main_middle_title {
    font-size: 1rem;
    font-family: "AritaM";
}

.main_middle_desc {
    font-size: 0.9rem;
    font-family: "AritaM";
}

.main_bottom {
    font-size: 1rem;
    font-family: "AritaSB";
}

.fa-star:before {
    color: #4F81BD;
    font-size: 1.3rem;
}

.radio1:checked::before {
    color: #000000 !important;
}

.radio2:checked::before {
    color: #616264 !important;
}

.radio3:checked::before {
    color: #909194 !important;
}

.radio4:checked::before {
    color: #616C85 !important;
}

.radio5:checked::before {
    color: #44709A !important;
}

.radio6:checked::before {
    color: #213F76 !important;
}

.option-input:checked:after {
    -webkit-animation: click-wave 0.3s;
    -moz-animation: click-wave 0.3s;
    animation: click-wave 0.3s;
    background: inherit;
    content: '';
    color: #ffffff;
    display: block;
    position: relative;
    z-index: 100;
}

.option-input.radio {
    border-radius: 50%;
}

    .option-input.radio::after {
        border-radius: 50%;
    }


@keyframes click-wave {
    0% {
        height: 44px;
        width: 44px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 70px;
        width: 70px;
        margin-left: -16px;
        margin-top: -16px;
        opacity: 0;
    }
}

@media only screen and (max-width: 800px) {
    .progressbar {
        font-size: 0.6rem !important;
    }
    br {
        display: none;
    }
    .option-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        position: relative;
        top: 12px;
        right: 0;
        bottom: 0;
        left: 0;
        height: 30px;
        width: 30px;
        transition: all 0.15s ease-out 0s;
        background: #cbd1d8;
        border: none;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        margin-right: 0rem;
        outline: none;
        position: relative;
        z-index: 1000;
    }

        .option-input:checked::before {
            width: 24px;
            height: 24px;
            display: flex;
            /*content: '\f00c';*/
            content: '\f111';
            font-size: 18px;
            font-weight: bold;
            position: absolute;
            align-items: center;
            justify-content: center;
            font-family: 'Font Awesome 5 Free';
        }

        .option-input:checked:after {
            -webkit-animation: click-wave 0.3s;
            -moz-animation: click-wave 0.3s;
            animation: click-wave 0.3s;
            background: rgb(19, 40, 85);
            content: '';
            display: block;
            position: relative;
            z-index: 100;
        }

        .option-input.radio {
            border-radius: 50%;
        }

            .option-input.radio::after {
                border-radius: 50%;
            }


    @keyframes click-wave {
        0% {
            height: 30px;
            width: 30px;
            opacity: 0.3;
            position: relative;
        }

        100% {
            height: 50px;
            width: 50px;
            margin-left: -14px;
            margin-top: -14px;
            opacity: 0;
        }
    }

    .info_title {
        font-size: 0.7rem;
        font-weight: bold;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .btn_prev, .btn_next {
        font-size: 0.8rem !important;
        font-weight: bold;
    }


    .div_info_title {
        padding-left: 10 !important;
        padding-right: 0 !important;
    }

    .card .card-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .card .card-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .main_header_point {
        font-family: "AritaSB";
        color: #4F81BD;
        font-size: 1rem;
    }
    .info_header {
        font-size: 1.5rem;
        font-family: "AritaB"
    }

    .info_header_sub {
        font-size: 1.3rem;
        color: #152855;
        font-family: "AritaB";
        letter-spacing:-0.99px !important;
    }

}

.bg-ap-header {
    background-color: #152855;
    color: white;
    padding-left: 100px;
    padding-right: 100px;
    height:18rem;
}

.bg-ap-body {
    background-color: #F9F8F7;
}

.bg-ap-footer {
    background-color: #F9F8F7;
    border-left: 1px solid rgb(19, 40, 85);
    border-right: 1px solid rgb(19, 40, 85);
    border-bottom: 1px solid rgb(19, 40, 85);
}

    .bg-ap-footer button {
        border-radius: 0.7rem;
    }

    .bg-ap-footer .btn-primary {
        background-color: rgb(19, 40, 85);
        color: white;
        border-color: rgb(19, 40, 85);
        font-family: "AritaM"
    }



.myRadioBox div {
    position: relative;
}

    .myRadioBox div::after {
        content: '';
        width: 100%;
        height: 2px;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(0, -100%);
        z-index: 1;
    }

    /* 라디오 연결선 */
    .myRadioBox div:nth-child(1):after {
        background-image: repeating-linear-gradient(to right, rgb(30, 30, 30), rgb(100, 100, 100)) !important;
    }

    .myRadioBox div:nth-child(2):after {
        background-image: repeating-linear-gradient(to right, rgb(131, 131, 131), rgb(179, 180, 182)) !important;
    }

    .myRadioBox div:nth-child(3):after {
        background-image: repeating-linear-gradient(to right, rgb(154, 161, 172), rgb(98, 114, 147)) !important;
    }

    .myRadioBox div:nth-child(4):after {
        background-image: repeating-linear-gradient(to right, rgb(69, 92, 135), rgb(30, 67, 123)) !important;
    }

    .myRadioBox div:nth-child(5):after {
        background-image: repeating-linear-gradient(to right, rgb(28, 76, 130), rgb(21, 92, 144)) !important;
    }

    .myRadioBox div:last-child:after {
        display: none;
    }

.container {
    /* max-width: 1000px !important; */
}

.btn_prev, .btn_next {
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 1.2rem;
    font-family: "AritaM"
}
