@charset "UTF-8";

/*StyleSheet No1 Admin-Manager*/
/*20161123*/
/*writed, KKh*/
/*
@import url(http://fonts.googlrightareaeapis.com/earlyaccess/nanumgothic.css);
@import url(https://fonts.googletableTitleLabellistViewArea apis.com/css?family=Play);managerListCount
*/
/*공통영역*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css?family=Exo+2');
.gooey{
    background-image: linear-gradient(120deg, #34e0f0 0%, #b400ff 100%);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    width: 80px;
    height: 80px;
    animation: morph 3s linear infinite;
    transform-style: preserve-3d;
    outline: 1px solid transparent;
    will-change: border-radius;
    margin: 20px auto;
}

.gooey:before,
.gooey:after{
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    box-shadow: 0px 0px 1px rgba(0, 102, 255, 0.41);
    will-change: border-radius, transform, opacity;
    animation-delay: 200ms;
    background-image: linear-gradient(120deg, rgba(0,67,255,.35) 0%, rgba(0,103,255,.1) 100%);
}

.gooey:before {
    animation: morph 3s linear infinite;
    opacity: .51;
    animation-duration: 1.5s;
}

.gooey:after{
    /*   animation: morph 3s linear infinite;
  animation-delay: 400ms; */
    opacity: .89;
    content: "VODA";
    line-height: 80px;
    text-indent: 0px;
    color: #ffffff;
}

