html,
        body {
            width: 100%;
            height: 100%;
        }

        .divExam {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .formExam {
            width: 50%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }

        input {
            margin: 5%;
        }

        .formDiv {
            width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .inputDiv {
            width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }
    </style>


    <style>
        .modal-common {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6)
        }

        .modal-common .modal-area {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }

        .modal-common .modal-area .modal-area__head {
            position: relative;
            height: 60px;
            padding: 0 30px;
            background: #0297ef;
            border-radius: 10px 10px 0 0
        }

        .modal-common .modal-area .modal-area__head h3 {
            line-height: 61px;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            font-family: NanumSquare, sans-serif
        }

        .modal-common .modal-area .modal-area__head button {
            position: absolute;
            top: 32%;
            right: 20px
        }

        .modal-news .modal-area {
            max-width: 600px;
            width: 92%
        }

        .modal-news .modal-area .modal-area__body {
            background-color: #fff;
            padding: 20px 30px 0 30px
        }

        .modal-news .modal-area .modal-area__body strong {
            font-size: 18px
        }

        .modal-news .modal-area .modal-area__body p {
            font-size: 13px
        }

        .modal-news .modal-area .modal-area__body .register-txt {
            line-height: 28px;
            margin-top: 5px
        }

        .modal-news .modal-area .modal-area__body .txt-agree {
            padding-top: 20px
        }

        .modal-news .modal-area .modal-area__body .textarea-agree {
            margin-top: 10px
        }

        .modal-news .modal-area .modal-area__body .textarea-agree textarea {
            resize: none;
            width: 100%;
            height: 138px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 12px 20px;
            font-size: 13px;
            line-height: 22px
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table {
            padding-top: 20px;
            padding-bottom: 30px
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table caption {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: -9999em;
            width: 1px;
            height: 1px
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table .radio-area .radio-item {
            position: relative;
            margin-right: 10px;
            display: inline-block;
            vertical-align: middle
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table .radio-area .radio-item:last-of-type {
            margin-right: 0
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table .radio-area .radio-item input {
            margin: 0;
            position: absolute;
            top: -40px;
            left: 0;
            display: none
        }


        .modal-news .modal-area .modal-area__body .modal-data .modal-table .radio-area .radio-item .radio-text {
            min-width: 50px;
            cursor: pointer;
            position: relative;
            margin: 0;
            padding-left: 17px;
            font-weight: 400;
            font-size: 14px;
            color: #555;
            vertical-align: middle
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table tr {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table th {
            width: 150px;
            padding: 14px 0 14px 20px;
            font-weight: 400;
            font-size: 14px;
            background-color: #f9f9f9;
            color: #555
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table td {
            padding: 14px 10px
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table .radio-area {
            font-size: 14px;
            color: #555
        }

        .modal-news .modal-area .modal-area__body .modal-data .modal-table .email-area input {
            max-width: 350px;
            width: 100%;
            padding: 10px 0 10px 12px;
            font-size: 14px;
            border: 1px solid #ced4da;
            border-radius: 3px
        }

        .modal-news .modal-area .modal-area__body .modal-data .checkbox-modal {
            display: flex;
            justify-content: flex-end;
            font-size: 13px;
            color: #555;
            margin-top: 3px
        }

        .modal-news .modal-area .modal-area__body .modal-data .checkbox-modal .checkbox-modal__check {
            margin-right: 5px
        }

        .modal-news .modal-area .modal-area__body .modal-data .checkbox-modal .checkbox-modal__check input {
            display: none
        }

        .modal-news .modal-area .modal-area__body .modal-data .checkbox-modal .checkbox-modal__check label {
            cursor: pointer;
            font-weight: 400;
            font-size: 13px;
            color: #555;
            padding-left: 18px;
            position: relative
        }

        .modal-news .modal-area .modal-area__foot {
            display: inline-block;
            width: 100%;
            height: 62px;
            background-color: #f0f0f0;
            border-radius: 0 0 10px 10px
        }

        .modal-news .modal-area .modal-area__foot .button-modal {
            text-align: center
        }

        .modal-news .modal-area .modal-area__foot .button-modal button {
            max-width: 91px;
            padding: 6px 24px;
            margin: 14px auto;
            background-color: #0297ef;
            text-align: center;
            color: #fff;
            border-radius: 5px
        }

        .modal-area .star {
            color: #ffc107
        }

        @media (max-width :768px) {
            .modal-news .modal-area {
                height: 80%;
                overflow: auto
            }

            .modal-news .modal-area__body {
                padding: 20px 18px 0 18px !important
            }

            .modal-news .modal-area__body .register-txt {
                padding-top: 10px;
                line-height: 26px;
                font-size: 14px
            }

            .modal-news .modal-area__body .textarea-agree textarea {
                padding: 15px 15px !important
            }

            .modal-news .modal-area__body strong {
                font-size: 16px !important
            }

            .modal-news .radio-area .radio-item .radio-text {
                font-size: 12px !important
            }

            .modal-news .checkbox-modal label {
                min-width: 142px
            }

            .modal-table colgroup {
                display: none
            }

            .modal-table th {
                display: block;
                width: 100% !important
            }

            .modal-table td {
                display: block;
                width: 100% !important;
                padding: 14px 5px
            }
        }

        @media (max-width :376px) {
            .radio-area .radio-item .radio-text {
                font-size: 13px !important;
                margin-right: 15px
            }
        }

        .modal-renewal .modal-area {
            max-width: 600px;
            width: 92%
        }

        .modal-renewal .modal-area .modal-area__body {
            background-color: #fff;
            padding: 20px 30px 30px 30px
        }

        .modal-renewal .modal-area .modal-area__body .img_area {
            text-align: center
        }

        .modal-renewal .modal-area .modal-area__body .txt_area {
            text-align: center
        }

        .modal-renewal .modal-area .modal-area__body .txt_area .txt01 {
            line-height: 32px;
            font-weight: 600;
            font-size: 18px;
            color: #333
        }

        .modal-renewal .modal-area .modal-area__body .txt_area .txt02 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 32px;
            font-weight: 600;
            font-size: 24px;
            color: #0297ef
        }

        .modal-renewal .modal-area .modal-area__body .txt_area .txt03 {
            line-height: 28px;
            font-weight: 400;
            font-size: 13px;
            color: #555
        }

        .modal-renewal .modal-area .modal-area__foot {
            display: inline-block;
            width: 100%;
            height: 62px;
            background-color: #f0f0f0;
            border-radius: 0 0 10px 10px
        }

        .modal-renewal .modal-area .modal-area__foot .button-modal {
            text-align: center
        }

        .modal-renewal .modal-area .modal-area__foot .button-modal a {
            display: inline-block;
            padding: 6px 24px;
            margin: 14px auto;
            background-color: #0297ef;
            text-align: center;
            color: #fff;
            border-radius: 5px
        }


        /* 분리형 단계 */
        .modal-renewal--work {
            /* 	display: none !important */
            display: block;
        }

        .modal-renewal--work .modal-area {
            max-width: 430px;
            width: 92%
        }

        .modal-renewal--work .modal-area .modal-area__head h3 br {
            display: none
        }

        .modal-renewal--work .modal-area .modal-area__head button {
            top: 50%;
            transform: translateY(-50%);
            background: #0297ef;
            border: 0;
        }

        .modal-renewal--work .modal-area .modal-area__body {
            background-color: #fff;
            padding: 30px 20px
        }

        .modal-renewal--work .modal-area .modal-area__body .txt01 {
            font-weight: 800;
            font-size: 28px;
            color: #222;
            letter-spacing: -.8px;
            text-align: center;
            word-break: keep-all
        }

        .modal-renewal--work .modal-area .modal-area__body .txt02 {
            line-height: 26px;
            margin-top: 20px;
            font-size: 16px;
            color: #555;
            text-align: center;
            letter-spacing: -.8px
        }

        .modal-renewal--work .modal-area .modal-area__body .txt02 span {
            font-weight: 700;
            color: #2277d6
        }

        .modal-renewal--work .modal-area .modal-area__body .txt03 {
            margin-top: 30px;
            font-weight: 800;
            font-size: 19px;
            color: #222;
            text-align: center;
            letter-spacing: -.5px
        }

        .modal-renewal--work .modal-area .modal-area__body .txt04 {
            padding: 18px 0;
            margin-top: 10px;
            background-color: #eee;
            border-radius: 9px;
            text-align: center
        }

        .modal-renewal--work .modal-area .modal-area__body .txt04 .tt {
            font-weight: 700;
            font-size: 18px;
            color: #2277d6;
            letter-spacing: -.2px
        }

        .modal-renewal--work .modal-area .modal-area__body .txt04 .bb {
            font-size: 14px;
            color: #666;
            letter-spacing: -.6px
        }

        .modal-renewal--work .modal-area .modal-area__body .button-modal {
            text-align: center;
            margin-top: 30px
        }

        .modal-renewal--work .modal-area .modal-area__body .button-modal button {
            max-width: 91px;
            padding: 6px 24px;
            background-color: #0297ef;
            text-align: center;
            color: #fff;
            border-radius: 5px
        }

        .modal-renewal--work .modal-area .modal-area__foot {
            display: inline-block;
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #f0f0f0;
            border-radius: 0 0 10px 10px
        }

        .modal-renewal--work .modal-area .modal-area__foot .today_chk {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%)
        }

        .modal-renewal--work .modal-area .modal-area__foot .today_chk input {
            position: absolute;
            top: 0;
            left: -9999em;
            visibility: hidden;
            width: 1px;
            height: 1px;
            opacity: 0
        }

        .modal-renewal--work .modal-area .modal-area__foot .today_chk input:checked+label::before {
            border: none;
            background: url(/popup/img/chk_sprite.png) no-repeat -20px 0
        }

        .modal-renewal--work .modal-area .modal-area__foot .today_chk label {
            cursor: pointer;
            display: inline-block;
            position: relative;
            padding-left: 25px;
            font-weight: 700;
            font-size: 15px;
            color: #666
        }

        .modal-renewal--work .modal-area .modal-area__foot .today_chk label::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url(/popup/img/chk_sprite.png) no-repeat 0 0;
            border: none
        }

        @media (max-width :500px) {
            .modal-renewal--work .modal-area .modal-area__head {
                height: inherit;
                padding: 10px 20px
            }

            .modal-renewal--work .modal-area .modal-area__head h3 {
                line-height: 28px
            }

            .modal-renewal--work .modal-area .modal-area__head h3 br {
                display: block
            }

            .modal-renewal--work .modal-area .modal-area__body .txt01 {
                line-height: 35px
            }

            .modal-renewal--work .modal-area .modal-area__body .txt02 br {
                display: none
            }
        }