@keyframes morph{
    0%,100%{
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
        opacity: .89;
        transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
        transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
}

@keyframes fadeIn{
    100%{
        transform: scale(1.03);
        opacity: 0;
    }
}

@media all  {
    @media only screen and (max-width: 1600px) {
        html {
            overflow-x: auto;
            font-size: 8px;
        }
    }

    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    button.blue { display: inline-block; }
    div.ui-datepicker {  font-size:10px; }

    modal {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(5, 5, 5, 0.5);
        overflow-y: auto;
        z-index: 10000;
    }

    modal.on,
    modal.active { display: block; }

    modal
    .modal_cont {
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        top: 50%;
        left: 50%;
        max-width: 56rem;
        max-height: 108rem;
        margin-top: 0 !important;
        padding: 4rem var(--space-el-x-lg);
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
    }

    modal
    .modal_cont
    li.btn_wrap {
        justify-content: flex-end;
        margin-top: var(--space-el-x-lg);
    }

    modal
    .modal_cont
    input[type="text"] {
        padding-top: var(--space-el-x-sm);
        padding-bottom: var(--space-el-x-sm);
    }

    .spiner{
        position: fixed;
        top: 45%;
        left : 49%;
        width: 50px;
        height: 50px;
        display: none;
        border: 5px solid #14A697;
        border-color: #14A697 transparent transparent;
        border-radius: 50%;
        animation : spin 0.5s linear infinite;
        z-index: 999;
    }

    wrapper {
        width: 100%;
        height: 100%;
        perspective: 10000px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: rgba(255,255,255,0.9);
        display: none;
    }

    wrapper:before {
        content: '사용자 확인중';
        position: absolute;
        top: 58%;
        left: 50%;
        color: #F23847;
        font-size: 14px;
        font-weight: 700;
        transform: translateX(-50%);
    }

    wrapper.type2:before {
        position: absolute;
        top: 57%;
        left: 156px;
        content: '';
        color: #F23847;
        font-size: 14px;
        font-weight: 700;
    }

    loader {
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        animation-name: load;
        animation-duration: 3s;
        animation-delay: 0.0s;
        animation-iteration-count: infinite;
        transform-style: preserve-3d;
        animation-timing-function: ease-in-out;
        z-index: 999;
    }

    loader.type2 {
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 40%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        animation-name: load;
        animation-duration: 3s;
        animation-delay: 0.0s;
        animation-iteration-count: infinite;
        transform-style: preserve-3d;
        animation-timing-function: ease-in-out;
        z-index: 999;
    }


    overlay {
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        width: 100%;
        height: 0;
        background-color: #F23847;
    }

    loader side {
        display: block;
        width: 100%;
        height: 100%;
        border: 2px solid #F23847;
        box-sizing: border-box;
        background-color: transparent;
        margin-top: -100%;
    }

    loader side:nth-child(1) {
        margin-top: 0%;
        transform: translateZ(25px);
    }

    loader side:nth-child(2) {
        transform: rotateY(90deg);
        margin-left: -50%;
    }

    loader side:nth-child(3) {
        transform: rotateY(90deg);
        margin-left: 50%;
    }



    loader side:nth-child(4) {
        transform: translateZ(-25px);
    }



    @keyframes load {
        0% {transform:rotateY(0deg) rotateX(0deg);}
        80% {transform:rotateY(360deg) rotateX(360deg);}
        100% {transform:rotateY(360deg) rotateX(360deg);}
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        padding: 1.8rem var(--space-el-sm);
        background-color: var(--color-gray05);
    }

    table
    td {
        padding: var(--space-el-md) var(--space-el-sm);
        text-align: center;
        border: 1px solid;
        border-color: transparent transparent var(--color-gray04) transparent;
    }

    div.alwaysNav {
        display: inline-block;
        position: fixed;
        bottom: 20px;
        right: 50%;
        width: auto;
        height: auto;
        background-color: rgba(51,51,51,0.5);
        z-index: 10;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        cursor: pointer;
        display: none;
    }

    div.alwaysNav
    span {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    div.alwaysNav
    span
    i {
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 30px;
        color: #ffffff;
        line-height: 35px;
    }


    /*modal*/
    modal.viewsessions {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 11;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.viewsessions.active {
        display: block;
    }

    .examhistory .modal_cont {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-lg);
        max-width: 115.4rem;
    }

    .examhistory .historytitle {
        display: flex;
        justify-content: space-between;
    }

    .examhistory
    .historyarea
    .historydataarea {
        overflow-y: auto;
    }

    .examhistory
    .historyarea
    tr:first-of-type {
        position: sticky;
        top: -0.4px;
        z-index: 100;
    }

    modal.ratiodown {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 11;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.ratiodown.active {
        display: block;
    }

    .updateSetting
    .modal_cont {
        max-width: 64rem;
    }

    modal.updateSetting
    div.updateSettingArea.w800 {
        width: 900px;
    }

    div.updateSettingTitle
    span.closebtn {
        display: inline-block;
        position: absolute;
        width: auto;
        height: 60px;
        font-size: 30px;
        padding-right: 10px;
        top: 0;
        right: 0;
        cursor: pointer;
    }

    .updateSetting
    .updateSettingArea
    .updateSettingInputArea {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-sm);
        margin-top: var(--space-el-lg);
    }

    modal.updateSetting
    div.updateSettingArea
    ul.updateSettingInputArea.sessions {
        width: 900px;
        height: 500px;
        overflow: hidden;
        overflow-y: scroll;
        padding-bottom: 5px;
        text-align: center;
    }

    .updateSetting
    .updateSettingArea
    .updateSettingInputArea
    li:not(.btn_wrap) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-el-x-sm);
    }

    .updateSetting
    .updateSettingArea
    .updateSettingInputArea
    .check_wrap {
        justify-content: flex-end;
        align-items: center;
    }

    .updateSetting
    .updateSettingArea
    .updateSettingInputArea
    .btn_wrap {
        margin-top: 2rem;
    }

    .updateSetting
    .updateSettingArea
    .updateSettingInputArea
    .btn_wrap
    > div {
        margin-right: auto;
    }

    .updateSetting
    .updateSettingArea
    .updateSettingInputArea
    li:not(.btn_wrap, .check_wrap)
    label {
        flex: 1 0 100%;
    }

    .updateSetting .settingLabel {
        display: flex;
        align-items: center;
    }

    .updateSetting input[type="text"] {
        flex: 1 1 24rem;
    }

    .updateSetting select {
        flex: 1 1 14rem;
    }

    .updateSetting li .btn_wrap { flex: 1 0 100%; }

    .updateSetting li .btn_wrap .cm_btn { flex: 1 0 auto; }

    .updateSetting li .btn_wrap .cm_btn.on {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    modal.updateSetting
    div.updateSettingArea
    ul.updateSettingInputArea
    li
    p.label {
        display: inline-block;
        float: left;
        width: 125px;
        height: auto;
        text-align: center;
        color: #0064BA;
        font-size: 14px;
        font-weight: 500;
    }

    modal.updateSetting
    div.updateSettingArea
    ul.updateSettingInputArea
    li
    p.label.w200 {
        width: 200px;
    }

    modal.updateSetting
    div.updateSettingArea
    ul.updateSettingInputArea
    li
    p.label.cont {
        color: #323232;
        height: 22px;
        font-size: 12px;
    }

    modal.bioanswer {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 11;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.bioanswer.active {
        display: block;
    }

    modal.bioanswer
    form.bioanswerSettingArea {
        display: inline-block;
        position: relative;
        background-color: #ffffff;
        width: 500px;
        height: auto;
        margin: 100px auto;
        z-index: 8;
        padding: 5px;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.title {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        padding: 10px;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #323232;
        color: #323232;
        font-size: 20px;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.listtitle {
        float: left;
        font-size: 15px;
        color: #888888;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.listtitle
    span.userbtn {
        width: 90%;
        height: auto;
        float: left;
        font-size: 14px;
        color: #ffffff;
        background-color: #4778C7;
        border: 1px solid 4778C7;
        padding: 1px;
        cursor: pointer;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.listtitle
    input {
        width: 90%;
        text-align: center;
        padding: 1px;
        vertical-align: top;
        border: 1px solid #d9d9d9;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.title
    span.closebioanswer {
        position: absolute;
        top: 10px;
        right: 10px;
        float: right;
        width: auto;
        height: auto;
        font-size: 20px;
        cursor: pointer;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    ul {
        float: left;
        width: 100%;
        height: auto;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    ul
    li {
        float: left;
        width: 100%;
        height: auto;
        margin: 5px auto;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    ul
    li
    label {
        float: left;
        width: 100%;
        height: auto;
        text-align: left;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    ul
    li
    textarea {
        float: left;
        width: 100%;
        height: auto;
        border: 1px solid #d9d9d9;
        resize: none;
        padding: 5px;
        font-size: 15px;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    ul
    li
    input[type="text"] {
        float: left;
        width: 49%;
        height: auto;
        border: 1px solid #d9d9d9;
        resize: none;
        padding: 5px;
        font-size: 15px;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    ul
    li
    select {
        float: right;
        width: 49%;
        height: auto;
        border: 1px solid #d9d9d9;
        resize: none;
        padding: 4px;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.addicon {
        float: left;
        width: auto;
        height: auto;
        color: #4778C7;
        margin-top: 3px;
        cursor: pointer;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.deleteicon {
        float: right;
        width: auto;
        height: auto;
        border: 1px solid #D53E4F;
        color: #D53E4F;
        margin-top: 3px;
        padding: 0 5px 0 5px;
        cursor: pointer;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.answerdelete {
        float: right;
        width: auto;
        height: auto;
        border: 1px solid #D53E4F;
        color: #D53E4F;
        padding: 0 5px 0 5px;
        cursor: pointer;
        font-size: 12px;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.answerbtn {
        float: right;
        width: 100%;
        height: auto;
        border: 1px solid #4778C7;
        margin-top: 30px;
        cursor: pointer;
        background-color: #4778C7;
        padding: 5px;
        color: #ffffff;
    }

    modal.bioanswer
    form.bioanswerSettingArea
    span.loadbtn {
        float: right;
        width: auto;
        height: auto;
        border: 1px solid #4778C7;
        cursor: pointer;
        background-color: #ffffff;
        padding: 5px 10px 5px 10px;
        color: #4778C7;
    }

    modal.findEmail {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 3;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.findEmail.active {
        display: block;
    }

    modal.findEmail
    div.findEmailArea {
        display: inline-block;
        position: relative;
        background-color: #ffffff;
        min-width: 300px;
        max-width: 375px;
        height: auto;
        z-index: 8;
    }

    modal.findEmail
    div.findEmailArea
    ul.findEmailInputArea {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        width: 100%;
        height: auto;
        padding: 10px;
    }

    modal.findEmail
    div.findEmailArea
    ul.findEmailInputArea
    li {
        display: inline-block;
        width: 100%;
        margin: 3px auto;
        height: auto;
        font-size: 14px;
        font-weight: 300;
    }

    modal.findEmail
    div.findEmailArea
    ul.findEmailInputArea
    li
    label.findEmailLabel {
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #333333;
        font-size: 15px;
        height: auto;
        line-height: 25px;
        font-weight: 500;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 0 1px 0;
        padding-bottom: 10px;
    }

    modal.findEmail
    div.findEmailArea
    div.findEmailTitle {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 30px;
        float: left;
        color: #222222;
        line-height: 30px;
        text-align: center;
        text-indent: 10px;
        font-size: 15px;
        font-weight: 500;
        background-color: #fafafa;
        border-style: solid;
        border-color: #888888;
        border-width: 0 0 1px 0;
    }

    modal.findEmail
    div.findEmailArea
    ul.findEmailInputArea
    li
    label.findEmailInputLabel {
        display: inline-block;
        float: left;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: right;
        color: #333333;
        font-size: 15px;
        font-weight: 500;
    }

    modal.findEmail
    div.findEmailArea
    ul.findEmailInputArea
    li
    input[type="text"] {
        display: inline-block;
        float: center;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: left;
        color: #333333;
        font-size: 15px;
        text-indent: 10px;
        border: 1px solid #d9d9d9;
        outline: none;
    }

    /* 비밀번호 찾기 */
    .findPassword
    .findPasswordArea {
        max-width: 48.8rem;
    }

    .findPassword
    .findPasswordArea
    .findPasswordInputArea {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-md);
        margin-top: 2rem;
    }

    .findPassword
    .findPasswordArea
    .findPasswordInputArea
    li
    .findPasswordLabel {
        padding: 1rem 2.8rem;
        text-align: center;
        background-color: var(--color-gray05);
        border-radius: 4px;
    }

    .findPassword
    .findPasswordArea
    .findPasswordInputArea
    li
    .findPasswordLabel
    strong {
        display: block;
        margin-top: var(--space-el-xx-sm);
    }

    .findPassword
    .findPasswordArea
    .findPasswordInputArea
    li
    .findPasswordInputLabel:first-of-type { margin: var(--space-el-lg) 0 var(--space-el-md); }

    .findPassword
    .findPasswordArea
    .findPasswordInputArea
    li
    .searchpw_btn { margin-top: var(--space-el-x-lg); }

    .findPassword
    .findPasswordArea
    .findPasswordInputArea
    li
    button {
        width: 100%;
        height: 6rem;
    }

    modal.editor {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 3;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.editor.active {
        display: block;
    }

    .testSummaryInfo
    .modal_cont {
        max-width: 68.4rem;
    }

    modal.testSummaryInfo
    form
    span.itemLabel
    i {
        text-align: left;
        font-size: 12px;
        color: #0192D1;
    }

    .testSummaryInfo
    .modalTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-el-lg);
    }

    .testSummaryInfo
    .modalTitle
    strong { margin: 0 auto; }

    modal.testSummaryInfo
    form
    div.subArea {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        border: 0px solid red;
        text-align: left;
    }

    modal.testSummaryInfo
    form
    div.modalTitle
    span {
        font-size: 20px;
        font-weight: 500;
        color: #888888;
    }

    modal.testSummaryInfo
    form
    ul {
        margin-bottom: var(--space-el-x-lg);
        border-top: 1px solid var(--color-gray02);
    }

    .testSummaryInfo
    ul
    li
    .contLabel {
        width: 14rem;
        line-height: 4.8rem;
        text-align: center;
        background-color: var(--color-gray05);
    }

    modal.testSummaryInfo
    form
    ul
    li
    span.contLabelItem {
        display: inline-block;
        float: left;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #333333;
        font-size: 18px;
        font-weight: 700;
        text-align: left;
    }

    modal.testSummaryInfo
    form
    ul
    li
    span.contLabelItemTitle {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        padding: 10px;
        color: #333333;
        font-size: 16px;
        font-weight: 300;
    }

    modal.testSummaryInfo
    form
    ul
    li
    span.contLabelItemPrice {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        padding: 10px;
        color: #333333;
        font-size: 16px;
        font-weight: 300;
    }

    modal.testSummaryInfo
    form
    ul
    li
    span.contLabelItemTime {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        color: #333333;
        padding: 10px;
        font-size: 16px;
        font-weight: 300;
    }

    .testSummaryInfo
    ul
    li
    .contTitle {
        flex-grow: 1;
        padding: var(--space-el-sm) var(--space-el-md);
    }

    modal.testSummaryInfo
    form
    ul
    li
    span.cost {
        display: inline-block;
        position: relative;
        float: left;
        color: #333333;
        font-size: 15px;
        text-align: right;
        padding-right: 10px;
        height: 40px;
        line-height: 40px;
    }

    modal.testSummaryInfo
    form
    ul
    li.summaryTitleArea {
        display: inline-block;
        float: left;
        vertical-align: top;
        width: 100%;
        height: auto;
        padding: 0;
    }

    .testSummaryInfo
    ul
    .summaryContArea {
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-gray04);
    }

    modal.testSummaryInfo
    form
    ul
    li.summaryContArea.costArea {
        border: 1px solid #D9D9D9;
        margin-top: 10px;
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemTitle
    span {
        display: inline-block;
        float: left;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #333333;
        font-weight: 300;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemCont {
        background-color: #fafafa;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemCont
    span {
        display: inline-block;
        float: left;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #333333;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemCont
    span.itemCont {
        font-weight: 500;
        font-size: 13px;
        color: #222222;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemTotal {
        background-color: #fafafa;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 1px  0 0 0;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemTotal
    span {
        display: inline-block;
        float: left;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
    }

    modal.testSummaryInfo
    form
    ul.summaryItemArea
    li.summaryItemTotal
    span.itemCont {
        font-weight: 500;
        font-size: 13px;
        color: #222222;
    }

    modal.testSummaryInfo
    form
    div
    i {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        float: right;
        width: auto;
        height: auto;
        font-size: 30px;
        color: #333333;
        cursor: pointer;
    }

    .testSummaryInfo
    .checkSummary {
        display: block;
        margin-bottom: var(--space-el-md);
        color: var(--color-subRe01);
        text-align: center;
    }

    .testSummaryInfo
    ul
    .summaryContArea
    span
    input {
        padding: 0;
        background-color: #fff !important;
        border: 0;
    }

    modal.testSummaryInfo
    form
    ul
    li.summaryContArea
    input.summaryDate {
        width: auto;
        height: 38px;
        border: 0px solid #ffffff;
    }

    modal.testSummaryInfo
    form
    ul
    li.summaryContArea
    span.priod {
        display: inline;
        float: left;
        width: auto;
        height: auto;
    }

    modal.testSummaryInfo
    form
    div.summaryContCost {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        text-align: center;
    }

    modal.testSummaryInfo
    form
    div.summaryContCost
    span.totalCost {
        display: inline-block;
        float: left;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 40px;
        color: #4778C7;
    }

    modal.testSummaryInfo
    form
    div.summaryContCost
    span.totalCostTax {
        display: inline-block;
        float: left;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 13px;
        color: #979797;
    }

    .testSummaryInfo
    .cm_btn_pri {
        width: 100%;
        height: 5.6rem;
    }

    .sendEmail
    .mailEditorArea {
        max-width: 117.2rem;
    }

    modal.sendEmail
    div.mailEditorArea
    div.mailEditorHistoryArea
    span.recentFormIcon {
        display: inline-block;
        width: 100%;
        height: 55px;
        line-height: 20px;
        color: #C1C1C1;
        margin-bottom: 5px;
        overflow: hidden;
        text-align: left;
        font-size: 13px;
    }

    modal.sendEmail
    div.mailEditorArea
    div.mailEditorHistoryArea
    span.recentFormIcon
    span.recentIcon {
        display: inline-block;
        float: left;
        width: 45px;
        height: 45px;
        color: #C1C1C1;
        border: 1px solid #C1C1C1;
        border-radius: 100%;
        background-color: #2D2D2D;
        margin: 5px;
    }

    modal.sendEmail
    div.mailEditorArea
    div.mailEditorHistoryArea
    span.recentFormIcon
    span.recentIcon
    i {
        display: inline-block;
        font-size: 30px;
        color: #C1C1C1;
        margin: 5px;
    }

    modal.sendEmail
    div.mailEditorArea
    div.mailEditorForm
    span.sendingType
    input[type="radio"] {
        display: inline-block;
        float: left;
        width: 15px;
        height: 35px;
        line-height: 35px;
        margin-right: 5px;
    }

    modal.sendEmail
    div.mailEditorArea
    div.mailEditorForm
    input.sendingDate {
        display: inline-block;
        float: left;
        width: 100px;
        height: 35px;
        line-height: 35px;
        margin-left: 10px;
        text-align: center;
    }

    modal.sendEmail
    div.mailEditorArea
    div.mailEditorForm
    select.sendingTime {
        display: inline-block;
        float: left;
        width: 50px;
        height: 35px;
        line-height: 35px;
        margin-left: 10px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }

    .sendEmail
    .mailEditorArea
    .mailEditorForm
    .emailEditor {
        width: 100%;
        height: 41rem;
        padding: var(--space-el-x-sm) var(--space-el-md);
        border: 1px solid var(--color-gray03);
        border-radius: 4px;
        resize: none;
    }

    .sendmodal_area
    .modal_cont {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-el-lg);
    }

    .sendmodal_area
    .shorting_word {
        display: block;
        width: 100%;
    }

    .sendmodal_area
    .modal_cont
    form {
        flex: 1;
        display: flex;
        gap: var(--space-el-lg);
    }

    .sendmodal_area
    .mailEditorTitleArea {
        flex: 1 0 100%;
    }

    .sendmodal_area
    label {
        display: block;
        width: 100%;
        margin-bottom: var(--space-el-x-sm);
    }

    .sendmodal_area
    .list_wrap {
        overflow-y: auto;
        height: 44.7rem;
        padding: var(--space-el-x-sm) var(--space-el-sm);
        background-color: var(--color-gray05);
        border: 1px solid var(--color-gray04);
        border-radius: 4px;
    }

    .sendmodal_area
    .mailSendinglist
    .list_wrap {
        min-width: 10rem;
        height: 49.5rem;
        margin-bottom: var(--space-el-x-sm);
        text-align: center;
    }

    .sendmodal_area
    .mailEditorHistory {
        width: 18rem;
        margin-bottom: var(--space-el-md);
    }

    .sendmodal_area
    .mailEditorHistory
    .recentHistory {
        display: block;
        padding: var(--space-el-xx-sm);
        border-bottom: 1px solid var(--color-gray04);
    }

    .sendmodal_area
    .mailEditorHistory
    .recentHistory:last-of-type {
        border-bottom: 0;
    }

    .sendmodal_area
    .mailEditorHistory
    .date {
        display: block;
        padding-left: 1rem;
        font-weight: 600;
    }

    .sendmodal_area
    .mailSendinglist
    .emailContNm {
        display: block;
        text-align: center;
        font-weight: 600;
    }

    .sendmodal_area
    .cont_tit {
        flex: 1 0 100%;
    }

    .sendmodal_area
    .cont_tit
    label {
        display: inline;
    }

    .sendmodal_area
    .title_input {
        flex: 1 0 auto;
    }

    .sendmodal_area
    .from_input
    input {
        width: 30rem;
    }

    .sendmodal_area
    .mailEditorForm {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-el-md) var(--space-el-lg);
    }

    .sendmodal_area
    .ck.ck-editor {
        flex: 1 1 100%;
    }

    .sendmodal_area
    .btn_wrap {
        flex: 1 0 100%;
        justify-content: flex-end;
        margin-top: var(--space-el-md);
    }

    div#email_list
    input[type="text"] {
        display: inline-block;
        border: 0px solid #ffffff;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        outline: none;
        font-weight: 500;
        text-align: center;
        background-color: #fafafa;
    }

    div#email_list
    hr {
        margin: 5px auto;
        border: 1px solid #E1E1E1;
    }

    #emailCount:before {
        content: "인원수: ";
        display: inline-block;
        margin-right: var(--space-el-lg);
        font-weight: 400;
    }

    modal#send_sms.On {
        display: block;
    }

    modal#send_history.On {
        display: block;
    }

    modal#send_email.On {
        display: block;
    }

    modal.sendSMS {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 8;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.sendSMS
    div.SMSSendArea {
        display: inline-block;
        position: relative;
        background-color: #ffffff;
        width: 670px;
        height: 725px;
        margin: 50px auto;
        z-index: 8;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorTitleArea {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 60px;
        float: left;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
        background-color: #fafafa;
        color: #222222;
        line-height: 60px;
        text-align: center;
        text-indent: 10px;
        font-size: 20px;
        font-weight: 500;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMShistoryArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 200px;
        height: 665px;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #d8d8d8;
        background-color: #ffffff;
        padding: 10px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMShistoryArea
    div.SMSHistory {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 580px;
        border-style: solid;
        border-color: #d8d8d8;
        border-width: 1px;
    }

    #idMaxByte {
        display: inline-block;
        float: right;
        width: auto;
        height: auto;
        text-align: right;
        color: #ffffff;
        font-size: 15px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSSendingList {
        display: inline-block;
        position: relative;
        float: left;
        width: 120px;
        height: 635px;
        padding: 10px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 330px;
        height: 655px;
        margin-top: 5px;
        background-image: url('/static/img/iphonebg.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center;
        -webkit-background-image: url('/static/img/iphonebg.png');
        -webkit-background-repeat: no-repeat;
        -webkit-background-size: auto;
        -webkit-background-position: center;
        -moz-background-image: url('/static/img/iphonebg.png');
        -moz-background-repeat: no-repeat;
        -moz-background-size: auto;
        -moz-background-position: center;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm {
        display: inline-block;
        position: relative;
        float: left;
        width: 293px;
        height: auto;
        margin: 70px 0 0 19px;
        padding: 10px;
        background-color: #222222;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        margin-bottom: 3px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    label {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        color: #F1F1F1;
        font-weight: 500;
        margin-top: 10px;
        text-align: left;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    span.sendingType {
        display: inline-block;
        float: left;
        width: auto;
        height: 35px;
        line-height: 35px;
        margin-right: 20px;
        color: #F1F1F1;
        font-size: 15px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    span.sendingType
    input[type="radio"] {
        display: inline-block;
        float: left;
        width: 15px;
        height: 35px;
        line-height: 35px;
        margin-right: 5px;
        color: #F1F1F1;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    input.sendingSmsTitle {
        display: inline-block;
        float: left;
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        outline: none;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    input.sendingDate {
        display: inline-block;
        float: left;
        width: 101px;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    select.sendingTime {
        display: inline-block;
        float: left;
        width: 80px;
        height: 35px;
        line-height: 35px;
        margin-left: 10px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    textarea {
        display: inline-block;
        float: left;
        width: 100%;
        height: 200px;
        padding: 10px;
        font-size: 15px;
        color: #333333;
        resize: none;
        outline: none;
        line-height: 26px;
        letter-spacing: 1px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    span.smsTemplateBtn {
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 5px;
        color: #ffffff;
        margin: 3px auto;
        border: 1px solid #4778C9;
        background-color: #4778C9;
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    span.testMobLabel {
        display: inline-block;
        position: relative;
        float: left;
        width: 90px;
        height: auto;
        padding: 5px;
        font-size: 15px;
        color: #F1F1F1;
        font-weight: 500;
        text-align: center;
        margin-left: 30px;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSEditorFormArea
    ul.SMSEditorForm
    li
    input.testMob {
        display: inline-block;
        position: relative;
        float: left;
        width: 140px;
        padding: 5px;
        text-indent: 10px;
        font-size: 15px;
        color: #ffffff;
        font-weight: 500;
        text-align: center;
        outline: none;
        border: 0px solid #d8d8d8;
        background-color: #222222;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMShistoryArea
    label {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #333333;
        font-weight: 500;
        margin-top: 10px;
        text-align: left;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMSSendingList
    label {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #333333;
        font-weight: 500;
        margin-top: 10px;
        text-align: left;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMShistoryArea
    div.SMSHistory
    span.recentFormIcon {
        display: inline-block;
        width: 100%;
        height: 55px;
        line-height: 20px;
        color: #C1C1C1;
        margin-bottom: 5px;
        overflow: hidden;
        text-align: left;
        font-size: 13px;
        border: 0px solid #ffffff;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMShistoryArea
    div.SMSHistory
    span.date {
        display: block;
        width: 100%;
        height: auto;
        font-size: 12px;
        font-color: #333333;
        font-weight: 700;
        font-style: italic;
    }

    modal.sendSMS
    div.SMSSendArea
    div.SMShistoryArea
    div.SMSHistory
    span.recentFormIcon
    span.recentHistory:hover {
        background-color: #2D2D2D;
        cursor: pointer;
    }

    div#sms_list
    input[type="text"] {
        display: inline-block;
        border: 0px solid #ffffff;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        outline: none;
        font-weight: 500;
        text-align: center;
        background-color: #fafafa;
    }

    div#sms_list
    hr {
        margin: 5px auto;
        border: 1px solid #E1E1E1;
    }

    #smsCount:before {
        content: "인원수: ";
        display: inline-block;
        margin-right: var(--space-el-lg);
        font-weight: 400;
    }

    div.boardWriteForm {
        position: relative;
        margin: 10px auto;
        display: inline-block;
        width: 800px;
        height: auto;
        padding-bottom: 30px;
        background-color: #ffffff;
        z-index: 0;
    }

    div.boardWriteForm
    ul {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
    }

    div.boardWriteForm
    ul
    li {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-top: 5px;
    }

    div.boardWriteForm
    ul
    li
    label {
        display: inline-block;
        float: left;
        width: 100px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 14px;
        color: #333333;
        font-weight: 500;
        text-align: center;
    }

    div.boardWriteForm
    ul
    li
    input {
        display: inline-block;
        float: left;
        width: calc(100% - 100px);
        height: 35px;
        margin-top: 2px;
        outline: none;
        text-indent: 10px;
        border: 1px solid #d9d9d9;
    }

    div.boardWriteForm
    ul
    li
    select {
        display: inline-block;
        float: left;
        width: calc(100% - 100px);
        height: 35px;
        margin-top: 2px;
        outline: none;
        text-indent: 10px;
        border: 1px solid #d9d9d9;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }

    .btnEditor{
        display: inline-block;
        float: right;
        height: auto;
        width: 100px;
        color: #ffffff;
        padding: 10px;
        outline: none;
        border: 0px solid #ffffff;
        margin-left: 10px;
        background-color: #ffffff;
        cursor: pointer;
    }

    p.cancelBtn {
        display: inline-block;
        float: right;
        height: 37px;
        width: 100px;
        color: #323232;
        padding: 10px;
        outline: none;
        border: 1px solid #888888;
        margin-left: 10px;
        cursor: pointer;
    }

    div.boardWriteForm
    ul
    li
    span {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 200px;
        float: left;
        text-align: left;
        font-size: 14px;
    }

    div.boardWriteForm
    ul
    li
    span
    input.writeRadioInput {
        display: inline-block;
        height: 20px;
        width: 20px;
        float: left;
        text-align: left;
        margin: 10px;
        border: 0px solid #ffffff;
    }

    div.boardWriteForm
    ul
    li
    textarea {
        display: inline-block;
        float: left;
        width: 100%;
        height: 350px;
    }

    div.boardWriteForm
    ul
    li
    span.boardInfoWrite {
        display: inline-block;
        float: left;
        width: 100%;
        line-height: 25px;
        height: auto;
        font-size: 14px;
        font-weight: 500;
        color: #d53e4f;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 1px 0 0 0;
        padding: 5px;
    }

    div.boardWriteForm
    ul
    li.boardWriteEditorArea {
        display: inline-block;
        height: 425px;
    }

    div.boardWriteForm
    ul
    li.boardWriteEditorArea
    textarea {
        display: inline-block;
        width: 798px;
        height: 390px;
    }

    /*modal*/
    .btn.search {
        display: inline-block;
        position: absolute;
        margin-top: 7px;
        line-height: 35px;
        height: 35px;
        text-align: center;
        float: left;
        background-color: Transparent;
        color: #ffffff;
        cursor: pointer;
        text-indent: 0px;
        outline: none;
        font-size: 14px;
    }

    .btn{
        margin-top: 7px;
        line-height: 35px;
        height: 35px;
        text-align: center;
        float: left;
        display: inline-block;
        border-radius: 0px;
        border-style: solid;
        border-width: 0px;
        border-color: #0175B1;
        color: #ffffff;
        cursor: pointer;
        text-indent: 0px;
        outline: none;
        font-size: 14px;
    }

    .blue {
        background-color: #0192D1;
    }

    .blueout {
        /*border: 1px solid #0064BA;
        color: #0064BA;
        background-color: #ffffff;
        outline: none;*/
    }

    .gray {
        background-color: #6F6F6D;
    }

    .red {
        background-color: #8D1F44;
    }

    .redout {
        /*border: 1px solid #E03360;
        color: #E03360;*/
    }


    .btnsms {
        text-align: center;
        float: left;
        padding: 5px;
        display: inline-block;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: #ffffff;
        background-color: #222222;
        color: #ffffff;
        cursor: pointer;
        text-indent: 0px;
    }

    .btn.ratio.red {
        background-color: #A6212C;
        border: 1px solid #A6212C;
        color: #ffffff;
    }

    .radiobtn {
        display: inline-block;
        float: right;
        width: auto;
        height: auto;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-color: #d9d9d9;
        color: #222222;
        cursor: pointer;
        padding: 5px 10px 5px 10px;
        margin: 10px 0 0 5px;
        background-color: #ffffff;
    }

    .radiobtn.blue {
        color: #ffffff;
        background-color: #4778C9;
        border: 1px solid #4778C9;
    }

    .radiobtn.red {
        color: #ffffff;
        background-color: #D53E4F;
        border: 1px solid #D53E4F;
    }

    .btn.search.Green {
        line-height: 35px;
        height: 35px;
        text-align: center;
        float: left;
        display: inline-block;
        border-radius: 5px;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #4DBD73;
        background-color: #4DBD73;
        color: #ffffff;
        cursor: pointer;
        outline: none;
    }

    .btn.search.red:hover {
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #D54A4F;
        background-color: #D54A4F;
    }

    .btn.Lite {
        margin-top: 8px;
        line-height: 35px;
        height: 35px;
        text-align: center;
        float: left;
        display: inline-block;
        border-radius: 0;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #ffffff;
        background-color: #2A3032;
        color: #ffffff;
        cursor: pointer;
        outline: none;
        text-indent: 0px;
    }

    .btn.Lite.Small {
        margin-top: 8px;
        line-height: 25px;
        height: 25px;
        text-align: center;
        float: right;
        display: inline-block;
        border-radius: 3%;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #569DF4;
        background-color: #ffffff;
        color: #569DF4;
        cursor: pointer;
        outline: none;
        text-indent: 0px;
    }

    .btn.Lite.Small:hover {
        background-color: #569DF4;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #569DF4;
        color: #ffffff;
    }

    .tab
    .btn.icon {
        display: inline-block;
        width: 80px;
        height: 30px;
        float: right;
        vertical-align: top;
        background-color: #ffffff;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #569DF4;
        color: #569DF4;
        cursor: pointer;
        border-radius: 3%;
        margin-left: 5px;
        outline: none;
        text-indent: 0px;
    }

    .btn.icon {
        display: inline-block;
        width: auto;
        height: auto;
        float: right;
        vertical-align: top;
        background-color: #ffffff;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #569DF4;
        color: #569DF4;
        cursor: pointer;
        outline: none;
    }

    .btn.icon:hover {
        background-color: #569DF4;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #569DF4;
        color: #ffffff;
    }

    .btn.icon.red {
        display: inline-block;
        width: 80px;
        height: 30px;
        float: center;
        vertical-align: top;
        background-color: #D54A4F;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #D54A4F;
        color: #ED514F;
        cursor: pointer;
        border-radius: 3%;
        margin: 5px;
        outline: none;
        color: #ffffff;
    }

    .btn.icon.red:hover {
        background-color: #B94145;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #B94145;
    }

    .btn.icon.active {
        background-color: #569DF4;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #569DF4;
        color: #ffffff;
    }

    nav {
        position: relative;
        z-index: 10000;
    }

    .search_area {
        position: absolute;
        top: -100vh;
        left: 0;
        width: 100%;
        opacity: 0;
        z-index: -1;
    }

    .search_area.on {
        top: 100%;
        opacity: 1;
    }

    .search_area
    .search_wrap {
        position: relative;
        padding: var(--space-el-lg);
        background-color: #fff;
        box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15);
        transform: translateY(-65px);
        transition: transform 0.8s;
    }

    .search_area.on
    .search_wrap { transform: translateY(0); }

    .search_area
    .search_cont {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        max-width: 1600px;
        margin: 0 auto;
    }

    .search_area
    .search_input { position: relative; }

    .search_area
    .search_input
    input {
        padding: var(--space-el-xx-sm) var(--space-el-x-lg) var(--space-el-xx-sm) 0;
        font-size: var(--headline);
        border: 0;
        border-bottom: 1px solid var(--color-gray03);
        border-radius: 0;
    }

    .search_area
    .search_input
    input:focus {
        border-bottom-color: var(--color-gray01);
        outline: 0;
    }

    .search_area
    .search_input
    .ico_search {
        position: absolute;
        right: 0;
    }

    .search_area
    .recommend_list {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-xx-sm);
        height: 100%;
    }

    .search_area
    .recommend_list
    li {
        display: flex;
        align-items: center;
        gap: var(--space-el-x-sm);
        color: var(--color-gray03);
    }

    .search_area
    .recommend_list
    li::before {
        content: "";
        width: 2rem;
        height: 2rem;
        background: var(--color-gray05) url(/resources/images/ico/ico_search.svg) no-repeat center center/1.2rem auto;
        border-radius: 50%;
    }

    .search_area
    .search_list_wrap {
        overflow: hidden;
        height: 16.8rem;
    }

    .search_area
    .search_list { height: 100%; }

    .search_area
    .search_list
    .noResult { color: var(--color-gray03); }

    .search_area
    .search_list
    ul {
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-el-x-sm);
        height: 100%;
        margin-top: var(--space-el-x-sm);
    }

    .search_area
    .search_list
    ul
    li
    .txt {
        overflow: hidden;
        max-width: 20.5rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search_area
    .search_bottom {
        display: flex;
        justify-content: end;
        align-items: center;
        gap: var(--space-el-md);
    }

    .search_area
    .search_bottom
    button {
        color: var(--color-gray02);
        line-height: 1;
    }

    .search_area
    .search_bottom
    button:not(:last-of-type) {
        padding-right: var(--space-el-md);
        border-right: 1px solid var(--color-gray03);
    }

    .search_area
    .bg {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }

    .search_area.on
    .bg { display: block; }

    nav
    .searchArea { margin-left: auto; }

    div.userinformationCard {
        display: inline-block;
        position: absolute;
        top: 30px;
        right: 0px;
        width: 360px;
        height: auto;
        z-index: 99;
        visibility: hidden;
        background-color: #ffffff;
        border: 1px solid #01538A;
    }

    li.userInfomation:hover div.userinformationCard {
        visibility: visible;
    }

    div.userinformationCard
    ul.userCard {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
    }

    div.userinformationCard
    ul.userCard
    li {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
    }

    nav
    div.userinformationCard
    ul.userCard
    li
    span.cardNn {
        display: inline-block;
        position: relative;
        text-align: center;
        float: center;
        width: 100%;
        height: auto;
        color: #222222;
        font-weight: 500;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #ffffff;
        background-color: #ffffff;
        font-size: 13px;
    }

    nav
    div.userinformationCard
    ul.userCard
    li
    span.cardInfo {
        display: inline-block;
        position: relative;
        float: center;
        float: left;
        height: auto;
        color: #222222;
        background-color: #ffffff;
    }

    nav
    div.userinformationCard
    ul.userCard
    li
    span.cardInfo:nth-child(1) {
        width: 150px;
    }

    nav
    div.userinformationCard
    ul.userCard
    li
    span.cardInfo:nth-child(2) {
        width: 100px;
    }

    nav
    div.userinformationCard
    ul.userCard
    li
    span.cardInfo:nth-child(3) {
        width: 100px;
    }

    nav
    .searchArea {
        display: flex;
        align-items: center;
        gap: var(--space-el-x-lg);
    }

    nav
    div.searchArea
    ul
    li
    label.systemUsingLabel {
        display: inline-block;
        vertical-align: top;
        float: right;
        width: auto;
        height: auto;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        padding: 5px;
        margin: 1px 0 0 6px;
    }

    nav
    div.searchArea
    ul
    li
    span.systemUsingTime {
        display: inline-block;
        vertical-align: top;
        float: left;
        width: auto;
        height: auto;
        font-size: 13px;
        font-weight: 500;
        color: #222222;
        text-align: center;
        margin-top: 7px;
        color: #ffffff;
    }

    nav
    div.searchArea
    ul
    li
    span.userinfoIcon {
        display: inline-block;
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        float: left;
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
        outline: none;
        margin: 10px 0 0 10px;
        border: 1px solid #4E7DBA;
        background-color: #4E7DBA;
        font-size: 14px;
    }

    nav
    div.searchArea
    ul
    li.moveAdminMain {
        display: inline-block;
        float: right;
        height: 40px;
        width: 40px;
        border-radius: 100%;
        margin: 5px;
    }

    nav
    div.searchArea
    ul
    li.moveAdminMain
    span {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: 40px;
        width: 40px;
        border-radius: 100%;
        background-color: #4E7DBA;
    }

    nav
    div.searchArea
    ul
    li.moveAdminMain
    span
    i {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: 40px;
        width: 40px;
        color: #ffffff;
        line-height: 40px;
        font-size: 20px;
    }
    /**/

    nav
    div.searchArea
    ul
    li.systemDateArea {
        display: inline-block;
        float: right;
        height: auto;
        width: auto;
        cursor: pointer;
        padding: 3px;
        margin-top: 6px;
        text-align: right;
    }

    nav
    .searchArea
    .logOutSystem {
        cursor: pointer;
    }

    nav
    .searchArea
    .userName { color: #fff; }

    nav
    .searchArea
    .ico_search { filter: brightness(0) invert(1); }

    nav
    div.searchArea
    ul
    li.userInfomation {
        display: inline-block;
        position: relative;
        float: right;
        height: auto;
        width: auto;
        margin: 5px;
        cursor: pointer;
    }

    nav
    .searchArea
    ul
    .logOutSystem
    .levelCard {
        color: #fff;
    }

    nav
    div.searchArea
    ul
    li.userInfomation
    span.infoBtn {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: auto;
        width: auto;
        margin-top: 5px;
        padding: 5px;
        color: #01538A;
        border: 1px solid #01538A;
        font-size: 13px;
        border-radius: 3px;
        background-color: #ffffff;
    }

    nav
    div.searchArea
    ul
    li.userInfomation
    span.cardInfo {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: auto;
        width: auto;
        padding: 5px;
        padding: 5px;
        color: #222222;
        font-size: 13px;
    }

    nav
    div.searchArea
    ul
    li
    input.searchSelect {
        display: inline-block;
        width: 100px;
        float: left;
        height: 35px;
        line-height: 35px;
        margin: 8px;
        text-align: center;
        text-indent: 5px;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

    nav
    div.searchArea
    ul
    input.searchSelect:focus {
        border: 2px solid #4A84D1;
    }

    nav
    div.searchArea
    ul
    .labelSearch {
        float: left;
        display: inline-block;
        height: 35px;
        line-height: 50px;
        width: 80px;
        font-size: 18px;
        color: #ffffff;
    }

    nav
    div.searchArea
    ul
    li
    input.textSearch {
        float: left;
        display: inline-block;
        height: 35px;
        width: 300px;
        margin-top: 8px;
        border-radius: 3%;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #0175B1;
        background-color: #ffffff;
        text-indent: 10px;
        font-size: 15px;
        outline: none;
        background-color: transparent;
        color: #ffffff;
        border-style: solid;
        border-color: #ffffff;
        border-width: 0 0 1px 0;
    }

    nav
    div.searchArea
    ul
    li
    input.textSearch2 {
        float: left;
        display: inline-block;
        height: 35px;
        width: auto;
        margin-top: 8px;
        border-radius: 3%;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #0175B1;
        background-color: #ffffff;
        font-size: 12px;
        outline: none;
        background-color: transparent;
        color: #ffffff;
        text-align: center;
    }

    nav
    div.searchArea
    ul
    li
    span.minus {
        display: inline-block;
        float: left;
        width: auto;
        height: auto;
        color: #ffffff;
        font-size: 10px;
        margin-top: 22px;
    }

    nav
    div.userConditionArea {
        position: relative;
        display: inline-block;
        top: -10px;
        left: 45px;
        width: 320px;
        height: auto;
        border-style: solid;
        border-color: #979797;
        border-width: 1px 1px 1px 1px;
        -webkit-box-shadow: 0 2px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0x 2px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0 2px 5px 0px rgba(0,0,0,0.3);
        z-index: 10;
    }

    #userInfoIcon:not(:hover) + div.userConditionArea {
        display: none;
    }

    nav
    div.userConditionArea
    ul {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        display: inline-block;
    }

    nav
    div.userConditionArea
    ul
    li {
        display: inline-block;
        text-align: left;
        float: left;
        vertical-align: top;
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 40px;
        padding: 8px;
        background-color: #dddddd;
    }

    nav
    div.userConditionArea
    ul
    li
    label {
        display: inline-block;
        text-align: left;
        float: left;
        vertical-align: top;
        width: auto;
        height: auto;
        font-weight: 300;
        color: #222222;
    }

    nav
    div.userConditionArea
    ul
    li
    label
    i {
        display: inline-block;
        font-size: 20px;
        width: auto;
        height: auto;
        color: #222222;
    }

    nav
    div.userConditionArea
    ul
    li
    span {
        display: inline-block;
        text-align: left;
        float: left;
        vertical-align: top;
        width: auto;
        height: 100%;
        line-height: 20px;
        color: #222222;
        font-size: 14px;
        text-indent: 5px;
        font-weight: 700;
    }

    nav
    .middleNav_wrap {
        display: flex;
        align-items: center;
        padding: 2rem;
        background-color: var(--color-primary);
    }

    nav
    .middleNav {
        display: flex;
        align-items: center;
        gap: 4rem;
        position: relative;
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        color: var(--color-primary01);
        z-index: 0;
    }

    nav
    .middleNav
    .platform_logo {
        position: relative;
        width: 14.6rem;
    }

    nav
    .middleNav
    .platform_logo
    a {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    nav
    .middleNav
    .logoArea {
        height: 2.4rem;
        filter: brightness(0) invert(1);
    }

    nav
    .middleNav
    .logoArea
    img {
        width: auto;
        height: 100%;
    }

    nav
    .middleNav
    ul {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: var(--space-el-x-lg);
    }

    nav
    .middleNav
    ul
    li
    .navText {
        cursor: pointer;
    }

    nav
    .middleNav
    ul
    li.active
    .navText {
        color: #fff;
    }

    nav
    .middleNav
    ul
    li.active2
    .navText { color: #fff; }

    nav
    .middleNav
    ul
    li.active2
    span.navText
    i {
        color: #ffffff;
    }

    nav
    .middleNav
    ul
    li.active2
    span.navIcon
    i {
        color: #ffffff;
    }

    nav
    div.middleNav
    ul
    li.checked {
        color: #222222;
        font-weight: 700;
        background-color: #566570;
    }
    /*공통영역*/

    /*로그인*/
    #your_loginId {
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 20px;
        font-weight: 700;
    }

    #addtional_auth {
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
    }

    #timer1 {
        display: inline-block;
        position: absolute;
        float: left;
        top: 70px;
        right: 30px;
        width: auto;
        height: auto;
        font-size: 15px;
        color: #BA3433;
        font-weight: 700;
    }

    #timer2 {
        display: inline-block;
        position: absolute;
        top: 355px;
        right: 20px;
        float: left;
        width: auto;
        height: auto;
        font-size: 13px;
        color: #BA3433;
        font-weight: 500;
    }

    .login { text-align: center; }

    .login
    .loginAreaContainer
    .loginArea {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox {
        position: relative;
        width: 600px;
        height: auto;
        max-height: 742px; 
        padding:60px 50px; 
        background:#fff; 
        border-radius: 20px; 
        box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
        /*z-index: 99;*/
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .logo {
        margin-bottom: 60px;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .logo img { height: 4rem; }

    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    li
    span.cavansText {
        display: inline-block;
        position: absolute;
        top: 60px;
        left: 0;
        font-size: 20px;
        font-weight: 700;
        color: #0788D8;
    }

    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    li.loginTitle {
        display: inline-block;
        position: relative;
        float: left;
        height: auto;
        margin-top: 10px;
        font-size: 30px;
    }
    
    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    input{
    	font-size:16px;
    }
    
    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    input::placeholder {
        color: var(--color-gray02);
    }

    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    span.loginImg {
        display: inline-block;
        height: 50px;
        width: 50px;
        border-radius: 100%;
    }

    .loginPwChange_page
    ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-md);
    }

    .loginPwChange_page
    li:nth-of-type(2),
    .loginPwChange_page
    li:nth-last-of-type(2) { margin-top: var(--space-el-lg); }

    #canvasOne {
        display: inline-block;
        width: 150px;
        width: 150px;
        background-color: #FBFBFC;
        opacity: 0.6;
    }

    #loader-1 {
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 5px;
        margin-top: 5px;
    }

    #loader-1 span{
        display: inline-block;
        width: 3px;
        height: 15px;
        background-color: #0788d8;
        margin: 0 5px 0 5px;
        border-radius: 50px;
    }

    #loader-1 span:nth-child(1){
        animation: grow 1s ease-in-out infinite;
    }

    #loader-1 span:nth-child(2){
        animation: grow 1s ease-in-out 0.15s infinite;
    }

    #loader-1 span:nth-child(3){
        animation: grow 1s ease-in-out 0.30s infinite;
    }

    #loader-1 span:nth-child(4){
        animation: grow 1s ease-in-out 0.45s infinite;
    }

    #loader-1 span:nth-child(5){
        animation: grow 1s ease-in-out 0.60s infinite;
    }

    #loader-1 span:nth-child(6){
        animation: grow 1s ease-in-out 0.75s infinite;
    }

    #loader-1 span:nth-child(7){
        animation: grow 1s ease-in-out 0.90s infinite;
    }

    #loader-1 span:nth-child(8){
        animation: grow 1s ease-in-out 1.05s infinite;
    }

    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    li
    p.loginTitle {
        display: inline-block;
        width: 100%;
        height: 50px;
        font-size: 15px;
        font-weight: 300;
        color: #002B5C;
    }

    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    li
    label.loginTitle {
        position: relative;
        float: center;
        display: inline-block;
        width: 100%;
        height: 100px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 80px;
        -moz-background-position: center;
        -moz-background-repeat: no-repeat;
        -moz-background-size: auto 80px;
        -webkit-background-position: center;
        -webkit-background-repeat: no-repeat;
        -webkit-background-size: auto 80px;
    }

    body.login
    div.loginAreaContainer
    div.loginArea
    ul.loginBox
    li
    label.loginTitle
    i {
        float: left;
        font-size: 50px;
        color: #4174C5;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    li
    .loginSub {
        width: 100%;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    li {  }

    .login
    .input_wrap {
        margin-bottom: var(--space-el-md);
    }

    .login
    .loginSub {
        display: block;
        position: relative;
        padding-top: var(--space-el-sm);
    }

    .login
    input + .txt {
        display: none;
        position: absolute;
        left: var(--space-el-md);
        top: 0;
        width: fit-content;
        height: fit-content;
        padding: 0 var(--space-el-xx-sm);
        text-align: left;
        background-color: #fff;
        z-index: 10;
    }
    .login input:focus + .txt,
    .login input:valid + .txt { display: block; }

    .login input:placeholder-shown + .txt { display: none; }

    .login
    .saveInput_wrap {
        display: flex;
        align-items: center;
        gap: var(--space-el-md);
        margin-bottom: 4rem;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    li
    .loginBtn {
        width: 100%;
        height: 6rem;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .findPw_wrap {
        width: fit-content;
        margin: 2rem auto 0;
        color: var(--color-gray02);
        cursor: pointer;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .sub_tit {
        position: relative;
        margin: 0.8rem 0 4rem 0;
        color: var(--color-gray03);
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .sub_tit::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        background-color: var(--color-gray04);
        transform: translateY(-50%);
        z-index: -1;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .sub_tit
    span {
        padding: 0 var(--space-el-lg);
        background-color: #fff;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .testInfo {
        width: fit-content;
        margin: 0 auto;
        filter: invert(62%) sepia(31%) saturate(3572%) hue-rotate(197deg) brightness(102%) contrast(101%);
        cursor: pointer;
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .testInfo
    .loginSubBtn {
        display: inline-block;
        border-bottom: 1px solid var(--color-gray00);
    }

    .login
    .loginAreaContainer
    .loginArea
    .loginBox
    .restrict_txt { margin: 0.4rem 0 0 0 }

    footer.loginFooter {
        display:inline-block;
        position: relative;
        bottom: 0;
        left: 0;
        border-style: solid;
        border-color: #545D64;
        border-width: 1px 0 0 0;
        height: 5px;
        line-height: 5px;
        background-color: #545D64;
    }

    footer.loginFooter
    ul.subTitles {
        display: inline-block;
        min-width: 1240px;
    }

    footer.loginFooter
    ul.subTitles
    li {
        display: inline-block;
        float: center;
        width: 150px;
        height: 5px;
        font-size: 15px;
        color: #ffffff;
        line-height: 5px;
        font-weight: 300;
    }
    /*로그인*/

    /*Admin_main*/
    div.summaryArea {
        margin: 0 auto;
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        float: center;
        z-index: -25;
        background-color: #fafafa;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
    }

    div.summaryArea.admin {
        position: relative;
        margin: 0 auto;
        display: inline-block;
        width: 100%;
        height: auto;
        float: center;
        z-index: -25;
    }

    div.summaryArea
    div.summaryLine {
        position: relative;
        margin: 0 auto;
        display: inline-block;
        width: 1240px;
        height: auto;
        float: center;
        z-index: -5;
    }

    div.summaryArea
    div.summaryLine.admin {
        position: relative;
        margin: 0 auto;
        display: inline-block;
        width: 1240px;
        height: auto;
        float: center;
        z-index: 0;
    }

    div.summaryArea
    div.summaryLine
    ul {
        display: inline-block;
        width: 1240px;
        height: auto;
        margin: 0 auto;
        vertical-align: top;
    }

    div.summaryArea.admin
    div.summaryLine.admin
    ul:nth-child(1) {
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 0 1px 0;
    }

    div.summaryArea
    div.summaryLine
    ul:nth-child(1) {
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 0 1px 0;
    }

    div.summaryArea
    div.summaryLine
    ul
    li {
        display: inline-block;
        float: left;
        width: 80px;
        height: auto;
        color: #222222;
        padding: 10px;
        font-size: 14px;
        font-weight: 700;
    }

    div.summaryArea.admin
    div.summaryLine.admin
    ul
    li {
        display: inline-block;
        float: left;
        width: 80px;
        height: auto;
        color: #222222;
        font-size: 14px;
    }


    div.summaryArea
    div.summaryLine
    ul
    li:nth-child(1) {
        width: 150px;
        color: #222222;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 1px 0 0;
        text-align: center;
    }

    div.summaryArea.admin
    div.summaryLine.admin
    ul
    li:nth-child(1) {
        width: 150px;
        color: #222222;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 1px 0 0;
        text-align: center;
    }

    div.summaryArea
    div.summaryLine
    ul
    li:nth-child(14) {
        width: 120px;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 0 0 1px;
    }

    div.summaryArea.admin
    div.summaryLine.admin
    ul
    li:nth-child(14) {
        width: 120px;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 0 0 1px;
    }

    div.settingConditionArea {
        display: inline-block;
        vertical-align: top;
        padding: 0;
        margin-top: -3px;
        float: center;
        width: 100%;
        height: auto;
        padding: 10px;
        text-align: center;
        font-size: 15px;
        font-weight: 300;
        color: #ffffff;
    }

    div.settingConditionArea.ready {
        background-color: #d53e4f;
    }

    div.settingConditionArea.play {
        background-color: #fdae61;;
    }

    div.settingConditionArea.done {
        background-color: #7a7574;;
    }

    div.settingConditionArea.answerCount {
        background-color: #7a7574;;
    }

    .sitemapRoute
    .sitemapArea {
        display: flex;
        align-items: center;
        gap: var(--space-el-sm);
    }

    .sitemapRoute
    .sitemapArea
    .directoryStep:not(:last-of-type) {
        color: var(--color-gray02);
        cursor: pointer;
    }

    .sitemapRoute
    .sitemapArea
    .directoryStep:last-of-type { color: var(--color-gray01); }

    .sitemapRoute
    .ico_next::before {
        margin-right: 0;
        opacity: 0.6;
    }

    div.sitemapRoute
    div.sitemapArea
    span.folder {
        display: inline-block;
        /*float: left;*/
        width: 20px;
        height: 30px;
    }

    div.sitemapRoute
    div.sitemapArea
    span.directoryNm {
        display: inline-block;
        float: left;
        width: 60px;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
        font-size: 15px;
        font-weight: 300;
        cursor: pointer;
        color: #222222;
    }

    .title_wrap {
        display: flex;
        align-items: center;
        max-width: 1600px;
        margin: 6rem auto 4rem;
    }

    .user_page
    .title_wrap { align-items: end; }

    .title_wrap
    h1 {
        max-width: 1600px;
        margin-right: auto;
        font-size: 3.8rem;
        font-weight: 900;
        line-height: 1;
    }

    tab {
        display: block;
        max-width: 1600px;
        margin: 0 auto;
    }

    .exammenu {
        margin-bottom: 2rem;
    }

    tab
    .tabContArea {
        display: flex;
        align-items: end;
        gap: var(--space-el-lg);
        align-items: center;
    }

    tab
    div.introduceTextarea {
        display: inline-block;
        float: left;
        width: auto;
        height: auto;
        margin-top: 5px;
    }

    tab
    div.introduceTextarea
    span {
        display: inline-block;
        float: left;
        width: auto;
        height: auto;
        font-size: 20px;
        color: #34A853;
    }

    tab
    div.introduceTextarea
    p {
        display: inline-block;
        float: left;
        width: auto;
        height: auto;
        font-size: 15px;
        color: #323232;
        padding: 4px;
    }

    .exammenu
    .tabContArea { padding-left: 9.4rem; }

    .tab {
        display: flex;
        flex-direction: row;
        margin: 0 auto 0 0;
    }

    .tab
    li {
        display: flex;
        align-items: center;
        width: auto;
        color: var(--color-gray02);
        cursor: pointer;
    }

    tab:not(.exammenu)
    .tab
    li::after {
        content: "";
        width: 1px;
        height: 50%;
        margin: 0 2rem;
        background-color: var(--color-gray04);
    }

    .tab
    li:last-of-type::after { display: none }

    .tab
    li
    .num {
        min-width: 4rem;
        margin-left: var(--space-el-x-sm);
        padding: var(--space-el-xx-sm) var(--space-el-x-sm);
        color: var(--color-gray03);
        text-align: center;
        background-color: var(--color-gray05);
        border-radius: 4px;
    }

    .tab
    li.active
    .num {
        color: #F2732B;
        background-color: #FFEBE0;
    }

    .tab
    li.skipTab
    .num { display: none; }

    .tab
    li.skipTab.active
    .num { display: block; }

    .exammenu
    .tabContArea
    .tab {
        flex: 1 0 100%;
        flex-wrap: wrap;
        gap: var(--space-el-sm);
        margin-right: 0;
    }

    .exammenu
    .tabContArea
    .tab
    li:not(.header) {
        display: flex;
        align-items: center;
        gap: var(--space-el-xx-sm);
        padding: var(--space-el-xx-sm) var(--space-el-sm);
        color: var(--color-gray02);
        border: 1px solid var(--color-gray04);
        border-radius: 50px;
    }

    .exammenu
    .tabContArea
    .tab
    li
    span {
        padding: 0;
    }

    .exammenu
    .tabContArea
    .tab
    .header {
        flex-basis: 8rem;
        margin-left: -9.4rem;
        color: var(--color-gray00);
        cursor: default;
    }

    tab
    .tabContArea
    .tab
    li.active {
        color: var(--color-gray00) !important;
    }

    .exammenu
    .tabContArea
    .tab
    li.active {
        color: #fff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    tab.exammenu
    div.tabContArea
    ul.tab
    li.active::before {
        content: "";
        position: absolute;
        bottom: -19px;
        left: 43px;
        width: 0px;
        height: 0px;
        border-width: 0px; /*10px*/
        border-color: #566570 transparent transparent transparent;
        border-style: solid;
        z-index: 5;
    }

    div.iconGroupArea
    span.countingUser {
        display: inline-block;
        position: relative;
        width: auto;
        height: 40px;
        line-height: 50px;
        float: right;
        font-size: 14px;
        font-weight: 700;
        color: #222222;
        margin-right: 10px;
    }

    span.overenroll {
        display: inline-block;
        border: 1px solid #979797;
        background-color: #ffffff;
        border-radius: 0px;
        margin-top: 4px;
        width: 130px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        color: #979797;
        font-size: 12px;
        font-weight: 500;
    }

    div.iconArea
    span.Red {
        background-color: #D6455B;
        border: 1px solid #D6455B;
        color: #ffffff;
    }

    div.iconArea
    span.Red
    i {
        color: #D6455B;
    }

    div.iconArea
    ul
    li.printSection {
        background-color: #fafafa;
        color: #666666;
        font-size: 11px;
    }

    content {
        display: block;
        max-width: 1600px;
        margin: 0 auto;
    }

    content
    ul {
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        text-align: center;
    }

    content
    ul
    .tableTitle {
        display: flex;
        width: auto;
        height: auto;
        padding: 1.8rem 3rem;
        background-color: var(--color-gray05);
        border-radius: 10px;
    }

    content
    ul
    li.tableCont
    span.cancelLine {
        display: inline-block;
        position: absolute;
        width: 1200px;
        height: 1px;
        border-style: solid;
        border-width: 3px 0 0 0;
        border-color: #F25E6B;
        top: 20px;
        left: 0;
    }

    content
    ul
    li.tableTitle
    span.categoryText1 {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 205px;
        width: 250px;
        height: 20px;
        line-height: 20px;
        border-width: 0 0 1px 0;
        border-color: #888888;
        border-style: solid;
        color: #333333;
        font-size: 14px;
        font-weight: 700;
    }

    content
    ul
    li.tableTitle
    span.categoryText2 {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 465px;
        width: 770px;
        height: 20px;
        line-height: 20px;
        border-width: 0 0 1px 0;
        border-color: #888888;
        border-style: solid;
        color: #333333;
        font-size: 14px;
        font-weight: 700;
    }

    span.testyn {
        display: inline-block;
        width: auto;
        height: auto;
        font-size: 15px;
        font-weight: 700;
        width: 60px;
        height: 30px;
        line-height: 30px;
    }

    span.testyn.on1 {
        background-color: #00D162;
        color: #ffffff;
    }

    span.testyn.on2 {
        background-color: #344DFF;
        color: #ffffff;
    }

    span.testyn.on3 {
        background-color: #E55000;
        color: #ffffff;
    }

    span.scalegraph {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 35px;
        margin-top: 6px;
        border-radius: 100%;
    }

    span.scalegraph
    i {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 100%;
        font-size: 20px;
        font-weight: 700;
    }

    span.scalegraph.green {
        color: #00D162;
    }

    span.scalegraph.orange {
        color: #E55000;
    }

    span.scalegraph.blue {
        color: #344DFF;
    }

    content
    ul:not(.cardType)
    li > span {
        display: inline-block;
        flex-shrink: 0;
        padding: 0 0.4rem;
    }

    content
    ul
    li
    span.shorting_word {
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        white-space: nowrap;
    }

    content
    ul
    li
    .companyName {
        max-width: 19%;
        min-width: 15.5rem;
    }

    content
    ul
    li.tableCont
    span.tableContLabel.view {
        color: #4778C7;
        width: 100px;
        cursor: pointer;
        font-weight: 700;
        border: 1px solid #4778C7;
    }

    content
    ul
    li.tableCont
    span.tableContLabel.view2 {
        color: #D53E4F;
        width: 100px;
        cursor: pointer;
        font-weight: 700;
        border: 1px solid #D53E4F;
    }

    content
    ul
    li.tableTitle
    span.tableTitleLabel.dim {
        color: #d9d9d9;
    }

    span.tableContLabel
    span.ncsreport {
        display: inline-block;
        border: 1px solid #0788D8;
        background-color: #0788D8;
        color: #ffffff;
        cursor: pointer;
        font-size: 13px;
    }

    .tableContLabel
    .cancelBtn {
        display: inline-block;
        color: var(--color-gray04);
        cursor: pointer;
    }

    .tableContLabel
    .cancelBtn
    .axi-toggle-on {
        color: var(--color-subGr01);
    }


    span.filterDown {
        position: relative;
        width: 0;
        height: 0;
        top: 12px;
        border-width: 5px;
        border-color: #F26B7D transparent transparent transparent;
        border-style: solid;
        margin-right: 5px
    }

    span.filterUp {
        position: relative;
        width: 0;
        height: 0;
        top: -12px;
        border-width: 5px;
        border-color: transparent transparent #F26B7D transparent;
        border-style: solid;
        margin-right: 5px;
    }

    span.nofilter {
        display: inline-block;
        position: relative;
        width: 5px;
        height: 5px;
        border: 1px solid #F26B7D;
        border-radius: 100%;
        background-color: #F26B7D;
        margin-right: 5px;
    }

    content
    ul
    li {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    content
    ul
    .tableTitle
    .tableTitleLabel
    input{
        margin-right: 0;
    }

    content
    ul.ListTotal
    li.tableCont
    span.tableContLabel.on3 {
        color: #E55000;
        font-weight: 700;
    }

    content ul:not(.cardType) .tableCont {
        display: flex;
        align-items: center;
        padding: var(--space-el-sm) 3rem;
        border-bottom: 1px solid;
        border-color: transparent transparent  var(--color-gray04) transparent;
    }

    content
    ul:not(.cardType, .ratioSettingArea)
    .tableCont:last-of-type { border-bottom-color: transparent;}

    content
    ul
    .tableEmpty {
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 0;
        border-style: solid;
        border-color: #DEDEDE;
        border-width: 0 0 1px 0;
        vertical-align: top;
        height: auto;
        width: 100%;
        cursor: pointer;
        padding: 8px 0 8px 0;

    }

    content.listType_cont
    ul { display: none; }

    content.listType_cont
    ul.on { display: flex; }

    body:not(.admin_list)
    content
    ul:not(.cardType)
    .tableCont:not(.no_result, .noHover):hover {
        border-bottom: transparent;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid white;
    }

    content
    ul
    .tableCont
    .tableContLabel.post
    span::before {
        content: "";
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        margin-right: var(--space-el-x-sm);
        background-color: var(--color-subGr01);
        border-radius: 50%;
    }

    content
    ul
    .tableCont
    .tableContLabel.post
    .off::before { background-color: var(--color-gray04); }

    .font_gray02 { color: var(--color-gray02); }

    content
    .cardType {
        flex-wrap: wrap;
        flex-direction: row;
        gap: var(--space-el-lg);
    }

    content
    .cardType
    li {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(25% - 1.8rem);
        height: 24.8rem;
        border: 1px solid var(--color-gray03);
        border-radius: 10px;
    }

    content
    .cardType
    li:hover {
        border: 1px solid var(--color-primary);
        background-color: #EFF4FF;
    }

    content
    .cardType
    li.no_result {
        flex: 1 0 auto;
        justify-content: center;
    }

    content
    .cardType
    li.on {
        border-color: var(--color-primary);
        box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.15);
    }

    content
    .cardType
    li.on
    .tableCont_cont
    p { color: var(--color-gray00); }

    content
    .cardType
    .tableCont_cont {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        padding: var(--space-el-lg) 3rem;
    }

    content
    .cardType
    .tableCont_cont
    .companyName {
        max-width: 100%;
        text-align: left;
    }

    content
    .cardType
    .tableCont_cont
    div {
        display: flex;
        align-items: center;
        gap: var(--space-el-x-sm);
    }

    content
    .cardType
    .tableCont_cont
    div.top {
        justify-content: space-between;
        margin-bottom: var(--space-el-sm);
    }

    content
    .cardType
    .tableCont_cont
    div.mid { margin: var(--space-el-xx-sm) 0 2rem; }

    content
    .cardType
    .tableCont_cont
    div.count_wrap {
        gap: var(--space-el-md);
        margin-top: auto;
    }

    content
    .cardType
    .tableCont_cont
    div.count_wrap
    strong:first-of-type { margin-right: auto; }

    content
    .cardType
    li
    .btn_wrap {
        display: none !important;
        align-items: center;
        gap: 0;
        margin-top: auto;
    }

    content
    .cardType
    li:hover
    .btn_wrap { display: flex !important;; }

    content
    .cardType
    li
    .btn_wrap
    p {
        flex: 1 0 50%;
        padding: var(--space-el-md) 0;
        border-top: 1px solid var(--color-primary);
        cursor: pointer;
        background-color: white;
    }

    content
    .cardType
    li
    .btn_wrap
    p
    span::after {
        content: "";
        display: inline-block;
        width: 2.4rem;
        height: 2.4rem;
        margin-left: var(--space-el-sm);
        vertical-align: middle;
        background: url(/resources/images/ico/ico_next.svg) no-repeat center center/50% auto;
        border: 1px solid var(--color-gray02);
        border-radius: 50%;
    }

    content
    .cardType
    li
    .btn_wrap
    .userViewUrl
    span { filter: invert(33%) sepia(31%) saturate(5291%) hue-rotate(215deg) brightness(92%) contrast(82%); }

    content
    .cardType
    li
    .btn_wrap
    .companyUrl {
        background-color: var(--color-primary);
    }

    content
    .cardType
    li
    .btn_wrap
    .companyUrl
    span { filter: brightness(0) invert(1); }

    content .tableContLabel .indicator.t1 {
        background-color: #A348FF;
    }

    content .tableContLabel .indicator.t2 {
        background-color: #FF48B6;
    }

    content .tableContLabel .indicator.t3 {
        background-color: #FF8A48;
    }

    content .tableContLabel .indicator.t4 {
        background-color: #FFB649;
    }

    content .tableContLabel .indicator.t5 {
        background-color: #FF4848;
    }

    content .tableContLabel .indicator.t6 {
        background-color: #4C48FF;
    }

    content
    ul
    li.tableCont
    span.tableContLabel.dim {
        color: #d9d9d9;
    }

    body[class*="test_user"] .border_gray { color: var(--color-gray01); }
    content .tableCont .tableContLabel.masking { max-height: 4.2rem; }
    content .tableCont .tableContLabel.masking .cm_btn {
        overflow: hidden;
        position: relative;
    }

    content .tableCont .tableContLabel.masking .cm_btn:hover::after {
        content: "결과보기";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: #fff;
        font-weight: 600;
        background-color: var(--color-primary);
    }


    content
    ul
    li.tableCont
    span.tableContLabel.btnArea {
        position: relative;
        color: #222222;
        height: auto;
        font-weight: 500;
        font-size: 13px;
        border: 1px solid #d9d9d9;
        -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
        box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
        cursor: pointer;
    }

    content
    ul
    li.tableCont
    span.tableContLabel.btnArea:hover::after {
        content: "결과표";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(212,72,101,0.7);
        color: #ffffff;
        font-weight: 300;
        font-size: 13px;
        padding-top: 5px;
    }

    body:not(.test_list, [class*="test_user_result"])
    content
    ul
    .tableCont
    .tableContLabel
    .badge {
        display: block;
        position: relative;
        width: fit-content;
        min-width: 5.6rem;
        margin: 0 auto;
        padding: 0 var(--space-el-sm);
        color: var(--color-gray02);
        line-height: 3.2rem;
        background-color: var(--color-gray05);
        border-radius: 4px;
    }

    content
    ul
    li.tableCont
    span.tableContLabel.online {
        color: #222222;
        font-weight: 500;
    }

    content
    ul
    li.tableCont
    .tableContLabel.offline {
        color: #222222;
        font-weight: 500;
    }

    body:not(.test_list)
    content
    ul
    .tableCont
    .tableContLabel.ready
    .badge {
        color: var(--color-primary);
        background-color: var(--color-primary02);
    }

    body:not(.test_list)
    content
    ul
    .tableCont
    .tableContLabel.play
    .badge {
        color: var(--color-subRe01);
        background-color: #FFE5E5;
        cursor: pointer;
    }


    body:not(.test_list)
    content
    ul
    .tableCont
    .tableContLabel.done
    .badge {
        cursor: pointer;
    }

    body:not(.test_list)
    content
    ul
    .tableCont
    .tableContLabel.answerCount
    .badge {
        cursor: pointer;
    }

    body:not(.test_list)
    content
    ul
    .tableCont
    .tableContLabel.cheatingCount
    .badge {
        color: #fff;
        background-color: var(--color-gray03);
        cursor: pointer;
    }

    content
    ul
    li.tableCont
    span.tableContLabel.cdt {}

    content
    ul
    .tableCont
    .tableContLabel.cdt.play {
        color: var(--color-subRe01);
    }

    content
    ul
    li.tableCont
    span.tableContLabel.play:hover
    .badge:after {
        content: "접속초기화";
        position: absolute;
        top: 0;
        left: 50%;
        width: 8.5rem;
        min-width: max-content;
        color: #fff;
        line-height: 3.2rem;
        background-color: var(--color-gray01);
        border-radius: 4px;
        transform: translateX(-50%);
    }

    content
    ul
    li.tableCont
    span.tableContLabel.done:hover
    .badge:after {
        content: "재시험";
        position: absolute;
        top: 0;
        left: 50%;
        width: 100%;
        color: #fff;
        line-height: 3.2rem;
        background-color: var(--color-gray01);
        border-radius: 4px;
        transform: translateX(-50%);
    }

    content
    ul
    li.tableCont
    span.tableContLabel.cdt.ready {
        color: var(--color-primary);
    }

    content
    ul
    .tableCont
    .tableContLabel.none {
        color: #1767AD;
        font-weight: 700;
    }

    content
    ul
    .tableCont
    .tableContLabel.urlKey {
        position: relative;
    }

    content
    ul:not(.cardType)
    .tableCont:hover
    .tableContLabel.urlKey { color: transparent; }

    content
    ul:not(.cardType)
    .tableCont:hover
    .tableContLabel.urlKey::after {
        content: "응시화면 열기";
        position: absolute;
        color: var(--color-primary);
        left: 50%;
        top: 50%;
        width: max-content;
        font-size: var(--font-sm);
        font-weight: 600;
        padding: 0.5rem var(--space-el-sm);
        border: 1px solid var(--color-primary);
        border-radius: 4px;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }

    content
    ul:not(.cardType)
    .tableCont
    .tableContLabel.companyUrl
    span {
        display: none;
        color: #fff;
        padding: var(--space-el-x-sm) 2rem;
        background-color: var(--color-primary);
        border-radius: 4px;
        cursor: pointer;
    }

    content
    ul:not(.cardType)
    .tableCont:hover
    .tableContLabel.companyUrl
    span { display: inline; }

    .listType_wrap {
        display: flex;
        align-items: center;
        gap: var(--space-el-xx-sm);
    }

    .listType_wrap
    button {
        width: 2.4rem;
        height: 2.4rem;
        background: url(/resources/images/ico/ico_listViewType.svg) no-repeat left center/cover;
        opacity: 0.3;
    }

    .listType_wrap
    button.on { opacity: 1; }

    .listType_wrap
    .listType { background-position-x: right; }

    .paging_wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-el-md);
        max-width: 1600px;
        margin: 6rem auto 12rem;
    }

    [class*="btn_pg"] {
        width: 2rem;
        height: 2rem;
        background: var(--color-gray02) url(/resources/images/ico/ico_next.svg) no-repeat center center/1.2rem auto;
        border-radius: 50%;
        filter: invert(1);
    }

    .btn_pg_prev {
        transform: rotate(180deg);
        opacity: 0.5;
    }

    .paging {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-el-xx-sm);
    }

    .paging
    a {
        min-width: 2rem;
        padding: 0 var(--space-el-xx-sm);
        color: var(--color-gray02);
    }

    .paging
    a.active {
        color: var(--color-primary);
        font-weight: 600;
    }

    page
    ul
    li.forward {
        border: 0px solid #d9d9d9;
        color: #323232;
        font-size: 20px;
        line-height: 35px;
    }

    page
    ul
    li.backward {
        border: 0px solid #d9d9d9;
        color: #323232;
        font-size: 20px;
        line-height: 35px;
    }

    footer.adminCommon {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 30px;
        line-height: 5px;
        width: 100%;
        border-width: 0 0 0 0 ;
        border-color: #C1C1C1;
        border-style: solid;
        color: #797979;
        font-size: 13px;
        z-index: 9;
    }
    /*Admin_main*/

    /*Admin_register*/
    .noticeModal
    .adminRegForm { max-width: 77.4rem; }

    .noticeModal
    .regtitle {
        display: flex;
        align-items: center;
        gap: var(--space-el-lg);
        padding-bottom: var(--space-el-lg);
        border-bottom: 1px solid var(--color-gray04);
    }

    .adminreg
    .regtitle
    span { color: var(--color-gray02); }

    .adminreg
    .regtitle
    .close {
        width: 2.4rem;
        height: 2.4rem;
        margin-left: auto;
        cursor: pointer;
    }

    .adminreg
    .adminRegForm
    .btn_wrap
    select {
        width: 24rem;
        padding: var(--space-el-x-sm) 5.6rem var(--space-el-x-sm) 2rem;
        background-position: right 2rem center;
        border: 1px solid var(--color-gray03);
        border-radius: 4px;
    }

    .adminreg
    .adminRegForm
    .btn_wrap
    button {
        margin-left: auto;
    }

    modal.adminreg
    form.adminRegForm
    div.adminInfo {
        display : inline-block;
        float: left;
        width: 240px;
        height: 330px;
        background-color: #0192D1;
    }

    modal.adminreg
    form.adminRegForm
    div.adminInfo
    span.title {
        display : inline-block;
        float: left;
        width: 95%;
        height: auto;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #ffffff;
        font-size: 28px;
        color: #ffffff;
        font-weight: 500;
        padding: 10px;
        margin: 50px 0 0 5px;
    }

    form.adminRegForm
    div.adminInfo
    span.description {
        display : inline-block;
        float: left;
        width: auto;
        height: auto;
        line-height: 25px;
        font-size: 15px;
        color: #ffffff;
        font-weight: 500;
        padding: 5px;
        margin: 15px;
        text-align: justify;
    }

    .adminRegForm
    .adminLeft
    label {
        width: 100%;
    }

    form.adminRegForm
    div.adminRight {
        display : inline-block;
        float: left;
        width: 40%;
        height: auto;
        background-color: #fafafa;
    }

    span.adminRegTitleNum	{
        display : inline-block;
        text-align: left;
        text-indent: 10px;
        padding: 10px;
        font-size: 18px;
        width: 100%;
        height: auto;
    }

    .noticeModal
    .adminRegForm
    .btn_wrap {
        align-items: end;
        margin-top: var(--space-el-x-lg);
    }

    .notice_list
    tab
    .tabContArea { align-items: center; }

    .notice_list
    tab
    .tabContArea
    p {
      margin-right: auto;
    }

    .notice_list
    tab
    .tabContArea
    p
    span { color: var(--color-primary); }

    .notice_list
    li
    .post { text-align: left; }

    div
    label.adminLabel
    div.explainBox {
        display: inline-block;
        position: relative;
        float: right;
        border: 1px solid #0192D1;
        width: 110px;
        height: auto;
        cursor: pointer;
        text-align: center;
        font-size: 13px;
        color: #0192D1;
    }

    div
    label.adminLabel
    div.explainBox
    div.explainBox2 {
        display: inline-block;
        position: absolute;
        top: 30px;
        left: -1px;
        border: 1px solid #d9d9d9;
        width: 110px;
        height: auto;
        background-color: #fafafa;
        display: none;
    }

    div
    label.adminLabel
    div.explainBox
    div.explainBox2
    ul.toolbox {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        background-color: #fafafa;
    }

    div
    label.adminLabel
    div.explainBox
    div.explainBox2
    ul.toolbox
    li.tooboxL {
        display: inline-block;
        float: left;
        z-index: 99;
        width: 100%;
        height: auto;
        font-size: 12px;
        line-height: 15px;
        text-align: left;
        margin-top: 4px;
        padding: 2px 5px 2px 5px;
        background-color: #fafafa;
        color: #666666;
    }

    label.adminLabel
    input.Large{
        display: inline-block;
        vertical-align: top;
        width: 320px;
        height: 30px;
        text-align: left;
    }

    .noticeModal
    .adminLabel
    .middle {
    	margin: 1rem 0;
        padding: 0.8rem;
        border: 0;
        outline: none;
    }

    label.adminLabel
    input.small{
        display: inline-block;
        width: 65px;
        height: 30px;
        text-align: left;
    }

    .admin_list
    .adminLabel
    .btn_wrap { flex: 1 0 100%; }

    .admin_list
    .adminLabel
    .btn_wrap
    button { flex: 1 0 auto; }

    .admin_list
    .adminLabel
    .btn_wrap
    button.on {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    label.adminLabel
    select {
        padding: var(--space-el-sm) 2rem;
        border: 1px solid var(--color-gray03);
        border-radius: 4px;
    }
    /*Admin_register*/
    form.adminRegForm.Update {
        position: relative;
        display: inline-block;
        width: 500px;
        height: auto;
        vertical-align: top;
        z-index: 10;
        padding: 20px;
        margin: 0;
        border: 0 solid #ffffff;
        margin-top: 20px;
    }

    form.adminRegForm.Update
    ul {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
    }

    form.adminRegForm.Update
    ul
    li {
        display: inline-block;
        position: relative;
        height: auto;
        text-align: left;
        font-size: 18px;
        margin: 5px auto;
    }

    div.regUserUpdatePlue {
        display: inline-block;
        float: right;
        width: 600px;
        height: 472px;
    }

    form.adminRegForm
    ul
    li
    span.adminRegTitle {
        display: inline-block;
        top: 0px;
        left: 10px;
        position: absolute;
        vertical-align: top;
        font-size: 20px;
        width: 120px;
        height: 40px;
        color: #569DF4;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
        letter-spacing: 0px;
    }

    span.regbtn {
        display: inline-block;
        float: right;
        width: auto;
        height: auto;
        padding: 3px 10px 3px 10px;
        border: 1px solid #0788D8;
        background-color: #0788D8;
        color: #ffffff;
        margin-top: 20px;
        cursor: pointer;
    }

    form.periodusearea {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        padding: 0;
    }

    form.periodusearea
    button.submitbtnupdate {
        display: inline-block;
        width: auto;
        height: auto;
        border: 1px solid #0192D1;
        background-color: #0192D1;
        vertical-align: top;
        padding: 5px;
        cursor: pointer;
        color: #ffffff;
    }

    form.periodusearea
    ul {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: -3px;
    }

    form.periodusearea
    ul
    li {
        display: inline-block;
        padding: 10px;
    }

    form.periodusearea
    ul
    li.leftarea {
        display: inline-block;
        float: left;
        width: 240px;
        height: 47px;
        background-color: #0192D1;
        color: #ffffff;
    }

    form.periodusearea
    ul
    li.rightarea {
        display: inline-block;
        float: left;
        width: calc(100% - 240px);
        height: auto;
        background-color: #FAFAFA;
    }

    form.periodusearea
    ul
    li.rightarea
    label {
        display: inline-block;
        float: left;
        width: auto;
        height: auto;
        text-align: left;
    }

    form.periodusearea
    ul
    li.rightarea
    label
    span {
        display: inline-block;
        float: left;
        width: 110px;
        height: auto;
        font-size: 13px;
        text-align: center;
        padding: 5px;
    }

    form.periodusearea
    ul
    li.rightarea
    label
    input {
        display: inline-block;
        width: 150px;
        height: auto;
        border: 1px solid #d9d9d9;
        text-align: center;
        padding: 5px;
        outline: none;
    }

    ul.adminUserList
    li.adminUserInfoAreaBtn
    span.cardType1 {
        display: inline-block;
        color: #222222;
        text-align: center;
        float: left;
        font-weight: 400;
        width: auto;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    ul.adminUserList
    li
    span.cardType1
    label.cardTitle {
        display: inline-block;
        color: #4A84D1;
        float: left;
        width: auto;
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        text-align: center;
        font-weight: 700;
        text-align: center;
        font-size: 14px;
    }

    ul.adminUserList
    li.adminUserInfoContents
    span.cardType2 {
        display: inline-block;
        color: #222222;
        float: left;
        width: 270px;
        height: auto;
        padding: 0 10px 0 10px;
        font-size: 13px;
        text-align: center;
        font-weight: 500;
        font-size: 13px;
        margin-left: 5px;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 1px 0 0;
        padding: 3px;
    }

    ul.adminUserList
    li.adminUserInfoContents
    span.cardLine {
        display: inline-block;
        position: absolute;
        top: 3px;
        left: 30px;
        width: 50px;
        height: 20px;
        border-style: solid;
        border-color: #0192D1;
        border-width:  0 0 1px 1px;

    }

    ul.adminUserList
    li.adminUserInfoAreaBtn
    input.regTitle{
        display: inline-block;
        position: relative;
        height: 20px;
        float: left;
        padding: 1px;
        font-size: 15px;
        color: #D74656;
        text-align: center;
        border: 0px solid #d9d9d9
    }

    ul.adminUserList
    li.adminUserInfoContents {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        float: left;
        display: none;
        background-color: #fafafa;
    }

    .admin_list
    .adminRegForm { max-width: 64rem; }

    .admin_list
    .adminLeft {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-el-sm) var(--space-el-md);
        margin-bottom: var(--space-el-x-lg);
    }

    .admin_list
    .adminLeft
    label {
        flex: 1 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-el-x-sm);
    }

    .admin_list
    .adminLeft
    .w50 { width: 48%; }

    .admin_list
    .adminLeft
    label
    span { flex: 1 0 100%; }

    .admin_list
    .adminLeft
    label
    .info { color: var(--color-gray02); }

    .admin_list
    .adminLeft
    label
    input {
        flex-grow: 1;
        width: auto;
    }

    .admin_list
    .adminLeft
    label
    input::placeholder {
        color: var(--color-gray03);
    }

    .admin_list
    .adminLeft
    .required { color: var(--color-subRe01); }

    .admin_list
    .enroll_btn {
        width: 100%;
        height: 6rem;
    }
    /*Admin_register*/

    /*Admin_CRM*/

    .adminCrmConArea {
        display: inline-block;
    }

    .adminCrmRecentArea {
        display: inline-block;
        background-color: #364041;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color : #364041;
        float: left;
        width: 250px;
        height: 100%;
    }

    .adminCrmRecentArea
    .copInfoArea {
        display: inline-block;
        float: left;
        vertical-align: top;
        width: 100%;
        height: auto;
    }

    .adminCrmRecentArea
    .copInfoArea
    li {
        display: inline-block;
        vertical-align: top;
        width: 95%;
        height: auto;
        border-style: solid;
        border-color: #5A5869;
        border-width: 0 0 1px 0;
    }

    .adminCrmRecentArea
    .copInfoArea
    li
    .copLogo{
        margin: 10px auto;
        display: inline-block;
        vertical-align: top;
        border: 1px solid #DCDCDC;
        border-radius: 5px;
        background-color: #ffffff;
        width: 200px;
        height: 70px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-color: #ffffff;
        line-height: 100px;
        background-size: auto 70px;
    }

    .adminCrmRecentArea
    .copInfoArea
    li
    label {
        margin: 5px auto;
        display: inline-block;
        float: left;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: left;
        text-indent: 10px;
        color: #4A84D1;
        font-weight: 700;
        font-size: 17px;
    }

    .adminCrmRecentArea
    .copInfoArea
    li
    span {
        display: inline-block;
        float: right;
        width: 220px;
        min-height: 30px;
        line-height: 23px;
        text-align: left;
        color: #ffffff;
        font-size: 15px;
    }

    .adminCrmConArea
    .crmContTitle {
        display: inline-block;
        border: 1px solid #E3E5E8;
        background-color: #EAEFF3;
        float: left;
        width: 493px;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }


    .adminCrmConArea
    .crmContSub {
        display: inline-block;
        float: left;
        width: 495px;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .crmContTitle
    .crmTab {
        margin-top: 10px;
        padding: 0;
        display: inline-block;
        vertical-align: top;
        height: 40px;
        width: 100%;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #569DF4;
    }

    .crmContTitle
    .crmTab
    ul
    li {
        display: inline-block;
        float: left;
        vertical-align: top;
        height: 39px;
        line-height: 39px;
        width: 80px;
        border-radius: 5% 5% 0 0;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        border-color: #E5E5E5;
        background-color: #FAFAFA;
        margin-left: 3px;
        cursor: pointer;
    }

    .crmContTitle
    .crmTab
    ul
    li.active {
        color: #ffffff;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        border-color: #569DF4;
        background-color: #569DF4;
    }

    .crmContTitle
    .crmListSummary {
        display: inline-block;
        height: auto;
        width: 480px;
        vertical-align: top;
    }

    .crmContTitle
    .crmListSummary
    ul
    .crmListCont {
        border-style: solid;
        border-color: #BEBEBE;
        border-width: 0 0 1px 0;
        height: auto;
        display: inline-block;
        cursor: pointer;
        vertical-align:top;
    }

    .crmContTitle
    .crmListSummary
    ul
    .crmListCont:hover {
        background-color: #CBE1F2;
    }

    .crmContTitle
    .crmListSummary
    ul
    .crmListCont.checked {
        background-color: #CBE1F2;
    }

    .crmContTitle
    .crmListSummary
    ul
    li
    .titleNm {
        display: inline-block;
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: left;
        text-indent: 10px;
        color: #3B73D1;
        font-weight: 700;
        font-size: 13px;

    }

    .crmContTitle
    .crmListSummary
    ul
    li
    .title {
        display: inline-block;
        float: left;
        width: 253px;
        height: 30px;
        line-height: 30px;
        text-align: left;
        text-indent: 10px;
        color: #333333;
        font-weight: 700;
        font-size: 15px;
    }

    .crmContTitle
    .crmListSummary
    ul
    li
    .date {
        display: inline-block;
        float: left;
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: right;
        text-indent: 10px;
        color: #EF806D;
        font-weight: 700;
        font-size: 13px;
    }

    .crmContTitle
    .crmListSummary
    ul
    li
    .content {
        display: inline-block;
        float: center;
        width: 435px; /*455*/
        max-height: 50px;
        line-height: 23px;
        text-align: left;
        text-indent: 10px;
        color: #9D9DB2;
        font-weight: 700;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .crmContTitle
    .crmListSummary
    ul
    li
    .content.active {
        color: #ffffff;
    }

    .crmContSub
    .crmTab
    ul
    li.active {
        color: #ffffff;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        border-color: #569DF4;
        background-color: #569DF4;
    }

    .crmContSub
    .crmContMain {
        display: inline-block;
        vertical-align: top;
        height: auto;
        width: 100%;
        float: left;
        display: none;
    }


    #crmContMainId {
        display: none;
    }

    #crmContMainId.active {
        display: block;
    }

    #crmAddId {
        display: none;
    }

    #crmAddId.active {
        display: block;
    }


    .crmContMain
    ul {
        vertical-align: top;
        float: left;
        display: inline-block;
        width: 473px;
        height: auto;
        margin: 10px 0px 0px 10px;
    }

    .crmContMain
    li {
        display: inline-block;
        border-style: solid;
        border-color: #BEBEBE;
        border-width: 1px 1px 1px 1px;
        background-color : #F5F5F5;
        border-radius: 3px;
    }

    .crmContMain
    li
    .adminNm {
        display: inline-block;
        line-height: 30px;
        float: left;
        width: 300px;
        height: 30px;
        text-align: left;
        text-indent: 10px;
        font-size: 15px;
        font-weight: 700;
        color: #333333;
    }

    .crmContMain
    li
    .adminDate {
        display: inline-block;
        line-height: 30px;
        float: left;
        width: 170px;
        height: 30px;
        text-align: left;
        text-indent: 35px;
        font-size: 15px;
        font-weight: 700;
        color: #333333;
    }

    .crmContMain
    li
    .adminUserInfo {
        display: inline-block;
        vertical-align: top;
        line-height: 30px;
        float: left;
        width: 468px;
        height: 30px;
        text-align: left;
        font-size: 15px;
        text-indent: 10px;
        font-weight: 700;
        color: #333333;
    }

    .crmContMain
    ul
    .historyCont {
        float: left;
        display: inline-block;
        vertical-align: top;
        width: 473px;
        height: auto;
        letter-spacing: 0.5px;
        line-height: 25px;
        text-align: justify;
        text-indent: 10px;
        margin: 0 auto;
        padding: 10px;
    }

    .crmContMain
    ul
    li
    .historyReplyBtn {
        display: inline-block;
        border: 0px solid #569DF4;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        float: left;
        text-align: left;
        padding-left: 10px;
        color: #ED514F;
        cursor: pointer;
        margin: 5px;
        font-weight: 700;
    }

    .crmContMain
    ul
    li
    .historyReplyArea {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: auto;
        display: none;
    }

    .crmContMain
    ul
    li
    .historyReplyArea.active {
        display: block;
    }

    .crmContMain
    ul
    li
    .historyReplyLine {
        vertical-align: top;
        float: left;
        display: inline-block;
        border-style: dotted;
        border-color: #569DF4;
        border-width: 0 0 2px 2px;
        width: 15px;
        height: 20px;
        margin-left: 10px;
    }

    .crmContMain
    ul
    li
    .historyReplyText {
        display: inline-block;
        float: left;
        vertical-align: top;
        width: 440px;
        height: auto;
        padding: 5px;
        text-align: justify;
        font-size: 14px;
        color: #3B73D1;
        line-height: 20px;
        letter-spacing: 0.5px;
    }

    .crmContMain
    ul
    li
    .historyReplyWrite {
        display: inline-block;
        float: left;
        vertical-align: top;
        width: 100%;
        height: auto;
        padding-right: 20px;
        text-align: right;
        font-size: 14px;
        color: #333333;
        line-height: 25px;
        font-weight: 700;
        font-style: italic;
    }

    .crmContMain
    ul
    li
    .historyReplyArea
    .historyReplyLine {
        vertical-align: top;
        float: left;
        display: inline-block;
        border-style: dotted;
        border-color: #569DF4;
        border-width: 0 0 2px 2px;
        width: 15px;
        height: 20px;
        margin-left: 10px;
    }

    .crmContMain
    ul
    li
    .historyReplyArea
    input {
        vertical-align: top;
        border: 1px solid #A9A9A9;
        width: 380px;
        height: 35px;
        resize: none;
        float: left;
        display: inline-block;
        outline: none;
        text-indent: 10px;
        font-size: 15px;
        color: #333333;
        letter-spacing: 1px;
    }

    .crmContMain
    ul
    .historyReplyArea
    button {
        vertical-align: top;
        display: inline-block;
        border: 1px solid #569DF4;
        width: 50px;
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        float: right;
        text-align: right;
        padding-right: 10px;
        color: #569DF4;
        cursor: pointer;
        margin: 2px 5px 10px 5px;
        outline: none;
        background-color: #569DF4;
        color: #ffffff;
    }

    .historyContInputArea {
        margin: 10px auto;
        float: right;
        display: inline-block;
        vertical-align: top;
        width: 473px;
        height: auto;
        padding: 10px;
        letter-spacing: 2px;
        line-height: 25px;
        text-align: justify;
        text-indent: 10px;
        border-style: solid;
        border-color: #569DF4;
        border-width: 0 0 1px 0;
    }

    .historyContInputArea
    textarea {
        display: inline-block;
        float: left;
        resize: none;
        padding: 10px;
        font-size: 15px;
        outline: none;
    }

    .historyContInputArea
    select {
        display: inline-block;
        float: left;
        width: 100px;
        height: 36px;
        vertical-align: top;
        text-align: center;
        margin-top: 8px;
    }

    .crmContMain
    .adminListArea {
        display: inline-block;
        vertical-align: top;
        height: auto;
        width: 456px;
        float: left;
    }

    .crmContMain
    .adminListArea
    ul
    li {
        display: inline-block;
        vertical-align: top;
        height: auto;
        width: 430px;
        float: left;
        background-color: #EAEFF3;
        border-radius: 5px;
        margin: 2px auto;
        cursor: pointer;
    }

    #crmAddId
    .adminListArea
    ul
    li:hover {
        cursor: pointer;
    }

    .crmContMain
    .adminListArea
    ul
    li.active {
        background-color: #569DF4;
        border: 1px solid #569DF4;
    }

    .crmContMain
    .adminListArea
    ul
    li
    .cardRadio {
        display: inline-block;
        vertical-align: top;
        height: 35px;
        width: 30px;
        float: left;
        outline: none;
    }

    .crmContMain
    .adminListArea
    ul
    li
    .cardForm {
        display: inline-block;
        vertical-align: top;
        height: auto;
        line-height: 35px;
        float: left;
        color: #333333;
        font-size: 14px;
        letter-spacing: 0px;
        text-indent: 0px;
        text-align: center;
        word-break: break-all;
    }

    .crmContMain
    .adminListArea
    ul
    .userAddArea {
        background-color: #EAEFF3;
        border: 1px solid #569DF4;
        border-radius: 3px;
        margin-bottom: 15px;
        display: none;
    }

    .crmContMain
    .adminListArea
    ul
    .userAddArea.show {
        display: block;
    }

    .crmContMain
    .adminListArea
    ul
    li
    .cardAddLabel {
        display: inline-block;
        vertical-align: top;
        height: 30px;
        line-height: 40px;
        float: left;
        font-weight: 700;
        font-size: 14px;
        color: #569DF4;
        text-indent: 0px;
        text-align: center;
    }

    .crmContMain
    ul
    li
    .cardAddInput {
        display: inline-block;
        vertical-align: top;
        height: 30px;
        line-height: 30px;
        float: left;
        text-indent: 5px;
        outline:none;
        margin: 3px;
        border-radius: 3%;
        border: 1px solid #A8A8A8;
        font-size: 14px;
        color: #333333;
    }
    /*Admin_CRM*/

    /*Admin_Test*/

    /*Admin_Test*/

    /*Admin_Board*/
    div.adminBoardCenterTitle {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 42px;
        vertical-align: top;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #888888;
        margin-bottom: -10px;
    }

    div.adminBoardCenterTitle
    ul.boardTitle {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    div.adminBoardCenterTitle
    ul.boardTitle
    li {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 0 1px 0;
    }

    div.adminBoardCenterTitle
    ul.boardTitle
    li
    span.boardForm {
        display: inline-block;
        line-height: 30px;
        height: 30px;
        float: left;
        vertical-align: top;
        color: #333333;
        font-size: 14px;
        font-weight: 500;
    }

    div.adminBoardCenterArea {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul {
        display: inline-block;
        height: auto;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li {
        position: relative;
        vertical-align: top;
        display: inline-block;
        height: auto;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
        cursor: pointer;
        padding: 10px 0 10px 0;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.boardContForm {
        display: inline-block;
        height: auto;
        float: left;
        vertical-align: top;
        text-align: center;
        color: #323232;
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li.boardTitleSummary:hover {
        background-color: rgba(201,225,255,0.5);
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li.boardContDetail {
        vertical-align: top;
        display: inline-block;
        width: 100%;
        height: auto;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #DEDEDE;
        background-color: #ffffff;
        font-weight: 300;
        display: none;
        font-size: 14px;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    div.boardContDetail.active {
        display: block;
        font-weight: 300;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.historyReplyLine {
        vertical-align: top;
        float: left;
        display: inline-block;
        border-style: dotted;
        border-color: #569DF4;
        border-width: 0 0 2px 2px;
        width: 60px;
        height: 30px;
        margin: 10px;
        margin-left: 100px;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.detailTitleCont {
        display: inline-block;
        float: center;
        width: 840px;
        height: auto;
        padding: 5px;
        text-align: left;
        word-break: normal;
        white-space: normal;
        font-size: 16px;
        font-weight: 500;
        font-color: #222222;
        line-height: 25px;
        border-width: 0 0 0 0;
        border-style: solid;
        border-color: #d9d9d9;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.DetailCont {
        display: inline-block;
        float: center;
        width: 840px;
        height: auto;
        padding: 20px;
        text-align: left;
        word-break: normal;
        white-space: normal;
        border-width: 0 0 0 0;
        border-style: solid;
        border-color: #d9d9d9;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.DetailCont
    p {
        display: inline-block;
        line-height: 25px;
        letter-spacing: 0.5px;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.DetailBtnArea {
        display: inline-block;
        vertical-align: top;
        float: left;
        width: 1240px;
        height: 60px;
        text-align: left;
        line-height: 20px;
        letter-spacing: 0.5px;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #DEDEDE;
    }

    div.adminBoardCenterArea
    div.adminBoardCenterCont
    ul
    li
    span.DetailBtnArea
    button.DetailBtn {
        display: inline-block;
        vertical-align: top;
        float: left;
        padding: 5px;
        width: auto;
        height: auto;
        text-align: center;
        background-color: #ffffff;
        color: #0175B1;
        font-size: 14px;
        font-weight: 300;
        border: 1px solid #0175B1;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    /*Admin_Board*/

    /*Manager_Main2*/
    .managerHeaderArea {
        display: inline-block;
        height: 100px;
        width: 100%;
        background-color: #4E7DBA;
    }

    .managerHeaderArea
    .managerHeader {
        display: inline-block;
        height: 100px;
        width: 1240px;
        background-color: #4E7DBA;
    }

    .managerHeaderArea
    .managerHeader
    .managerDashBoard {
        display: inline-block;
        vertical-align: top;
        float: center;
        height: 80px;
        width: 220px;
        margin: 10px;
    }

    .managerHeaderArea
    .managerHeader
    .managerDashBoard {
        border-style: solid;
        border-width: 0 0 0 1px;
        border-color: #7C9FCC;
    }

    .managerHeaderArea
    .managerHeader
    .managerDashBoard
    label {
        display: inline-block;
        vertical-align: top;
        color: #97E7FD;
        height: 30px;
        width: 100%;
        text-align: center;
        text-indent: 15px;
    }

    .managerHeaderArea
    .managerHeader
    .managerDashBoard
    span {
        vertical-align: top;
        display: inline-block;
        color: #FFFFFF;
        height: 50px;
        width: 100%;
        line-height: 50px;
        font-size: 40px;
        text-align: center;
        text-indent: 15px;
    }
    /*Manager_Main2*/

    /*Manager_Main3*/
    .managerListHeaderArea {
        display: inline-block;
        width: 100%;
        margin-bottom: 6rem;
        background-color: var(--color-gray06);
    }

    .managerListHeaderArea .title_wrap {
        align-items: flex-start;
    }

    .managerListHeaderArea .managerListHeader_cont_wrap {
        display: flex;
        gap: 3rem;
        width: 1600px;
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: 6rem;
    }

    .managerListHeaderArea .contents_wrap {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-md);
    }
    .test_user_list .managerListHeaderArea .contents_wrap {
        padding: 3rem;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.15);
    }

    .managerListHeaderArea .managerListHeader {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: calc(100% - 25.2rem) 22rem;
        grid-template-rows: max-content auto max-content;
        gap: var(--space-el-x-sm) var(--space-el-x-lg);
    }

    .managerListHeaderArea .canvas_wrap {
        position: relative;
    }
    .managerListHeaderArea .canvas_wrap .percent {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .managerListHeaderArea .legend_wrap span:first-of-type::before {
        background-color: #02DDB5;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListyn
    span.updateIcon {
        display: inline-block;
        position: relative;
        width: auto;
        height: auto;
        border: 1px solid #fafafa;
        background-color: #fafafa;
        color: #222222;
        cursor: pointer;
        margin-left: 15px;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListyn
    span.updateIcon::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 76px;
        width: 0px;
        height: 0px;
        border-width: 10px;
        border-color: transparent transparent transparent #fafafa ;
        border-style: solid;
    }

    div.sitemapRoute
    div.sitemapArea
    div.processArea {
        display: inline-block;
        position: relative;
        float: right;
        width: auto;
        height: auto;
    }

    div.sitemapRoute
    div.sitemapArea
    div.processArea
    span.ProcessStep {
        display: inline-block;
        position: relative;
        vertical-align: top;
        width: 110px;
        height: auto;
        padding: 5px;
        font-size: 15px;
        color: #4E7DBA;
        cursor: default;
        border: 1px solid #4E7DBA;
        border-radius: 50px;
    }

    div.sitemapRoute
    div.sitemapArea
    div.processArea
    span.ProcessStep.Active {
        border: 1px solid #4E7DBA;
        background-color: #4E7DBA;
        color: #ffffff;
    }

    .managerListHeaderArea
    .managerListHeader
    .managerListTitle {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        display: flex;
        flex-direction: column;
        gap: var(--space-el-xx-sm);
    }

div.managerListHeaderArea
ul.managerListHeader
li.ListGraphArea.Off {
  background-color: #575E61;
}

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListProcess {
        position: relative;
        display: inline-block;
        vertical-align: top;
        float: left;
        height: 120px;
        width: 380px;
        cursor: default;
    }

    .managerListHeaderArea .resultBtn_wrap {
        grid-column: 1 / 3;
    }

    .managerListHeaderArea .resultBtn_wrap [class*="cm_btn"] {
        order: 1;
    }

    .howlogin {
        justify-content: flex-end;
        align-self: center;
        position: relative;
    }

    .howlogin .ico_info {
        width: fit-content;
        cursor: pointer;
    }

    .howlogin .mark02 {
        display: none;
        position: absolute;
        left: 0;
        top: 2.4rem;
        min-width: max-content;
        padding: var(--space-el-xx-sm) var(--space-el-sm);
        background-color: #fff;
        border: 1px solid var(--color-gray04);
        border-radius: 4px;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
    }

    .howlogin .ico_info:hover + .mark02 { display: block; }
    
    div.managerListHeaderArea
    ul.managerListHeader
    li.managerResultBtn
    span.tooltipBox {
        position: absolute;
        bottom: -30px;
        left: 15px;
        width : 180px;
        height: auto;
        background-color: #444444;
        padding: 5px;
        border-radius: 5px;
        display: none;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerResultBtn
    span.tooltipBox:before {
        content: '';
        position: absolute;
        top: -8px;
        left: 10px;
        border: 10px solid transparent;
        border-top:none;
        border-bottom-color: #444444;
    }

    /*animation*/
    div.managerListHeaderArea
    ul.managerListHeader
    div.loader {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 30px;
        text-align: center;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    div.loader
    span.loaderDot {
        display: inline-block;
        border: 1px solid #525252;
        background-color: #525252 ;
        border-radius: 100px;
        width: 13px;
        height: 13px;
        padding: 0;
        margin: 0 auto;
        float: center;
        margin: 18px 0 0 40px;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    div.loader
    span.loadergrow {
        display: inline-block;
        border: 1px solid #525252;
        background-color: #525252;
        border-radius: 100px;
        width: 3px;
        height: 13px;
        padding: 0;
        margin: 0 auto;
        float: center;
        margin: 15px 0 0 38px;
    }

    #loader-2 span:nth-child(1){
        animation: opacitychange 1s ease-in-out infinite;
    }

    #loader-2 span:nth-child(2){
        animation: opacitychange 1s ease-in-out 0.33s infinite;
    }

    #loader-2 span:nth-child(3){
        animation: opacitychange 1s ease-in-out 0.66s infinite;
    }



    #loader-6 span:nth-child(1){
        animation: grow 1s ease-in-out infinite;
    }

    #loader-6 span:nth-child(2){
        animation: grow 1s ease-in-out 0.15s infinite;
    }

    #loader-6 span:nth-child(3){
        animation: grow 1s ease-in-out 0.30s infinite;
    }

    #loader-6 span:nth-child(4){
        animation: grow 1s ease-in-out 0.45s infinite;
    }



    #loader-3 span:nth-child(1){
        animation: bounce 1s ease-in-out infinite;
    }

    #loader-3 span:nth-child(2){
        animation: bounce 1s ease-in-out 0.33s infinite;
    }

    #loader-3 span:nth-child(3){
        animation: bounce 1s ease-in-out 0.66s infinite;
    }



    #loader-8:before{
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        top: 20px;
        left: 20px;
        border-radius: 100%;
        border: 1px solid #525252;
        background-color: #525252;
        animation: rotatemove 2s infinite;
    }


    div.managerListHeaderArea
    ul.managerListHeader
    li.managerResultBtn
    button.ProcessStepBtn
    i {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 35px;
        color: #4E7DBA;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListProcess
    span.ProcessStep
    span.ProcessDone {
        isplay: inline-block;
        position: absolute;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListCount
    button {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        border-style: solid;
        border-width: 1px 3px 3px 1px;
        border-color: #DF0000;
        background-color: #E72B2D;
        color: #ffffff;
        font-size: 18px;
        cursor: pointer;
        outline: none;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListCount
    span.red {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: 50px;
        width: 100%;
        color: #ffffff;
        font-size: 20px;
        line-height: 60px;
        font-weight: 500;
        color: #BFE6F3;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.managerListCount
    label {
        display: inline-block;
        vertical-align: top;
        float: left;
        height: 30px;
        width: 100%;
        line-height: 30px;
        color: #ffffff;
    }

    div.managerListHeaderArea
    ul.managerListHeader
    li.ListGraphArea
    label {
        display: inline-block;
        text-align: top;
        color: #ffffff;
        font-size: 15px;
        line-height: 30px;
        height: 30px;
        margin-top: 10px;
        font-weight: 500;
    }

    .managerListHeaderArea
    .managerListHeader
    .managerListTitle
    label{
        display: inline-block;
        vertical-align: top;
        color: #97E7FD;
        height: 30px;
        width: 100%;
        text-align: center;
        text-indent: 15px;
    }

    .managerListHeaderArea .managerListTitle .mark03 span:nth-of-type(2)::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 1rem;
        margin: 0 1.2rem;
        background-color: var(--color-gray03);
    }
    /*Manager_Main3*/

    /*Manager_List*/
    .addPersonArea {
        position: relative;
        top: 35px;
        left: 340px;
        width: 80px;
        height: 30px;
        display: inline-block;
        z-index: 5;
        display: none;
        vertical-align: top;
    }

    .addPersonArea.active {
        display: inline-block;
    }

    .addPersonArea
    ul {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-color: #569DF4;
        border-width: 1px 0 0 0;
    }

    .addPersonArea
    ul
    li {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #569DF4;
        border-style: solid;
        border-color: #569DF4;
        border-width: 0 1px 1px 1px;
        background-color: #ffffff;
        vertical-align: top;
        display: none;
        font-weight: 700;
    }

    .addPersonArea
    ul
    li.On {
        display: inline-block;
    }

    .addPersonArea
    ul
    li:hover {
        color: #ffffff;
        border: 1px solid #569DF4;
        background-color: #569DF4;
    }

    /* testList */
    .test_list
    content
    ul
    li
    span { padding: 0; }

    .test_list
    content
    ul
    li
    [class*="ico"] { opacity: 0.6; }

    .test_list
    content
    ul
    li
    .cancelBtn
    span { vertical-align: middle; }


    /*sms*/
    .sendSmsArea {
        position: relative;
        top: 35px;
        left: 425px;
        width: 80px;
        height: 40px;
        display: inline-block;
        z-index: 5;
        display: none;
    }

    .sendSmsArea.active {
        display: inline-block;
    }

    .sendSmsArea
    ul {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-color: #569DF4;
        border-width: 1px 0 0 0;
    }

    .sendSmsArea
    ul
    li {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #569DF4;
        border-style: solid;
        border-color: #569DF4;
        border-width: 0 1px 1px 1px;
        background-color: #ffffff;
        vertical-align: top;
        display: none;
        font-weight: 700;
    }

    .sendSmsArea
    ul
    li.On {
        display: inline-block;
    }

    .sendSmsArea
    ul
    li:hover {
        color: #ffffff;
        border: 1px solid #569DF4;
        background-color: #569DF4;
    }
    /*sms*/

    /*email*/
    .sendEmailArea {
        position: relative;
        top: 35px;
        left: 510px;
        width: 80px;
        height: 30px;
        display: inline-block;
        z-index: 5;
        display: none;
        vertical-align: top;
    }

    .sendEmailArea.active {
        display: inline-block;
    }

    .sendEmailArea
    ul {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-color: #569DF4;
        border-width: 1px 0 0 0;
    }

    .sendEmailArea
    ul
    li {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #569DF4;
        border-style: solid;
        border-color: #569DF4;
        border-width: 0 1px 1px 1px;
        background-color: #ffffff;
        vertical-align: top;
        display: none;
        font-weight: 700;
    }

    .sendEmailArea
    ul
    li.On {
        display: inline-block;
    }

    .sendEmailArea
    ul
    li:hover {
        color: #ffffff;
        border: 1px solid #569DF4;
        background-color: #569DF4;
    }
    /*email*/

    .noticeSetting .modal_cont { max-width: 77.4rem; }

    .noticeSetting .noticeSettingTitle { margin-bottom: var(--space-el-lg); }

    .testUserAddTime label {
        display: block;
        margin: var(--space-el-lg) 0 var(--space-el-x-sm);
    }

    .testUserAddTime button { flex: 1 0 auto; }

    modal.resulttip {
        width: auto;
        height: auto;
        display: inline;
        position: fixed;
        z-index: 11;
        left: 35%;
        top: 0;
        overflow-y: auto;
        display: none;
        overflow: hidden;
    }

    modal.resulttip
    div.resulttipArea  {
        position: relative;
        margin: 150px auto;
        border-radius: 3px;
        display: inline-block;
        width: 400px;
        height: 510px;
        background-color: #ffffff;
        border: 1px solid #333333;
        z-index: 11;
    }

    modal.resulttip
    div.resulttipArea
    ul  {
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
        padding: 20px;
        z-index: 11;
    }

    modal.resulttip
    div.resulttipArea
    ul
    li  {
        position: relative;
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        border: 1px solid #d8d8d8;
        z-index: 11;
        margin-top: 10px;
        background-color: #fafafa;
        padding-top: 10px;
        font-size: 15px;
        font-weight: 500;
    }

    modal.resulttip
    div.resulttipArea
    ul
    li
    label  {
        position: relative;
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        z-index: 11;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
    }

    modal.resulttip
    div.resulttipArea
    ul
    li
    label
    i  {
        position: relative;
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        z-index: 11;
        text-align: center;
        font-size: 20px;
    }

    modal.resulttip
    div.resulttipArea
    ul
    li
    label
    span  {
        position: relative;
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        line-height: 26px;
        text-align: center;
        padding: 5px;
        margin-top: 5px;
        z-index: 11;
        font-size: 15px;
        font-weight: 500;
    }

    modal.resulttip.active {
        display: block;
        height: 100%;
    }

    .personAdd
    .personAddForm {
        max-width: 56rem;
    }

    .personAdd
    .personAddForm
    .personAddTitle {
        margin-bottom: var(--space-el-lg);
    }

    modal.personAdd
    div.personAddForm
    div.personAddTitle
    span.noguide {
        display: inline-block;
        width: 100%;
        height: auto;
        font-size: 13px;
        font-weight: 300;
        color: #E84E71;
        text-align: center;
        margin-top: -5px;
    }

    modal.personAdd
    div.personAddForm
    ul.singleAuth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .personAdd
    .personAddForm
    ul
    li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: 10rem auto;
        align-items: center;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-md);
    }

    .personAdd
    .personAddForm
    ul
    li.btn_wrap {
        justify-content: end;
        margin: var(--space-el-lg) 0 0;
    }

    modal.personAdd
    div.personAddForm
    div
    ul.singleAuth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.personAdd
    div.personAddForm
    div
    ul.singleAuth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    modal.personAdd
    div.personAddForm
    ul
    li
    input:hover {
        border: 1px solid #4A84D1;
    }

    modal.personAddMulty
    div.personAddMultyForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .personAddMulty
    .personAddMultyForm
    ul {
        margin-top: var(--space-el-lg);
    }

    .personAddMulty
    .personAddMultyForm
    ul
    li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: 9.2rem auto;
        align-items: center;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-md);
    }

    modal.personAddMulty
    div.personAddMultyForm
    ul.auth
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.personAddMulty
    div.personAddMultyForm
    div
    ul.auth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.personAddMulty
    div.personAddMultyForm
    ul
    li
    input:focus {
        border: 2px solid #4A84D1;
    }

    .personAddMulty
    .personAddMultyForm
    div
    ul.auth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    modal.updateBatch
    div.updateBatchForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .updateBatch .updateBatchForm ul {
        margin-top: var(--space-el-lg);
    }

    .updateBatch
    .updateBatchForm
    li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: 9.2rem auto;
        align-items: center;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-md);
    }

    modal.updateBatch
    div.updateBatchForm
    ul.auth
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.updateBatch
    div.updateBatchForm
    div
    ul.auth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.updateBatch
    div.updateBatchForm
    ul
    li
    input:focus {
        border: 2px solid #4A84D1;
    }

    modal.updateBatch
    div.updateBatchForm
    div
    ul.auth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    modal.updateBatch
    div.updateBatchForm
    ul
    li
    input[type="file"] {
        display: inline-block;
        width: 260px;
        height: 40px;
        line-height: 40px;
        margin-top: 2px;
        outline: none;
        text-indent: 0;
        text-align: right;
        border: 0px solid #566570;
    }
    
    modal.addPointUpload
    div.addPointUploadForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .addPointUpload .addPointUploadForm ul {
        margin-top: var(--space-el-lg);
    }

    .addPointUpload
    .addPointUploadForm
    li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: 9.2rem auto;
        align-items: center;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-md);
    }

    modal.addPointUpload
    div.addPointUploadForm
    ul.auth
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.addPointUpload
    div.addPointUploadForm
    div
    ul.auth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.addPointUpload
    div.addPointUploadForm
    ul
    li
    input:focus {
        border: 2px solid #4A84D1;
    }

    modal.addPointUpload
    div.addPointUploadForm
    div
    ul.auth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    modal.addPointUpload
    div.addPointUploadForm
    ul
    li
    input[type="file"] {
        display: inline-block;
        width: 260px;
        height: 40px;
        line-height: 40px;
        margin-top: 2px;
        outline: none;
        text-indent: 0;
        text-align: right;
        border: 0px solid #566570;
    }

    modal.adjustmentCriteria
    div.adjustmentCriteriaForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .adjustmentCriteria .modal_cont {
        max-width: 40rem;
    }

    .adjustmentCriteria .adjustmentCriteriaForm ul {
        margin-top: var(--space-el-lg);
    }

    .adjustmentCriteria .adjustmentCriteriaForm li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: auto 20rem;
        gap: var(--space-el-sm);
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-el-md);
    }

    modal.printPageSet
    div.printPageSetForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    modal.printPageSet
    div.printPageSetForm
    ul {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .printPageSet li label {
        display: block;
        margin-bottom: var(--space-el-x-sm);
    }
    .printPageSet li .btn_wrap {
        width: 100%;
    }

    .printPageSet li .btn_wrap button { flex: 1 1 50%; }

    modal.printOrder {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: inline;
        position: fixed;
        z-index: 11;
        left: 0;
        top: 0;
        overflow-y: auto;
        display: none;
    }

    modal.printOrder.active {
        display: block;
        height: 100%;
    }

    modal.printOrder
    div.printOrderForm {
        position: relative;
        margin: 100px auto;
        border-radius: 3px;
        display: inline-block;
        width: 400px;
        height: auto;
        background-color: #ffffff;
        z-index: 11;
    }

    modal.printOrder
    div.printOrderForm
    div.printOrderTitle {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 60px;
        float: left;
        color: #222222;
        line-height: 60px;
        text-align: center;
        text-indent: 10px;
        font-size: 20px;
        font-weight: 300;
        background-color: #fafafa;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
    }

    modal.printOrder
    div.printOrderForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    modal.printOrder
    div.printOrderForm
    ul {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    modal.printOrder
    div.printOrderForm
    ul
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 40px;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.printOrder
    div.printOrderForm
    ul.auth
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.printOrder
    div.printOrderForm
    ul
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.printOrder
    div.printOrderForm
    div
    ul.auth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.printOrder
    div.printOrderForm
    ul
    li
    input:focus {
        border: 2px solid #4A84D1;
    }

    modal.printOrder
    div.printOrderForm
    div
    ul.auth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    modal.printOrder
    div.printOrderForm
    ul
    li
    input[type="file"] {
        display: inline-block;
        width: 260px;
        height: 40px;
        line-height: 40px;
        margin-top: 2px;
        outline: none;
        text-indent: 0;
        text-align: right;
        border: 0px solid #566570;
    }

    modal.printSetting
    div.printSettingForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .printSetting .printSettingForm ul {
        margin-top: var(--space-el-lg);
    }

    .printSetting .printSettingForm li:not(.btn_wrap) {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-md);
    }

    .printSetting .printSettingForm li .btn_wrap button {
        flex: 1 1 50%;
    }

    modal.printSetting
    div.printSettingForm
    ul.auth
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.printSetting
    div.printSettingForm
    div
    ul.auth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    span.downBtn {
        display: inline-block;
        float: left;
        width: 120px;
        height: auto;
        vertical-align: top;
        font-size: 15px;
        color: #ffffff;
        font-weight: 500;
        background-color: #46495b;
        text-align: center;
        padding: 5px;
        cursor: pointer;
    }

    a.downBtn {
        display: inline-block;
        float: left;
        width: 120px;
        height: auto;
        vertical-align: top;
        font-size: 15px;
        color: #ffffff;
        font-weight: 500;
        background-color: #46495b;
        text-align: center;
        padding: 5px;
        cursor: pointer;
    }

    .personAddOffline .personAddOfflineForm {
        max-width: 54.4rem;
    }

    .personAddOffline
    .personAddOfflineForm
    .personAddTitle {
        margin-bottom: var(--space-el-lg);
    }

    modal.personAddOffline
    div.personAddOfflineForm
    ul.offAuth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .personAddOffline
    .personAddOfflineForm
    ul
    li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: 9.2rem auto;
        align-items: center;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-md);
    }

    .personAddOffline
    .personAddOfflineForm
    ul
    li.btn_wrap {
        justify-content: end;
        margin: var(--space-el-x-lg) 0 0;
    }

    modal.personAddOffline
    div.personAddOfflineForm
    ul.offAuth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.personAddOffline
    div.personAddOfflineForm
    div
    ul.offAuth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    .userTestInfoDetail
    .userTestInfoDetailForm {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-lg);
        max-width: 85.6rem;
    }


    .test_user_list
    .modal_cont
    .userkey_num {
        margin-bottom: var(--space-el-x-sm);
        text-align: right;
    }

    .test_user_list
    .modal_cont
    input:not([type="radio"], [type="checkbox"]) {
        padding-top: var(--space-el-x-sm);
        padding-bottom: var(--space-el-x-sm);
    }

    .test_user_list
    .modal_cont
    .required { color: var(--color-subRe01); }

    .test_user_list
    .modal_cont
    > .cm_btn_pri {
        margin: var(--space-el-x-sm) 0 0 auto;
    }

    .test_user_list
    .personAdd
    .personAddForm
    ul
    li:not(.btn_wrap) {
        grid-template-columns: repeat(1, 1fr);
    }

    [class^="test_user_result_list"] .warning_wrap {
        width: fit-content;
        max-width: 90%;
        margin: 0 auto;
    }

    [class^="test_user_result_list"] .warning_wrap .indicator {
        display: inline-block;
        margin-right: var(--space-el-x-sm);
    }

    [class^="test_user_result_list"] .managerListHeader .date_wrap {
        margin: var(--space-el-x-lg) 0 4rem;
    }

    [class^="test_user_result_list"] .chart_area {
        grid-column: 1 / 3;
        display: flex;
        gap: 2rem;
    }

    [class^="test_user_result_list"] [class*="chart_wrap"] {
        flex: 1 0 10%;
        display: grid;
        grid-template-columns: calc(100% - 8.8rem) 8rem;
        gap: var(--space-el-x-sm);
        padding: 2rem;
        background-color: #fff;
        border: 1px solid var(--color-gray04);
        border-radius: 10px;
    }

    [class^="test_user_result_list"] .chart_wrap1 { grid-template-columns: 1fr; }

    [class^="test_user_result_list"] [class*="chart_wrap"] .tit::before {
        content: "";
        display: inline-block;
        width: 3.2rem;
        height: 3.2rem;
        margin-right: var(--space-el-x-sm);
        vertical-align: middle;
        background: var(--color-primary02) url(/resources/images/ico/ico_userResult_chart.svg) no-repeat center top 0.8rem/1.6rem auto;
        border-radius: 50%;
    }

    [class^="test_user_result_list"] .chart_wrap3 .tit::before {
        background-position: center top -2.4rem;
    }

    [class^="test_user_result_list"] .chart_wrap4 .tit::before {
        background-position: center top -5.6rem;
    }

    [class^="test_user_result_list"] .chart_wrap5 .tit::before {
        background-position: center top -8.8rem;
    }

    [class^="test_user_result_list"] .linechart {
        position: relative;
        height: 0.6rem;
        background-color: var(--color-gray04);
        border-radius: 1px;
    }

    [class^="test_user_result_list"] .barchart {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        gap: var(--space-el-x-sm);
    }

    [class^="test_user_result_list"] .bar {
        flex-grow: 1;
        height: 100%;
        background-color: var(--color-gray04);
        border-radius: 1px;
    }

    [class^="test_user_result_list"] .point { background-color: var(--color-primary); }

    [class^="test_user_result_list"] .linechart .point {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        border-radius: 1px;
    }

    .userCheatingDetail
    .userCheatingDetailForm {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-lg);
        max-width: 104rem;
    }

    .userCheatingDetail
    .userCheatingDetailForm
    th {
        padding: var(--space-el-xx-sm) var(--space-el-sm);
    }

    modal.normUpload
    div.normUploadForm
    ul.auth {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    .normUpload
    .normUploadForm
    ul {
        margin-top: var(--space-el-lg);
    }

    .normUpload
    .normUploadForm
    ul
    li:not(.btn_wrap) {
        display: grid;
        grid-template-columns: 9.2rem auto;
        align-items: center;
        gap: var(--space-el-x-sm);
        margin-bottom: var(--space-el-x-lg);
    }

    modal.normUpload
    div.normUploadForm
    ul.auth
    li {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 10px;
    }

    modal.normUpload
    div.normUploadForm
    div
    ul.auth
    li
    label {
        display: inline-block;
        float: left;
        width: 120px;
        height: 40px;
        vertical-align: top;
        line-height: 40px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: right;
        padding-right: 10px;
    }

    modal.normUpload
    div.normUploadForm
    ul
    li
    input:focus {
        border: 2px solid #4A84D1;
    }

    modal.normUpload
    div.normUploadForm
    div
    ul.auth
    li
    input {
        display: inline-block;
        float: left;
        width: 205px;
        height: 35px;
        vertical-align: top;
        line-height: 35px;
        font-size: 15px;
        color: #333333;
        font-weight: 300;
        text-align: left;
        outline: none;
        margin-top: 1px;
        text-indent: 3px;
    }

    /*Manager_List*/

    /*Manager_List2*/
    content
    ul.ListTotal {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    content
    ul.ListTotal
    li {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    .btnPrintArea {
        position: relative;
        top: 35px;
        left: 210px;
        width: 80px;
        height: 30px;
        display: inline-block;
        z-index: 5;
        display: none;
        vertical-align: top;
    }

    .btnPrintArea.active {
        display: inline-block;
    }

    .btnPrintArea ul {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-color: #569DF4;
        border-width: 1px 0 0 0;
    }

    .btnPrintArea ul li {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #569DF4;
        border-style: solid;
        border-color: #569DF4;
        border-width: 0 1px 1px 1px;
        background-color: #ffffff;
        vertical-align: top;
        display: none;
        font-weight: 700;
    }

    .btnPrintArea ul li.On {
        display: inline-block;
    }

    .btnPrintArea
    ul
    li:hover {
        color: #ffffff;
        border: 1px solid #569DF4;
        background-color: #569DF4;
        /*
  background-color: #569DF4;
  */
    }

    .btnExcelArea {
        position: relative;
        top: 35px;
        left: 295px;
        width: 80px;
        height: 30px;
        display: inline-block;
        z-index: 5;
        display: none;
        vertical-align: top;
    }

    .btnExcelArea.active {
        display: inline-block;
    }

    .btnExcelArea
    ul {
        display: inline-block;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-color: #569DF4;
        border-width: 1px 0 0 0;
    }

    .btnExcelArea
    ul
    li {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #569DF4;
        border-style: solid;
        border-color: #569DF4;
        border-width: 0 1px 1px 1px;
        background-color: #ffffff;
        /*
  background-color: #569DF4;
  border-radius: 50%;
  */
        vertical-align: top;
        display: none;
        font-weight: 700;
    }

    .btnExcelArea
    ul
    li.On {
        display: inline-block;
    }

    .btnExcelArea
    ul
    li:hover {
        color: #ffffff;
        border: 1px solid #569DF4;
        background-color: #569DF4;
        /*
  background-color: #569DF4;
  */
    }

    /*bargraph*/
    div.listViewArea {
        display: none;
    }

    div.listViewArea.active {
        display: block;
    }

    .listViewDetailArea {}

    .listViewDetailArea .container {
        display: flex;
        flex-direction: column;
        gap: 6rem;
        margin: 2rem 0 12rem;
    }

    .graphDivision {
        display: grid;
        grid-template-columns: auto 48.3rem;
        align-items: start;
        gap: var(--space-el-x-sm) 4rem;
    }

    .graphDivision .legend::before {
        width: 2rem;
        height: 2rem;
        background-color: rgba(59, 215, 150, 0.5);
        border: 1px solid var(--color-subGr01);
        border-radius: 4px;
    }

    .test_user_result_list04 .graphDivision {
        grid-template-columns: auto 54.6rem;
    }

    .tenacity_area .legend:nth-of-type(2)::before {
        background: linear-gradient(180deg, #7CE4B9 0%, #FFF 100%);
    }

    .job_area .legend::before {
        background-color: rgba(255, 72, 72, 0.5);
        border-color: var(--color-subRe01);
    }
    
    .job_area .legend:nth-of-type(2)::before {
        background: linear-gradient(180deg, #FF8484 0%, #FFF 100%);
    }

    .test_user_result_list04 .legend:nth-of-type(2)::before {
        background-color: rgba(124, 228, 185, 0.5);
    }

    .test_user_result_list04 .legend:nth-of-type(3)::before {
        background-color: rgba(219, 219, 219, 0.5);
        border-color: var(--color-gray04);
    }

    .test_user_result_list04 .testGraphTitleArea {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .testGraphTitleArea .info_wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
        width: 100%;
    }

    div.graphDivision
    div.piechartArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 500px;
        height: 400px;
        z-index: 0;
    }

    canvas.barChart {
        display: inline-block;
        float: left;
        width: 100%;
        height: 460px;
        z-index: 99;
        margin: 0 auto;
    }

    canvas.pieChart {
        display: inline-block;
        float: left;
        position: absolute;
        width: 500px;
        height: 400px;
        z-index: 99;
        margin: 0 auto;
    }

    canvas.polarChart {
        display: inline-block;
        float: left;
        position: absolute;
        width: 500px;
        height: 400px;
        z-index: 99;
        margin: 0 auto;
    }

    .testGraphTitleArea {
        display: flex;
        align-items: center;
    }

    .testGraphTitleArea .legend_wrap { margin-left: auto; margin-right: 3.3rem; }
    .testGraphTitleArea .legend_wrap .legend {
        border-radius: 4px;
    }

    div.testGraphTitleArea
    span.GraphNmArea {
        display: inline-block;
        vertical-align: top;
        width: 40px;
        height: 40px;
        font-size: 20px;
        text-align: center;
        background-color: #2c353e;
        color: #ffffff;
    }

    div.graphDrawing {
        display: inline-block;
        vertical-align: top;
        width: 800px;
        height: 400px;
        float: left;
        text-align: left;
        padding: 10px;
    }

    div.pieGraphDrawing {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: auto;
        float: left;
        text-align: left;
        padding: 10px;
    }

    div.matrixDrawing {
        display: inline-block;
        vertical-align: top;
        width: 500px;
        height: auto;
        float: left;
        text-align: left;
        padding: 10px;
    }

    div.graphScaleLabelArea {
        display: inline-block;
        width: 100%;
        height: 50px;
        margin-top: 20px;
    }

    div.graphScaleLabelArea
    label.scaleText {
        display: inline-block;
        float: left;
        width: 80px;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: #333333;
        font-weight: 700;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor {
        display: inline-block;
        float: left;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50px;
        margin-right: 5px;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor.e1 {
        background-color: #081d58;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor.e2 {
        background-color: #225ea8;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor.e3 {
        background-color: #6baed6;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor.e4 {
        background-color: #9e0142;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor.e5 {
        background-color: #f46d43;
    }

    div.graphScaleLabelArea
    label.scaleText
    span.scaleColor.e6 {
        background-color: #fee08b;
    }

    .tableArea {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    div.tableArea2 {
        display: inline-block;
        position: relative;
        vertical-align: top;
        width: 650px;
        height: auto;
        float: right;
        text-align: left;
        line-height: 50px;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #D1D1D1;
        overflow: hidden;
    }

    div.tableArea2
    span.detailtext {
        display: inline-block;
        position: absolute;
        vertical-align: top;
        width: 70px;
        line-height: 25px;
        top: 40px;
        right: -80px;
        text-align: center;
        font-size: 15px;
        color: #1F2F66;
        font-weight: 700;
        border-style: solid;
        border-width: 0 0 0 2px;
        border-color: #1F2F66;
        padding-top: 10px;
    }

    div.tableArea2
    span.detailtext:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 1px;
        top: -1px;
        left: -10px;
        border-color: #1F2F66;
        border-style: solid;
        border-width: 2px 0 0 0;
    }

    div.tableArea2
    span.detailtext:after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 1px;
        bottom: -1px;
        left: -10px;
        border-color: #1F2F66;
        border-style: solid;
        border-width: 0 0 2px 0;
    }


    div.tableArea2
    span.detailtext2 {
        display: inline-block;
        position: absolute;
        vertical-align: top;
        width: 70px;
        height: 100px;
        line-height: 25px;
        right: -80px;
        text-align: center;
        font-size: 15px;
        color: #333333;
        font-weight: 700;
        border-style: solid;
        border-width: 0 0 0 2px;
        border-color: #333333;
        padding-top: 10px;
    }


    div.tableArea2
    span.detailtext2:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 1px;
        top: -1px;
        left: -10px;
        border-color: #353634;
        border-style: solid;
        border-width: 2px 0 0 0;
    }

    div.tableArea2
    span.detailtext2:after {
        content: "";
        display: inline-block;
        position: absolute;
        width: 10px;
        height: 1px;
        bottom: -1px;
        left: -10px;
        border-color: #353634;
        border-style: solid;
        border-width: 0 0 2px 0;
    }

    div.matrixTableArea {
        display: inline-block;
        position: relative;
        vertical-align: top;
        width: 740px;
        height: 450px;
        float: left;
        text-align: left;
        line-height: 50px;
        padding: 0;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #D1D1D1;
    }

    div.tableArea2
    ul.detailInfoTable {
        display: inline-block;
        position: relative;
        width: 494px;
        height: 100%;
        vertical-align: top;
    }

    div.matrixTableArea
    ul.detailInfoTable {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 443px;
        vertical-align: top;
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: #D1D1D1;
        margin-top: 10px;
    }

    .tableArea .detailInfoTable .tableTitle {
        padding: var(--space-el-sm) 0;
        border-top: 1px solid var(--color-gray04);
        border-bottom: 1px solid var(--color-gray04);
        border-radius: 0;
    }

    .tableArea ul.detailInfoTable li:last-of-type {
        border-bottom: 1px solid var(--color-gray04);
    }

    .tableArea .detailInfoTable .tableCont {
        padding: 0;
    }

    .tableArea .detailInfoTable .tableCont.sumCont {
        background-color: var(--color-gray06);
    }

    .tableArea .detailInfoTable .tableCont span {
        padding: var(--space-el-xx-sm) 0;
    }

    .tableArea:not(.countTableArea) .detailInfoTable li span:last-of-type {
        flex: 1;
        text-align: left;
    }

    .tableArea .detailInfoTable li .graph {
        display: inline-block;
        height: 2rem;
        background-color: rgba(59, 215, 150, 0.5);
        border: 1px solid var(--color-subGr01);
    }

    .job_area .tableArea .detailInfoTable li .graph {
        background-color: rgba(255, 72, 72, 0.3);
        border-color: var(--color-subRe01);
    }

    .test_user_result_list04 .countTableArea span.countInfoTableCont {
        padding-bottom: 0;
    }

    .test_user_result_list04 .countTableArea .percent {
        display: block;
        margin-top: var(--space-el-xx-sm);
        background-color: var(--color-gray06);
    }

    div.tableArea2
    ul.detailInfoTable
    li.type1 {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 10%;
        vertical-align: top;
    }

    div.tableArea2
    ul.detailInfoTable
    li.type2 {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 10%;
        vertical-align: top;
    }

    div.tableArea2
    ul.detailInfoTable
    li:nth-child(1) {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-width: 0 0 2px 0;
        border-color: #d9d9d9;
    }

    div.matrixTableArea
    ul.detailInfoTable
    li {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
    }

    div.tableArea2
    ul.detailInfoTable
    li {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
    }

    div.tableArea2
    ul.detailInfoTable
    li
    span.InfoTableTitle {
        float: left;
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
        color: #333333;
        font-weight: 700;
        vertical-align: top;
        z-index: 0;
        background-color: rgba(241,241,241,0.0);
    }

    div.matrixTableArea
    ul.detailInfoTable
    li
    span.InfoTableTitle {
        float: left;
        display: inline-block;
        position: relative;
        height: 33px;
        line-height: 33px;
        text-align: center;
        font-size: 15px;
        color: #333333;
        font-weight: 700;
        vertical-align: top;
        z-index: 0;
        background-color: rgba(241,241,241,0.5);
    }


    div.matrixTableArea
    ul.detailInfoTable
    li
    span.InfoTableTitle.subTotal {
        background-color: #2c353e;
        color: #ffffff;
        font-weight: 300;
    }

    div.tableArea2
    ul.detailInfoTable
    li
    span.InfoTableCont {
        float: left;
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
        color: #333333;
        vertical-align: top;
    }

    div.tableArea
    ul.detailInfoTable
    li
    span.InfoTableCont.script {
        float: left;
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 15px;
        text-align: left;
        font-size: 13px;
        color: #333333;
        vertical-align: top;
        font-weight: 500;
        padding: 5px;
        text-indent: 5px;
    }

    div.tableArea
    ul.detailInfoTable
    li
    span.InfoTableCont.script2 {
        float: left;
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
        color: #394FFF;
        vertical-align: top;
        font-weight: 700;
    }

    div.tableArea
    ul.detailInfoTable
    li
    span.InfoTableCont.script3 {
        float: left;
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 15px;
        color: #BC1021;
        vertical-align: top;
        font-weight: 700;
    }

    ul.barGraphScaleYArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 50px;
        height: 320px;
    }

    ul.matrixScaleYArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 50px;
        height: 400px;
        background-color: #2c353e;
    }

    ul.matrixScaleYArea:before {
        content: "인성영역";
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 390px;
        color: #ffffff;
        padding-top: 10px;
        background-color: #225ea8;
        text-align: center;
    }

    ul.barGraphScaleYArea
    li.barGraphScaleY {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 25%;
    }

    ul.matrixScaleYArea
    li.matrixScaleY {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 33.33%;
        line-height: 120px;
        text-align: right;
        padding-right: 10px;
    }

    ul.matrixScaleYArea
    li.matrixScaleY
    span {
        font-weight: 700;
        color: #ffffff;
        font-size: 15px;
    }

    ul.barGraphScaleYArea
    li.barGraphScaleY
    span {
        display: inline-block;
        position: relative;
        float: left;
        line-height: 5px;
        font-size: 15px;
        color: #333333;
        width: 100%;
        height: 100%;
        text-align: right;
        font-weight: 700;
    }

    ul.barGraphScaleXArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 695px;
        height: 50px;
        margin-left: 50px;
    }

    ul.matrixGraphScaleXArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 420px;
        height: 40px;
        margin-left: 50px;
        background-color: #2c353e;
    }

    ul.matrixGraphScaleXArea:before {
        content: "적성영역";
        display: inline-block;
        position: absolute;
        float: left;
        bottom: 0;
        right: 0;
        width: 415px;
        height: 20px;
        color: #ffffff;
        background-color: #9E0142;
        text-align: right;
        padding-right: 5px;
    }

    ul.barGraphScaleXArea
    li.barGraphScaleX {
        display: inline-block;
        position: relative;
        float: left;
        width: 14.25%;
        height: 100%;
    }

    ul.matrixGraphScaleXArea
    li.matrixGraphScaleX {
        display: inline-block;
        position: relative;
        float: left;
        width: 33.33%;
        height: 100%;
        line-height: 20px;
        text-align: center;
        font-weight: 700;
    }

    ul.barGraphScaleXArea
    li.barGraphScaleX
    span {
        display: inline-block;
        position: relative;
        float: left;
        line-height: 45px;
        font-size: 15px;
        color: #333333;
        width: 100%;
        height: 100%;
        text-align: center;
        font-weight: 700;
    }

    ul.matrixGraphScaleXArea
    li.matrixGraphScaleX
    span {
        color: #ffffff;
        font-weight: 700;
    }

    ul.barGraphScaleXArea
    li.barGraphScaleX
    span:after {
        content: "";
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 0 1px 0 0;
        border-color: #D1D1D1;
        float: left;
        top: -10px;
        right: -1px;
        height: 10px;
        width: 1px;
    }

    div.barGraphGridArea {
        display: inline-block;
        position: relative;
        float: left;
        border-style: solid;
        border-color: #D1D1D1;
        border-width: 0 0 1px 1px;
        width: 695px;
        height: 320px;
    }

    div.matrixGridArea {
        display: inline-block;
        position: relative;
        float: left;
        border-style: solid;
        border-color: #D1D1D1;
        border-width: 0 0 1px 1px;
        width: 420px;
        height: 400px;
    }

    div.barGraphGridArea
    ul.barGraphArea {
        display: inline-block;
        position: absolute;
        width: 100%;
        float: left;
        height: 100%;
    }

    div.matrixGridArea
    ul.matrixGraphArea {
        display: inline-block;
        position: absolute;
        width: 100%;
        float: left;
        height: 100%;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph {
        display: inline-block;
        position: relative;
        width: 14.25%;
        float: left;
        height: 100%;
        z-index: 0;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph {
        display: inline-block;
        position: relative;
        width: 33.33%;
        float: left;
        height: 33.33%;
        z-index: 0;
        border: 1px solid #D9D9D9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph {
        display: inline-block;
        position: absolute;
        border-radius: 100%;
        text-align: center;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q1 {
        background-color: #65AB93;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q2 {
        background-color: #3C6D5C;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q3 {
        background-color: #2B4E42;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q4 {
        background-color: #98C7B7;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q5 {
        background-color: #3C6D5C;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q6 {
        background-color: #3C6D5C;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q7 {
        background-color: #CCE3DB;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q8 {
        background-color: #98C7B7;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleGraph.q9 {
        background-color: #65AB93;
        opacity: 0.8;
        color: #333333;
        z-index: 9;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleLabel {
        display: inline-block;
        position: absolute;
        width: 100%;
        height: auto;
        text-align: center;
        font-size: 13px;
        color: #333333;
        font-weight: 700;
        z-index: 15;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph
    span.bubbleLabel.hidden {
        display: none;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph:before {
        content: "";
        top: 25%;
        left: 0;
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #D1D1D1;
        width: 100%;
        height: 25%;
        z-index: 0;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph:before {
        content: "";
        top: 33.33%;
        left: 0;
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #E6E6E6;
        width: 100%;
        height: 33.33%;
        z-index: 0;
    }

    div.matrixGridArea
    ul.matrixGraphArea
    li.matrixGraph:after {
        content: "";
        top: 0;
        left: 33.33%;
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 0 1px 0 1px;
        border-color: #E6E6E6;
        width: 33.33%;
        height: 100%;
        z-index: 0;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph:after {
        content: "";
        top: 75%;
        left: 0;
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: #D1D1D1;
        width: 100%;
        height: 25%;
        z-index: 0;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.barLabel {
        display: inline-block;
        position: absolute;
        width: 100%;
        float: left;
        height: auto;
        text-align: center;
        color: #333333;
        font-weight: 500;
        z-index: 9;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar {
        display: inline-block;
        position: absolute;
        width: 20px;
        float: left;
        height: 100%;
        margin-left: 38px;
        border-radius: 10px 10px 0 0;
        z-index: 9;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t1 {
        background-color: #c7e9b4;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t2 {
        background-color: #7fcdbb;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t3 {
        background-color: #41b6c4;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t4 {
        background-color: #1d91c0;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t5 {
        background-color: #225ea8;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t6 {
        background-color: #253494;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t7 {
        background-color: #081d58;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t8 {
        background-color: #fed976;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t9 {
        background-color: #feb24c;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t10 {
        background-color: #fd8d3c;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t11 {
        background-color: #fc4e2a;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t12 {
        background-color: #e31a1c;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t13 {
        background-color: #bd0026;
    }

    div.barGraphGridArea
    ul.barGraphArea
    li.barGraph
    span.bar.t14 {
        background-color: #800026;
    }
    /*bargraph*/

    div.testGraphArea {
        display: none;
        vertical-align: top;
        width: 1240px;
        height: auto;
    }

    div.testGraphArea.active {
        display: block;
    }

    /*graph*/
    div.graphCountDrawing {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: auto;
        float: left;
        text-align: left;
        padding: 20px;
    }

    div.countTableArea
    ul.countDetailInfoTable
    li
    span.countInfoTableTitle {
        float: left;
        display: inline-block;
        position: relative;
        height: auto;
        text-align: center;
        font-size: 15px;
        color: #333333;
        vertical-align: top;
        z-index: 0;
        font-weight: 700;
        background-color: rgba(241,241,241,0.0);
    }

    ul.countGraphScaleYArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 50px;
        height: 320px;
    }

    ul.countGraphScaleYArea
    li.countGraphScaleY {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 25%;
        float: left;
    }

    ul.countGraphScaleYArea
    li.countGraphScaleY
    span {
        display: inline-block;
        position: relative;
        float: left;
        line-height: 5px;
        font-size: 15px;
        color: #333333;
        width: 100%;
        height: 100%;
        text-align: right;
        font-weight: 700;
    }

    ul.countGraphScaleXArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 1130px;
        height: 50px;
        margin-left: 50px;
        background-color: #ffffff;
        z-index: 9;
    }

    ul.countGraphScaleXArea
    li.countGraphScaleX {
        display: inline-block;
        position: relative;
        float: left;
        width: 10%;
        height: 100%;
    }

    ul.countGraphScaleXArea
    li.countGraphScaleX.sec {
        display: inline-block;
        position: relative;
        float: left;
        width: 14.28%;
        height: 100%;
    }

    ul.countGraphScaleXArea
    li.countGraphScaleX
    span {
        display: inline-block;
        position: relative;
        float: left;
        line-height: 45px;
        font-size: 15px;
        color: #333333;
        width: 100%;
        height: 100%;
        text-align: center;
        font-weight: 700;
    }

    ul.countGraphScaleXArea
    li.countGraphScaleX
    span:after {
        content: "";
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 0 1px 0 0;
        border-color: #D1D1D1;
        float: left;
        top: -10px;
        right: -1px;
        height: 10px;
        width: 1px;
    }

    div.countGraphGridArea {
        display: inline-block;
        position: relative;
        float: left;
        border-style: solid;
        border-color: #D1D1D1;
        border-width: 0 0 1px 1px;
        width: 1127px;
        height: 320px;
    }

    div.countGraphGridArea
    ul.countGraphArea {
        display: inline-block;
        position: absolute;
        width: 100%;
        float: left;
        height: 100%;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph {
        display: inline-block;
        position: relative;
        width: 10%;
        float: left;
        height: 100%;
        z-index: 0;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph.sec {
        display: inline-block;
        position: relative;
        width: 14.28%;
        float: left;
        height: 100%;
        z-index: 0;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph:before {
        content: "";
        top: 25%;
        left: 0;
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #D1D1D1;
        width: 100%;
        height: 25%;
        z-index: 0;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph:after {
        content: "";
        top: 75%;
        left: 0;
        display: inline-block;
        position: absolute;
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: #D1D1D1;
        width: 100%;
        height: 25%;
        z-index: 0;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.barLabel {
        display: inline-block;
        position: absolute;
        width: auto;
        height: 15px;
        line-height: 15px;
        float: left;
        text-align: left;
        font-weight: 700;
        z-index: 15;
        font-size: 12px;
        text-indent: 0px;
        margin-left: 55px;
        text-indent: 3px;
        color: #1F1F1F;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.barLabel:before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 4px;
        right: 100%;
        width: 0px;
        height: 0px;
        text-align: center;
        z-index: 9;
        border-style: solid;
        border-width: 3px 5px 3px 5px;
        border-color: transparent #1F1F1F transparent transparent;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar {
        display: inline-block;
        position: absolute;
        width: 20px;
        float: left;
        height: 100%;
        margin-left: 25px;
        z-index: 2;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar.r1 {
        background-color: #081d58;
        border-radius: 10px 10px 0 0;
        z-index: 3;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar.r2 {
        background-color: #225ea8;
        border-radius: 0;
        z-index: 3;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar.r3 {
        background-color: #6baed6;
        border-radius: 0;
        z-index: 3;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar.r4 {
        background-color: #9e0142;
        border-radius: 10px 10px 0 0;
        z-index: 3;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar.r5 {
        background-color: #f46d43;
        border-radius: 0;
        z-index: 3;
    }

    div.countGraphGridArea
    ul.countGraphArea
    li.countGraph
    span.bar.r6 {
        background-color: #fee08b;
        border-radius: 0;
        z-index: 3;
    }
    /*graph*/


    .testGraphFrame {
        float: left;
        display: inline-block;
        vertical-align: top;
        width: 720px;
        height: 240px;
        position:relative;
        background-color: #ffffff;
        border-style: solid;
        border-color: #A3A4A5;
        border-width: 1px 0 1px 0;
        z-index: 0;
        margin: 30px;
    }

    .testGraphFrame:before {
        content:"";
        float: left;
        display: inline-block;
        vertical-align: top;
        padding: 0;
        width: 720px;
        height: 60px;
        position:relative;
        background-color: #ffffff;
        border-style: solid;
        border-color: #A3A4A5;
        border-width: 0 0 1px 0;
        z-index: 3;
    }

    .testGraphFrame:after {
        float: left;
        content:"";
        display: inline-block;
        vertical-align: top;
        padding: 0;
        top: 60px;
        width: 720px;
        height: 60px;
        position:relative;
        border-style: solid;
        border-color: #A3A4A5;
        border-width: 1px 0 1px 0;
        z-index: 3;
    }

    .testGraphFrame
    label {
        display: inline-block;
        position: absolute;
        z-index: 5;
        width: 100px;
        height: 30px;
        line-height: 30px;
        top: 100%;
        vertical-align: top;
        font-weight: 700;
        color: #333333;
    }

    .testGraphFrame
    span {
        display: inline-block;
        position: absolute;
        z-index: 5;
        width: 100px;
        line-height: 20px;
        left: 0px;
        vertical-align: top;
        color: #ffffff;
    }

    /**/
    .testCountFrame {
        float: center;
        display: inline-block;
        vertical-align: top;
        width: 1160px;
        height: 240px;
        position:relative;
        background-color: #ffffff;
        border-style: solid;
        border-color: #A3A4A5;
        border-width: 1px 0 1px 0;
        z-index: 0;
        margin: 30px;
    }

    .testCountFrame:before {
        content:"";
        float: left;
        display: inline-block;
        vertical-align: top;
        padding: 0;
        width: 1160px;
        height: 60px;
        position:relative;
        background-color: #ffffff;
        border-style: solid;
        border-color: #A3A4A5;
        border-width: 0 0 1px 0;
        z-index: 3;
    }

    .testCountFrame:after {
        float: left;
        content:"";
        display: inline-block;
        vertical-align: top;
        padding: 0;
        top: 60px;
        width: 1160px;
        height: 60px;
        position:relative;
        border-style: solid;
        border-color: #A3A4A5;
        border-width: 1px 0 1px 0;
        z-index: 3;
    }

    .testCountFrame
    label {
        display: inline-block;
        position: absolute;
        z-index: 5;
        width: 100px;
        height: 30px;
        line-height: 30px;
        top: 100%;
        vertical-align: top;
        font-weight: 700;
        color: #333333;
    }

    .testCountFrame
    span {
        display: inline-block;
        position: absolute;
        z-index: 5;
        width: 100px;
        line-height: 20px;
        left: 0px;
        vertical-align: top;
        color: #ffffff;
    }

    .testGraphInfoArea {
        display: inline-block;
        float: left;
        width: 450px;
        height: 300px;

    }

    /*line graph*/
    /*Manager_List2*/
    /*examination*/

    .examination {}

    .examination
    .title_wrap {
        margin-bottom: 0;
        padding-bottom: var(--space-el-sm);
        border-bottom: 1px solid var(--color-gray04);
    }


    content.examination
    div.examSettingArea {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        padding-bottom: 50px;
    }

    content.examination
    div.examViewArea {
        display: inline-block;
        position: relative;
        float: right;
        width: 470px; /*470px*/
        height: 850px;
        padding: 0px;
        z-index: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }


    .examination
    .examSettingArea
    .examSetting {
        margin-top: 2rem;
    }

    content.examination
    div.examSettingArea
    div.examSettingTitle {
        display: flex;
        flex-direction: column;
        gap: var(--space-el-x-sm);
        margin: 4rem 0 3rem;
    }

    span.tipIcon {
        position: relative;
        display: inline-block;
        width: auto;
        height: auto;
        float: left;
        margin-top: 5px;
    }

    span.tipIcon.static {
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
        float: left;
        vertical-align: top;
        text-align: center;
        margin-top: 0px;
    }

    span.tipIcon.static
    i {
        color: #333333;
        font-size: 20px;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
    }

    span.tipIcon
    i {
        color: #333333;
        font-size: 20px;
        cursor: pointer;
    }

    span.tooltipText {
        display: inline-block;
        position: absolute;
        height: auto;
        width: 500px;
        padding: 10px;
        text-align: justify;
        font-size: 14px;
        color: #ffffff;
        border: 0px solid rgba(0,0,0, 0.8);
        border-radius: 0px;
        background-color: rgba(0,0,0, 0.8);
        visibility: hidden;
        top: -5px;
        line-height: 20px;
        z-index: 7;
    }

    span.tooltipText:after {
        content: "";
        display: inline-block;
        position: absolute;
        height: 0;
        width: 0;
        border-style: solid;
        border-color: transparent rgba(0,0,0, 0.8) transparent transparent;
        border-width: 10px;
        top: 5px;
        right: 0;
    }

    ul.levelIconArea
    li:hover span.tooltipText {
        visibility: visible;
    }

    span.tooltipText.static {
        display: inline-block;
        position: absolute;
        height: auto;
        width: 300px;
        padding: 10px;
        text-align: justify;
        font-size: 14px;
        color: #ffffff;
        border: 0px solid rgba(0,0,0, 0.8);
        border-radius: 5px;
        background-color: rgba(0,0,0, 0.8);
        visibility: hidden;
        top: 60px;
        z-index: 7;
    }

    span.tooltipText.static:after {
        content: "";
        display: inline-block;
        position: absolute;
        height: 0;
        width: 0;
        border-style: solid;
        border-color: transparent transparent rgba(0,0,0, 0.8) transparent ;
        border-width: 10px;
        top: -20px;
        right: 50px;
    }

    span.tipIcon.static:hover span.tooltipText.static {
        visibility: visible;
    }

    .examination
    .flex_cont {
        display: flex;
        gap: 2rem;
        width: 100%;
    }

    .examSetting
    .settingLabel {
        display: block;
        margin-bottom: var(--space-el-xx-sm);
    }

    .examSetting
    label
    select {
        width: 20rem;
    }

    .examSetting
    input[type="text"]:not(.dateInput) {
        padding: var(--space-el-x-sm) 2rem;
    }

    .examSetting
    label
    .examDate {
        max-width: 20rem;
        padding: var(--space-el-x-sm) 2rem var(--space-el-x-sm) 4.4rem;
    }

    div.examSetting
    label
    .examTime {
        width: 14rem;
    }

    .examSetting
    .exam_tit {
        flex: 1 0 auto;
        max-width: 58rem;
    }

    .examSetting
    .exam_tit
    label {
        width: 100%;
    }

    .examination
    .examSet_option
    label {
        display: inline-block;
        margin-right: 2rem;
    }

    #restTime
    label {
        display: block;
        max-width: 28rem;
    }

    .examSetting
    .levelIconArea {
        margin-top: 0;
    }

    #step2_list_item
    li.active {
        box-shadow: 0px 0px 0px 2px #4778C7;
    }

    .examSetting
    .levelIconArea
    li.active
    .levelButton {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    div.examSetting
    ul.levelIconArea
    li
    i {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 0px;
        color: #656565;
        font-size: 20px;
    }

    div.examSetting
    ul.testSelectedList {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        padding: 10px;
    }

    div.examSetting
    ul.testSelectedList
    li {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: 50px;
        line-height: 50px;
        vertical-align: top;
        padding: 5px;
    }

    div.examSetting
    ul.testSelectedList
    li:nth-child(2n) {
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #eeeeee;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType1
    span.testLabel  {
        color: #333333;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType1
    span.testPrice {
        position: relative;
        color: #333333;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType1
    span.testPrice:after {
        display: inline-block;
        content: "";
        top: 20px;
        right: -7px;
        position: absolute;
        vertical-align: top;
        width: 60px;
        height: 0;
        float: right;
        text-align: right;
        color: #4778C7;
        font-weight: 700;
        border-style: solid;
        border-color: #b2182b;
        border-width: 1px 0 1px 0;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType2
    span.testLabel {
        position: relative;
        color: #333333;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType2
    span.testPrice {
        position: relative;
        color: #333333;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType2
    span.testPrice:after {
        display: inline-block;
        content: "";
        top: 20px;
        right: -7px;
        position: absolute;
        vertical-align: top;
        width: 60px;
        height: 0;
        float: right;
        text-align: right;
        color: #4778C7;
        font-weight: 700;
        border-style: solid;
        border-color: #b2182b;
        border-width: 1px 0 1px 0;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType3
    span.testLabel {
        color: #00441b;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li.selectedType3
    span.testPrice {
        color: #00441b;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li
    span.itemLabel {
        display: inline-block;
        float: left;
        width: 15%;
        vertical-align: top;
        height: 100%;
        line-height: 40px;
        padding: 0;
        text-align: center;
        border-radius: 0;
        background-color: #ffffff;
        color: #333333;
        font-weight: 700;
    }

    div.examSetting
    ul.testSelectedList
    li
    span.testLabel {
        display: inline-block;
        float: left;
        width: 65%;
        vertical-align: top;
        height: 100%;
        line-height: 40px;
        padding: 0;
        text-align: center;
        border-radius: 0;
        background-color: #ffffff;
    }

    div.examSetting
    ul.testSelectedList
    li
    span.testPrice {
        display: inline-block;
        float: left;
        position: relative;;
        display: block;
        width: 20%;
        line-height: 40px;
        vertical-align: top;
        height: 100%;
        text-align: right;
        background-color: #ffffff;
    }

    div.examSetting
    div
    span.countTitle {
        display: block;
        float: left;
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin-top: 45px;
        color: #333333;
        font-size: 15px;
        text-indent: 10px;
    }

    div.examSetting
    div
    span.countNumber {
        display: block;
        float: left;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 25px;
        text-indent: 10px;
    }

    div.examSetting
    div
    span.countNumber.Red {
        color: #d53e4f;
    }

    div.examSetting
    div
    span.countNumber.Blue {
        color: #3288bd;
    }

    div.examViewArea {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100px;
        z-index: 1;
        overflow: hidden;
    }

    div.examViewArea
    div.examViewDefaultArea {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 830px;
        display: none;
        z-index: 3;
    }

    div.examViewArea
    div.examViewDefaultArea
    i {
        position: absolute;
        display: inline-block;
        font-size: 200px;
        color: #ffffff;
        width: auto;
        height: auto;
        top: 550px;
        right: 30px;
    }

    div.examViewArea
    div.examViewDefaultArea
    ul {
        display: inline-block;
        width: 100%;
        height: auto;
        margin-top: 100px;
    }

    div.examViewArea
    div.examViewDefaultArea
    ul
    li {
        display: inline-block;
        width: 100%;
        height: auto;
        text-align: left;
    }

    div.examViewArea
    div.examViewDefaultArea
    ul
    li.defaultTitle {
        font-size: 25px;
        text-indent: 20px;
        color: #ffffff;
        height: 40px;
        line-height: 40px;
        font-weight: 700;
    }

    div.examViewArea
    div.examViewDefaultArea
    ul
    li.defaultSub {
        text-align: justify;
        maring-top: 0px;
        letter-spacing: 1px;
        font-size: 16px;
        color: #F1F1F1;
        height: auto;
        padding: 5px 35px 5px 35px;
        line-height: 30px;
        word-wrap: break-word;
        word-break: break-all;
        font-weight: 300;
    }

    div.examViewArea
    div.examViewDefaultArea
    ul
    li.defaultTitle.black {
        color: #222222;
    }

    div.examViewArea
    div.examViewDefaultArea
    ul
    li.defaultSub.black {
        color: #222222;
    }

    #examListSelectArea {
        display: inline-block;
        float: left;
        position: relative;
        display: inline-block;
        width: 100%;
        height: auto;
        z-index: 1;
    }

    .examTestSelectArea {
        flex-direction: column;
        margin-top: 3rem;
    }
/*
    .examTestSelectArea::before {
        order: 1;
        content: "난이도를 선택하여 상품을 정렬합니다.";
        padding-left: var(--space-el-lg);
        font-size: var(--font-md);
        color: var(--color-gray02);
        background: url(/resources/images/ico/ico_info.svg) no-repeat left center/1.6rem auto;
    }
*/
    .examTestSelectArea
    .selectTitleArea {
        display: inline-block;
        padding-bottom: var(--space-el-x-sm);
        border-bottom: 1px solid var(--color-gray04);
    }

    .examTestSelectArea
    .selectTitleArea
    .selectTitleNm {
        display: inline-block;
        padding: var(--space-el-xx-sm) var(--space-el-sm);
        color: var(--color-gray01);
        background-color: var(--color-gray04);
        border-radius: 4px;
    }

    .examTestSelectArea
    .selectTitleArea
    .selectTitle {
        padding: 0 var(--space-el-sm) 0 var(--space-el-x-sm);
    }

    .examTestSelectArea
    ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-el-md) var(--space-el-x-sm);
        order: 2;
        margin-top: 0;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 1px solid var(--color-gray03);
        border-radius: 8px;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    input[type="radio"] {
        margin: 0 0 0 var(--space-el-x-sm);
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect.none
    .iconarea {
        width: auto;
        height: fit-content;
        margin: auto;
        padding-left: 3.2rem;
        background-size: 2.4rem auto;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect:hover {
        background-color: var(--color-primary02);
        border: 1px solid var(--color-primary);
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect.active {
        background-color: #fff;
        border: 1px solid var(--color-primary);
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect.active
    .testItemTitle {
        color: #fff;
        background-color: var(--color-primary);
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect.active
    .priceArea { color: var(--color-primary); }

    div.examTestSelectArea
    ul.examTestArea
    li.examTestSelect.j:hover {
        border: 1px solid #d53e4f;
        background-color: rgba(250,164,137,0.05);
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .assortSub {
        flex: 1 1 calc(100% - 13.2rem);
        padding: var(--space-el-md) var(--space-el-md) var(--space-el-x-sm);
        text-align: left;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .bookimg {
        width: 80px;
        height: 100px;
        margin: var(--space-el-md) var(--space-el-md) var(--space-el-x-sm);
        border: 1px solid var(--color-gray04);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .bottom_cont {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        gap: var(--space-el-md);
        padding: var(--space-el-md);
    }

    div.examTestSelectArea
    ul.examTestArea
    li.examTestSelect
    span.descarea {
        display: inline-block;
        float: left;
        width: 230px;
        height: 50px;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .testItemTitle {
        width: 100%;
        height: 4rem;
        padding: var(--space-el-x-sm) var(--space-el-md);
        background-color: var(--color-gray05);
        border-bottom: 1px solid var(--color-gray04);
    }

    div.examTestSelectArea
    ul.examTestArea
    li.examTestSelect
    span.testItemTitle.none {
        text-align: center;
    }

    span.testItemTitle.major {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: 40px;
        line-height: 40px;
        float: left;
        text-align: left;
        text-indent: 5px;
    }

    div.examTestSelectArea
    ul
    li
    span.testItemTitle
    input[type="checkbox"] {
        display: inline-block;
        width: 15px;
        height: 15px;
        vertical-align: top;
        float: left;
        margin: 12px;
    }

    div.examTestSelectArea
    ul
    li
    select {
        display: inline-block;
        width: 110px;
        height: 35px;
        line-height: 35px;
        vertical-align: top;
        float: right;
        outline: none;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #4778C7;
        margin: 3px 10px 3px 3px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }

    div.examTestSelectArea
    ul
    span.timeArea {
        display: inline-block;
        vertical-align: top;
        width: 70px;
        height: 40px;
        line-height: 40px;
        float: right;
        text-align: right;
        padding-right: 10px;
        color: #4778C7;
        font-weight: 700;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .priceArea {
        margin-left: auto;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .priceArea.none {
        width: 100%;
        padding: var(--space-el-md);
        align-self: end;
        text-align: right;
    }

    div.examTestSelectArea
    ul.examTestArea
    li.examTestSelect
    span.priceArea.j {
        color: #d53e4f;
    }

    div.examTestSelectArea
    ul.examTestArea
    li.examTestSelect
    span.priceArea
    span.assortSub {
        display: inline-block;
        float: left;
        width: 100%;
        height: 102px;
        line-height: 20px;
        padding: 5px;
        text-align: left;
        color: #323232;
        font-weight: 500;
        font-size: 13px;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .previewTest {
        width: 1.6rem;
        height: 1.6rem;
        background: url(/resources/images/ico/ico_testform.svg) no-repeat left center/auto 1.6rem;
        cursor: pointer;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .previewTest.replace {
        background-position-x: center;
    }

    .examTestSelectArea
    .examTestArea
    .examTestSelect
    .previewTest.history {
        background-position-x: right;
    }

    div.examTestSelectArea
    ul.examTestArea
    li.examTestSelect
    span.previewTest
    i {
        display: inline-block;
        width: auto;
        height: auto;
        float: left;
        font-size: 20px;
        color: #666666;
        font-weight: 300;
    }

    modal.ratiodown
    div.ratioarea {
        display: inline-block;
        width: 600px;
        height: auto;
        background-color: #ffffff;
        border: 1px solid #d9d9d9;
        margin-top: 100px;
        padding: 10px;
    }

    div.ratioarea
    select {
        display: inline-block;
        height: 30px;
        width: 25%;
        cursor: pointer;
        text-indent: 10px;
        float: left;
        margin: 2px 2px 2px 0px;
    }

    div.ratioarea
    button.loadbtn {
        display: inline-block;
        float: right;
        width: 130px;
        height: auto;
        padding: 4px;
        margin-top: 2px;
    }

    div.ratioarea
    ul.resultdata {
        display: inline-block;
        max-height: 400px;
        width: 100%;
        backgroud-color: #fafafa;
        overflow: hidden;
        overflow-y: auto;
        margin-top: 10px;
    }

    div.ratioarea
    ul.resultdata
    li {
        display: inline-block;
        height: auto;
        width: 100%;
        border-style: solid;
        border-width: 1px 0 1px 0;
        border-color: #d9d9d9;
        padding: 3px;
        margin-bottom: 2px;
    }

    div.ratioarea
    ul.resultdata
    li
    span.labeltitle {
        display: inline-block;
        float: left;
        width: 520px;
        height: auto;
        background-color: transparent;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-color: #d9d9d9;
    }

    div.ratioarea
    ul.resultdata
    li
    span.labelcont {
        display: inline-block;
        float: left;
        width: 520px;
        height: auto;
        background-color: transparent;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-color: #d9d9d9;
        text-indent: 18px;
    }

    div.ratioarea
    ul.resultdata
    li
    button {
        display: inline-block;
        height: 20px;
        width: 40px;
        background-color: transparent;
        border: 0px solid transparent;
        color: #0788d8;
        padding: 0;
        text-align: center;
        margin-top: 2px;
    }

    div.ratioarea
    button {
        display: inline-block;
        float: right;
        width: auto;
        height: auto;
        cursor: pointer;
        padding: 2px;
        border: 1px solid #0788d8;
        background-color: #0788d8;
        color: #ffffff;
    }

    modal.ratiodown
    div.ratioarea
    span.title {
        display: inline-block;
        position: relative;
        width: 100%;
        height: auto;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-color: #d9d9d9;
        padding: 10px;
        margin-bottom: 10px;
    }

    modal.ratiodown
    div.ratioarea
    span.title
    span.close {
        display: inline-block;
        position: absolute;
        width: auto;
        height: auto;
        top: 0;
        right: 0;
        cursor: pointer;
        font-size: 20px;
        padding: 5px;
    }

    .test_user_result_setup .top_area {
        align-items: flex-end;
        margin-bottom: var(--space-el-md);
        padding-bottom: var(--space-el-md);
        border-bottom: 1px solid var(--color-gray04);
    }

    .test_user_result_setup .top_area form {
        display: flex;
        flex-wrap: wrap;
        margin-right: auto;
        gap: var(--space-el-sm) var(--space-el-x-sm);
    }

    .test_user_result_setup .top_area form > p { flex: 1 0 100%; }

    .test_user_result_setup .input_file_wrap {
        padding: var(--space-el-sm) var(--space-el-lg);
    }

    .test_user_result_setup .mainContents {
        display: flex;
        flex-direction: column;
        margin-bottom: 12rem;
    }

    .test_user_result_setup .mainContents .cm_btn_pri { margin-left: auto; }

    .test_user_result_setup .calibrationLabel {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 4rem;
    }

    .test_user_result_setup input[type="text"] {
        padding: 0.5rem 2rem;
        text-align: center;
    }

    .test_user_result_setup .tableTitle {
        align-items: center;
        padding: var(--space-el-x-sm) 3rem;
    }

    .test_user_result_setup .ratioSettingTitle {
        width: 12rem;
    }

    .test_user_result_setup .ratioSettingCont:not(.left) {
        flex: 1;
        width: 13rem;
    }

    .test_user_result_setup .ratioSettingCont.left {
        width: 12rem;
    }

    .test_user_result_setup .pointArea {
        background-color: var(--color-gray06);
    }

    .test_user_result_apt .top_area {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .test_user_result_apt ul.ratioSettingArea li {
        padding: 0;
    }

    .test_user_result_apt .tableTitle {
        border-bottom: 1px solid var(--color-gray04);
        border-radius: 0;
    }

    .test_user_result_apt .ratioSettingArea span {
        padding: 1.8rem var(--space-el-xx-sm);
    }

    .test_user_result_apt .tableCont { padding: 0; }

    .test_user_result_apt .ratioSettingArea input {
        padding: 0;
        text-align: center;
        background-color: transparent;
        border: 0;
    }

    .test_user_result_apt .ratioSettingArea input:focus { outline: 0; }

    .test_user_result_apt .pointArea {
        background-color: #FFF4D5;
    }

    .calibrationArea
    form
    span.defaultbtn {
        display: inline-block;
        float: right;
        width: auto;
        height: auto;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-color: #d9d9d9;
        color: #222222;
        cursor: pointer;
        padding: 5px 10px 5px 10px;
        margin: 10px 5px 0 0;
        background-color: #ffffff;
        font-size: 13px;
    }

    .calibrationArea
    form
    ul.ratioSettingArea
    li
    span.ratioSettingTitle.dim {
        color: #d9d9d9;
    }

    .calibrationArea
    form
    ul.ratioSettingArea
    li
    span.ratioSettingCont.dim {
        color: #d9d9d9;
    }

    .calibrationArea
    input.authSearch{
        display: inline-block;
        float: left;
        width: 200px;
        height: 30px;
        border: 1px solid #d9d9d9;
        outline: none;
        text-indent: 10px;
    }

    .calibrationArea
    button.authSearchBtn {
        display: inline-block;
        float: left;
        width: 50px;
        height: 30px;
        border: 0px solid #f0f0f0;
        background-color: #0192D1;
        outline: none;
        cursor: pointer;
    }

    .calibrationArea
    button.authSearchBtn
    i {
        color: #ffffff;
    }

    .calibrationArea
    form.authListArea {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    .calibrationArea
    form.authListArea
    ul.authList {
        display: inline-block;
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .calibrationArea
    form
    ul.authList2 {
        display: inline-block;
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .calibrationArea
    form.authListArea
    ul.authList
    li {
        display: inline-block;
        float: left;
        height: 35px;
        border-width: 0 0 1px 0;
        border-color: #f1f1f1;
        border-style: solid;
    }

    .calibrationArea
    form
    ul.authList2
    li {
        display: inline-block;
        float: left;
        height: 35px;
        border-width: 0 0 1px 0;
        border-color: #f1f1f1;
        border-style: solid;
    }

    .calibrationArea
    form.authListArea
    ul.authList
    li
    span.authListTitle  {
        display: inline-block;
        float: left;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
    }


    .calibrationArea
    form
    ul.authList2
    li
    span.authListTitle  {
        display: inline-block;
        float: left;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
    }

    .calibrationArea
    form.authListArea
    ul.authList
    li
    span.authListCont  {
        display: inline-block;
        float: left;
        height: 35px;
        line-height: 35px;
        font-size: 11px;
        text-align: center;
    }

    .calibrationArea
    form
    ul.authList2
    li
    span.authListCont  {
        display: inline-block;
        float: left;
        height: 35px;
        line-height: 35px;
        font-size: 12px;
        text-align: center;
    }

    .calibrationArea
    form.authListArea
    ul.authList
    li
    span.authListCont
    input {
        display: inline-block;
        float: center;
        width: 98%;
        height: 25px;
        border: 1px solid #d9d9d9;
        font-size: 12px;
        text-align: center;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }

    .calibrationArea
    form
    ul.authList2
    li
    span.authListCont
    input {
        display: inline-block;
        float: center;
        width: 98%;
        height: 25px;
        border: 1px solid #d9d9d9;
        font-size: 12px;
        text-align: center;
    }

    .calibrationArea
    form
    span.btnAdd {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        background-color: #0192D1;
        cursor: pointer;
    }

    .calibrationArea
    form
    button.btnUpdate {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        background-color: #0192D1;
        cursor: pointer;
        border: 0px solid red;
    }

    /*piegraph*/
    /*ratio*/

    /*managerMent*/

    button.managermentBtn {
        display: inline-block;
        border: 1px solid #3288bd;
        background-color: #3288bd;
        color: #ffffff;
        width: 100%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    button.managermentBtn.Half {
        display: inline-block;
        border: 1px solid #3288bd;
        background-color: #3288bd;
        color: #ffffff;
        width: 49%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    button.managermentBtn:hover {
        display: inline-block;
        border: 1px solid #2974A2;
        background-color: #2974A2;
        color: #ffffff;
        width: 100%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    button.managermentBtn.Half:hover {
        display: inline-block;
        border: 1px solid #2974A2;
        background-color: #2974A2;
        color: #ffffff;
        width: 49%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    button.managermentBtn.Red {
        display: inline-block;
        border: 1px solid #d53e4f;
        background-color: #d53e4f;
        color: #ffffff;
        width: 100%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    button.managermentBtn.Red:hover {
        display: inline-block;
        border: 1px solid #BE3746;
        background-color: #BE3746;
        color: #ffffff;
        width: 100%;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
    }

    div.managermentLeftArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 320px;
        height: 830px;
        padding: 10px;
    }

    div.managermentLeftArea
    label {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: left;
        font-weight: 700;
        font-size: 15px;
        color: #2a2b30;
    }

    span.labelBadgeNm {
        display: inline-block;
        position: relative;
        width: auto;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-weight: 700;
        font-size: 13px;
        color: #ffffff;
        margin-right: 5px;
        padding: 0 5px 0 5px;
        background-color: #2a2b30;
    }

    div.managermentLeftArea
    ul {
        display: inline-block;
        float: left;
        width: 100%;
        height: 790px;
        vertical-align: top;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 10px 10px 10px;
    }

    div.managermentLeftArea
    ul
    li {
        display: inline-block;
        float: left;
        width: 100%;
        height: 100px;
        vertical-align: top;
        margin-bottom: 10px;
        border: 1px solid #a1a1a1;
        cursor: pointer;
    }

    div.managermentLeftArea
    ul
    li:hover {
        box-shadow: 0px 0px 0px 2px #4778C7;
        cursor: pointer;
    }

    div.managermentLeftArea
    ul
    li
    span:nth-child(1) {
        display: inline-block;
        position: relative;
        float: left;
        width: 150px;
        height: 20px;
        line-height: 20px;
        vertical-align: top;
        text-align: left;
        text-indent: 10px;
        color: #ffffff;
        font-size: 13px;
        background-color: #4575b4;
    }

    div.managermentLeftArea
    ul
    li
    span:nth-child(1):before {
        display: inline-block;
        content: "";
        position: absolute;
        float: left;
        width: 10px;
        height: 10px;
        border-color:  transparent  transparent #ffffff transparent ;
        border-width: 30px;
        border-style: solid;
        top: -40px;
        right: -30px;
    }

    div.managermentLeftArea
    ul
    li
    span:nth-child(2) {
        display: inline-block;
        float: left;
        width: 115px;
        height: 20px;
        line-height: 20px;
        vertical-align: top;
        text-align: right;
        padding-right: 5px;
        font-weight: 700;
        color: #2c353e;
        font-size: 13px;
    }

    div.managermentLeftArea
    ul
    li
    span:nth-child(3) {
        display: inline-block;
        float: left;
        width: 280px;
        height: 55px;
        line-height: 55px;
        vertical-align: top;
        text-align: center;
        color: #253494;
        font-size: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    div.managermentLeftArea
    ul
    li
    span:nth-child(4) {
        display: inline-block;
        float: left;
        width: 100%;
        height: 23px;
        line-height: 23px;
        vertical-align: top;
        text-align: right;
        padding-right: 5px;
        color: #5D5D5D;
        font-size: 13px;
        font-weight: 700;
        background-color: #E1E1E1;
    }

    div.managermentCenterArea {
        display: inline-block;
        position: relative;
        float: left;
        width: 220px;
        height: 830px;
        padding: 10px;
        border-style: solid;
        border-width: 0 1px 0 1px;
        border-color: #E1E1E1;
    }

    div.managermentCenterArea
    label {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: left;
        font-weight: 700;
        font-size: 15px;
        color: #2a2b30;
    }

    div.managermentCenterArea
    ul {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
    }

    div.managermentCenterArea
    ul
    li {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 8px;
        cursor: pointer;
        padding: 10px;
        border: 1px solid #a1a1a1;
    }

    /*
div.managermentCenterArea
ul
li:hover {
  box-shadow: 0px 0px 0px 1px #4778C7;
  cursor: pointer;
}
*/

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span:nth-child(1) /*로고부분*/{
        display: inline-block;
        float: left;
        width: 100%;
        height: 50px;
        vertical-align: top;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 40px;
        -moz-background-repeat: no-repeat;
        -moz-background-position: center;
        -moz-background-size: auto 40px;
        -webkit-background-repeat: no-repeat;
        -webkit-background-position: center;
        -webkit-background-size: auto 40px
    }

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span {
        display: inline-block;
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        line-height: 20px;
        font-size: 14px;
        color: #333333;
        padding: 20px 0 0 0;
        text-align: justify;
        text-indent: 10px;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
        word-wrap: break-word;
        word-break: break-all;
    }

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span:nth-child(2):before {
        display: inline-block;
        float: left;
        content: "업종";
        position: absolute;
        font-size: 14px;
        color: #a1a1a1;
        top: 0;
        left: -10px;
    }

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span:nth-child(3):before {
        display: inline-block;
        float: left;
        content: "대표자명";
        position: absolute;
        font-size: 14px;
        color: #a1a1a1;
        top: 0;
        left: -10px;
    }

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span:nth-child(4):before {
        display: inline-block;
        float: left;
        content: "URL KEY";
        position: absolute;
        font-size: 14px;
        color: #a1a1a1;
        top: 0;
        left: -10px;
    }

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span:nth-child(5):before {
        display: inline-block;
        float: left;
        content: "사업자번호";
        position: absolute;
        font-size: 14px;
        color: #a1a1a1;
        top: 0;
        left: -10px;
    }

    div.managermentCenterArea
    ul
    li:nth-child(1)
    span:nth-child(6):before {
        display: inline-block;
        float: left;
        content: "주소";
        position: absolute;
        font-size: 14px;
        color: #a1a1a1;
        top: 0;
        left: -10px;
    }

    div.managermentCenterArea
    ul
    li
    span.statueLabel {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        width: 100%;
        height: 30px;
        text-align: left;
        text-indent: 5px;
        color: #4575b4;
        font-weight: 700;
    }

    div.managermentCenterArea
    ul
    li
    label.stateNm {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        color: #333333;
        width: 100px;
        height: 30px;
        text-align: center;
        margin-bottom: 5px;
    }

    div.managermentCenterArea
    ul
    li
    input.systemDate {
        display: inline-block;
        float: right;
        position: relative;
        font-size: 14px;
        width: 120px;
        height: 30px;
        text-align: center;
        margin-bottom: 5px;
        outline: none;
        border: 1px solid #D9D9D9;
    }

    div.managermentCenterArea
    ul
    li
    input.systemDate:focus {
        border: 2px solid #D9D9D9;
    }

    div.managermentCenterArea
    ul
    li
    input.stateInput:focus {
        border: 2px solid #4A84D1;
    }

    div.managermentCenterArea
    ul
    li
    input.stateInput {
        display: inline-block;
        float: right;
        position: relative;
        font-size: 14px;
        width: 60px;
        height: 30px;
        text-align: center;
        margin-bottom: 5px;
        outline: none;
        border: 1px solid #D1D1D1;
    }

    div.managermentCenterArea
    ul
    li
    label.systemDateLabel {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        color: #333333;
        width: 50px;
        height: 30px;
        text-align: center;
        margin-bottom: 5px;
    }

    div.managermentCenterArea
    ul
    li
    input.systemDate:focus {
        border: 2px solid #4A84D1;
    }

    div.managermentCenter2Area {
        display: inline-block;
        position: relative;
        float: left;
        width: 280px;
        height: 830px;
        padding: 10px;
        border-style: solid;
        border-width: 0 1px 0 0;
        border-color: #E1E1E1;
    }

    #addManagermentUser {
        display: none;
    }

    div.managermentCenter2Area
    label {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: left;
        font-weight: 700;
        font-size: 15px;
        color: #2a2b30;
    }

    div.managermentCenter2Area
    ul {
        display: inline-block;
        float: left;
        width: 100%;
        height: 790px;
        vertical-align: top;
        overflow-x: hidden;
        overflow-y: auto;
    }

    div.managermentCenter2Area
    ul
    li {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
        margin-bottom: 8px;
        cursor: pointer;
        padding: 10px;
        border: 1px solid #a1a1a1;
    }

    div.managermentCenter2Area
    ul
    li
    span {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        vertical-align: top;
    }

    div.managermentCenter2Area
    ul
    li
    label.managerInputLabel {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        width: 70px;
        height: 30px;
        text-align: right;
        text-indent: 5px;
        color: #4575b4;
        font-weight: 700;
        margin-bottom: 5px;
    }

    div.managermentCenter2Area
    ul
    li
    label.managerInputedLabel {
        display: inline-block;
        float: left;
        position: relative;
        font-size: 14px;
        width: 70px;
        height: 30px;
        text-align: right;
        text-indent: 5px;
        color: #333333;
        font-weight: 700;
        margin-bottom: 5px;
    }

    div.managermentCenter2Area
    ul
    li
    input.managerInfoInput {
        display: inline-block;
        float: right;
        position: relative;
        font-size: 14px;
        width: 150px;
        height: 30px;
        text-align: center;
        color: #333333;
        font-weight: 300;
        outline: none;
        margin-bottom: 5px;
        border: 1px solid #D1D1D1;
    }

    div.managermentCenter2Area
    ul
    li
    span
    input[type="checkbox"] {
        display: inline-block;
        text-align: left;
        float: left;
        position: relative;
        font-size: 14px;
        width: 15px;
        height: 15px;
        text-align: left;
        color: #333333;
        margin: 3px;
        cursor: pointer;
    }

    div.managermentRightArea {
        display: inline-block;
        position: relative;
        float: left;
        width: calc(100% - 820px);
        height: 830px;
        padding: 10px;
    }

    div.managermentRightArea
    label {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: left;
        font-weight: 700;
        font-size: 15px;
        color: #2a2b30;
    }

    div.managermentRightArea
    textarea {
        display: inline-block;
        position: relative;
        padding: 5px;
        width: 100%;
        height: 100px;
        line-height: 20px;
        text-align: left;
        font-weight: 300;
        font-size: 14px;
        margin-bottom: 0px;
        color: #333333;
        resize: none;
        outline: none;
        border: 2px solid #4575b4;
        text-indent: 10px;
        font-size: 15px;
        letter-spacing: 0.5px;
        color: #333333;
    }

    div.managermentRightArea
    div.divRightHistoryArea {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        width: 100%;
        height: 650px;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: auto;
        margin-top: 10px;
    }

    div.managermentRightArea
    div.divRightHistoryArea
    ul.rightHistoryArea {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        padding: 0;
        width: 100%;
        height: auto;
    }

    div.managermentRightArea
    div.divRightHistoryArea
    ul.rightHistoryArea
    li {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        padding: 0;
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        border: 1px solid #a1a1a1;
        background-color: #F1F1F1;
    }

    div.managermentRightArea
    div.divRightHistoryArea
    ul.rightHistoryArea
    li
    span.historyNm {
        display: inline-block;
        position: relative;
        float: left;
        text-align: left;
        text-indent: 10px;
        vertical-align: top;
        padding: 0;
        width: 100px;
        height: 20px;
        line-height: 20px;
        color: #4575b4;
        font-size: 13px;
        font-weight: 300;
        background-color: #F1F1F1;
        letter-spacing: 0.5px;
        font-weight: 700;
        font-style: italic;
    }

    div.managermentRightArea
    div.divRightHistoryArea
    ul.rightHistoryArea
    li
    span.historyDate {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        padding: 0;
        width: 240px;
        height: 20px;
        line-height: 20px;
        text-align: right;
        font-size: 13px;
        color: #333333;
        font-weight: 700;
    }

    div.managermentRightArea
    div.divRightHistoryArea
    ul.rightHistoryArea
    li
    span.historyWritor {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        padding: 0;
        width: calc(100% - 340px);
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 13px;
        color: #333333;
        font-weight: 700;
    }

    div.managermentRightArea
    div.divRightHistoryArea
    ul.rightHistoryArea
    li
    span.rightHistoryCont {
        display: inline-block;
        position: relative;
        float: left;
        vertical-align: top;
        padding: 0;
        width: 100%;
        height: auto;
        line-height: 23px;
        padding: 10px;
        text-align: justify;
        word-wrap: break-word;
        border-style: solid;
        border-width: 1px 0 0 0;
        border-color: #d1d1d1;
        text-indent: 10px;
        font-size: 15px;
        letter-spacing: 0.5px;
        color: #333333;
        background-color: #ffffff;
    }

    /*managerMent*/
    /*ncs*/
    /*content.listViewDetailArea {
        display: inline-block;
        width: 1240px;
        height: auto;
    }*/

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2 {
        display: inline-block;
        width: 100%;
        height: auto;
        text-align: center;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li {
        display: inline-block;
        float: center;
        width: 19%;
        height: 138px;
        margin : 6px;
        background-color: #FDFDFD;
        border: 1px solid #d9d9d9;
        padding: 5px;
        cursor: default;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li.major {
        height: auto;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li.all {
        float: left;
        background-color: #FDFDFD;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li:hover {
        outline: 2px solid #4a7cd4;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.chkArea {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.chkArea
    p {
        display: inline-block;
        float: left;
        width: auto;
        height: auto;
        font-size: 15px;
        font-weight: 700;
        color: #4a7cd4;
        padding: 3px;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.chkArea
    p.numberArea {
        display: inline-block;
        float: left;
        width: 40px;
        height: auto;
        font-size: 13px;
        font-weight: 700;
        color: #565656;
        padding: 3px;
        border-style: solid;
        border-color: #d9d9d9;
        border-width: 0 1px 0 0;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.chkArea
    input[type="checkbox"] {
        display: inline-block;
        float: right;
        width: 20px;
        height: 20px;
        border: 1px solid #4a7cd4;
        cursor: pointer;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.tableContLabel {
        display: inline-block;
        float: left;
        width: 50%;
        height: auto;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.tableContLabel
    label {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        color: #555555;
        font-size: 13px;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.tableContLabel
    p {
        display: inline-block;
        float: left;
        width: 100%;
        height: auto;
        padding: 3px;
        font-size: 15px;
        color: #333333;
        font-weight: 700;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.resultBtn {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        margin-top: 5px;
        font-size: 13px;
        color: #ffffff;
        cursor: pointer;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.resultBtnM {
        display: inline-block;
        width: 100%;
        height: auto;
        margin-top: 5px;
        font-size: 13px;
        color: #0788d8;
        cursor: pointer;
        border: 1px solid #0788d8;
        padding: 5px;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li:hover
    span.resultBtn {
        background-color: #4a7cd4;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li:hover
    span.resultBtnM {
        background-color: #0788d8;
        color: #ffffff;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li
    span.resultBtn
    i {
        display: inline-block;
        width: 50px;
        height: 50px;
        font-size: 30px;
        padding: 9px 1px 0px 0px;
        color: #4a7cd4;
    }

    content.listViewDetailArea
    div.listViewArea
    ul.ListTotal2
    li:hover
    span.resultBtn
    i {
        color: #ffffff;
    }

    .form-inline {
        padding: 0 2rem;
    }
    
    /* 외주css 최소한 추가 이윤재 2409*/

    .blue-border-btn {
	    width: 76px;
	    height: 32px;
	    border: 1px solid #3B68D7;
	    border-radius: 4px;
	    color: #3B68D7;
	    font-weight: bold;
	    font-size: 14px;
	    background: #fff;
    }
    
    /* login page */
	.login-sec {
	    margin:0 auto;
	    width:100%;
	    height: auto;
	    min-height: 100vh;
	    max-height: 1080px;
	    background: #F1F3F8;
	}
	.login-sec .cont-wrap {
	    height: auto;
	    min-height: calc(100vh - 80px);
	}
	.login-sec .cont-wrap .login-wrap {
	    padding:60px 50px;
	    width:96%;
	    max-width:600px;
	    height: auto;
	    max-height: 742px;
	    border-radius: 20px;
	    background: #fff;
	    box-shadow: 0px 0px 15px rgba(0,0,0,0.05);
	}
	.login-sec .cont-wrap .login-wrap h4 {
	    margin:0 auto 60px;
	}
} /*media close*/