@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/NotoSansKr/NotoSansKR-Thin.woff2) format('woff2'), url(fonts/NotoSansKr/NotoSansKR-Thin.woff) format('woff'), url(fonts/NotoSansKr/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/NotoSansKr/NotoSansKR-Light.woff2) format('woff2'), url(fonts/NotoSansKr/NotoSansKR-Light.woff) format('woff'), url(fonts/NotoSansKr/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/NotoSansKr/NotoSansKR-Regular.woff2) format('woff2'), url(fonts/NotoSansKr/NotoSansKR-Regular.woff) format('woff'), url(fonts/NotoSansKr/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/NotoSansKr/NotoSansKR-Medium.woff2) format('woff2'), url(fonts/NotoSansKr/NotoSansKR-Medium.woff) format('woff'), url(fonts/NotoSansKr/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/NotoSansKr/NotoSansKR-Bold.woff2) format('woff2'), url(fonts/NotoSansKr/NotoSansKR-Bold.woff) format('woff'), url(fonts/NotoSansKr/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(fonts/NotoSansKr/NotoSansKR-Black.woff2) format('woff2'), url(fonts/NotoSansKr/NotoSansKR-Black.woff) format('woff'), url(fonts/NotoSansKr/NotoSansKR-Black.otf) format('opentype');
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR',"맑은고딕", Arial,sans-serif;
    color: #595959
}


.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mx-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
}

.mx-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

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

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

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

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

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

html {
    box-sizing: border-box
}

*, :before, :after {
    box-sizing: inherit
}

fieldset {
    box-sizing: border-box
}

html, body {
    width: 100%;
    min-width: 500px;
    height: 100%;
    background-color: #fff;
    font-style: normal;
    font-weight: normal;
    font-family: 'Noto Sans KR',Arial,sans-serif;
    color: #000; /*-ms-overflow-style:-ms-autohiding-scrollbar */
}

body, input, select {
    font-size: .9em
}

:lang(en-GB) {
    quotes: '\2018\' \'\2019\' \'\201C\' \'\201D'
}

:lang(zh) {
    font-family: '微软雅黑'
}

@-ms-viewport {
    width: device-width
}

@-moz-viewport {
    width: device-width
}

@-o-viewport {
    width: device-width
}

@-webkit-viewport {
    width: device-width
}

@viewport {
    width: device-width
}

/* Theme layout styles */
#pageWrapper {
    position: relative;
    width: 100%;
    min-width: 640px;
    min-height: 600px;
    height: 100%;
    background-color: #ddd;
    /* background-image: url(../Content/images/client/img_background.jpg) */
    background: url(../Content/images/client/img_background.jpg) no-repeat;
    background-size: cover;
}

#contentWrapper {
    position: relative;
    width: 640px;
    height: 530px;
    margin: 0 auto;
    top: 10%;
    background-color: #fff; /* opacity: 0.9; */
}

#banner {
    background: #00aef0;
    height: 70px;
    margin: 0 auto;
    padding: 20px 35px 35px;
}

    /* 2019 브랜드 수정 */
    #banner h1 {
        margin-top: 10px;
        color: #fff;
    }

#artpss {
    /*background-image: url(../Content/images/brandlogo.png);*/
    background-image: url(../Content/images/brandlogo_new.png);
    background-repeat: no-repeat;
    background-position: 240px 5px;
    display: block;
    min-height: 20px;
    width: 100%;
}
/* //2019 브랜드 수정 */

#header h2 {
    font-size: .8em;
    color: #fff;
    font-weight: normal;
}

#indicator {
    font-size: 1.3em;
    float: right;
    display: flex;
    width: auto;
    justify-content: space-around
}

    #indicator p {
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(256,256,256,0.7);
        text-align: center;
        margin-left: 14px; /* for IE9 */
        display: inline-block;
    }

        #indicator p:first-child {
            margin-left: 0;
        }

        #indicator p.now {
            color: #00aef0;
            background-color: rgba(256,256,256,1);
        }

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 51px;
    color: #666;
    background-color: rgba(221, 221, 221, 1);
}

.copyright {
    color: #696969;
    margin-left: 35px;
    line-height: 50px;
    display: inline-block;
    font-size: .7em
}

    .copyright a {
        color: #1883d7;
        margin-left: 7px;
    }


.cLogo {
    margin: 0 auto;
    width: 86px;
    float: right;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    visibility: hidden;
    opacity: 0;
}

/* Common content styles */
a {
    background-color: transparent;
    color: #2672ec;
    text-decoration: none
}

fieldset, img {
    border: 0;
}

legend {
    display: none
}

.row::after {
    content: "";
    clear: both;
    display: table
}

[class*="col-"] {
    float: left;
    padding: 3px 0;
}

.col-1 {
    width: 8.33%
}

.col-2 {
    width: 16.66%
}

.col-3 {
    width: 25%
}

.col-4 {
    width: 33.33%
}

.col-5 {
    width: 41.66%
}





.col-6 {
    width: 50%
}

.col-7 {
    width: 58.33%
}

.col-8 {
    width: 66.66%
}

.col-9 {
    width: 75%
}

.col-18 {
    /*width: 22%;*/
    margin-left: 7px;
}

.col-1818 {
    width: 26%
}

.col-181818 {
    width: 75%
}


.col-10 {
    width: 83.33%
}

.col-11 {
    width: 91.66%
}

.col-12 {
    width: 100%
}

input[type="text"], input[type="password"], select {
    border: 1px solid #cccccc;
    height: 34px;
    padding: 4px 10px;
    font-size: .8em;
}

    input[type="text"]:active, input[type="text"]:focus, input[type="password"]:active, input[type="password"]:focus {
        border: 1px solid #0084FF
    }

/* page */
.header_wrap {
    background: #00aef0;
    height: 90px;
    margin: 0 auto;
    padding: 14px 35px 35px;
}

.content_wrap {
    padding: 5px 30px;
}

.form_in { /*min-height:100px*/
}

    .form_in .tit {
        display: inline-block;
        color: #000;
        height: 30px;
        line-height: 25px; /*overflow:hidden;text-overflow:ellipsis;white-space:nowrap;*/
    }

    .form_in .displayname {
    }

    .form_in input[type="text"], .sub_form input[type="password"], select {
        margin-bottom: 15px
    }

    .form_in .cert_select {
        padding-top: 9px;
        margin-bottom: 15px
    }

        .form_in .cert_select label {
            display: inline-block;
            font-weight: 300;
            margin-right: 12px
        }

.subtxt {
    text-align: right
}

.alert {
    display: none;
}

    .alert .tit {
        display: inline-block;
        color: #000;
        text-align: right;
        height: 30px;
        line-height: 30px;
        margin-top: 20px
    }

    .alert .info {
        /*text-indent: 10px;*/
        padding-left: 20px;
        text-align: left;
        width: 100%;
    }

    .alert .btn-alert {
        display: none
    }

.btn-wrap {
    width: 100%;
    text-align: center;
    margin-top: 10px
}

.btn-in {
    float: right;
    margin-left: 7px;
    padding: 0;
    width: 184px;
}

.birth-in select {
    float: left;
    margin-left: 7px;
    width: 32.2%
}

    .birth-in select:first-child {
        margin-left: 0;
    }

.btn-panel {
    position: absolute;
    bottom: 10px;
    right: 35px;
    z-index: 1;
    width: 50%;
    text-align: right;
}

[class*="btn_"] {
    display: inline-block;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    height: 29px; /*padding:0 25px*/
}

.btn_submit {
    background-color: #00aef0;
    border: 1px solid #00aef0;
    color: #fff;
    width: 45%;
}

.btn_legal {
    color: #1883d7;
    margin-left: 7px;
    text-decoration: none;
    background-color: transparent;
}

.btn_custom {
    width: 120px;
    margin-left: 10px;
    background-color: #00aef0;
    border: 1px solid #00aef0;
    color: #fff;
}

.btn_basic {
    background-color: #fff;
    border: 1px solid #00aef0;
    color: #00aef0;
    width: 45%
}

    .btn_basic:hover {
        background-color: #DEEEFC
    }

.btn_light {
    background-color: #fff;
    border: 1px solid #b5b5b5;
    height: 34px;
    font-size: 1em;
    font-weight: 400;
    padding: 0 15px;
    /*margin-left: 10px;*/
    margin-right: 5px;
}

    .btn_light:hover {
        background-color: #F7F7F7
    }



.captcha {
    height: 34px;
    border: 0px;
    padding: 0
}

@media only screen and (max-width:700px) {
    #captchaImage {
        border: 1px solid #b5b5b5;
        margin-left: 5px !important;
        float: right;
        margin-right: 1px !important;
        width: 100%;
    }
    #pageWrapper {
        background-image: none;
        background-color: #00aef0;
        padding: 45px 0 25px 0;
        min-width: 100%;
        min-height: 100%;
        height: 765px !important;
    }
    .alert {
        position: relative !important;
        vertical-align: middle;
        background: #ffffff;
        z-index: 9999;
        min-height: 135px !important;
        top: 30%;
        width: 100%;
        padding: 10px 60px !important;
        left: 0;
    }
}

@media only screen and (max-width:768px) {
    html, body {
        min-width: 260px;
    }


    .col-18 {
        width: 41.66%;
        margin-left: 0px;
    }

    .col-1818 {
        width: 75%
    }

    .cLogo {
        width: 120px;
        position: absolute;
        top: -40px;
        margin: 0 auto;
    }

    #pageWrapper {
        background-image: none;
        background-color: #00aef0;
        padding: 45px 0 25px 0;
        min-width: 100%;
        min-height: 100%
    }

    #contentWrapper {
        float: none;
        width: 90%;
        height: 100%;
        min-height: 600px;
        background: #fff;
        top: 0
    }

    #banner {
        background: #fff;
        height: auto;
        margin: 0 auto;
        padding: 20px 35px 0
    }

        /* 2019 브랜드 수정 */
        #banner h1 {
            color: #000;
        }

    #artpss {
        background-position: right 3px;
        position: absolute;
        top: -32px;
        right: 40px;
    }
    /* // 2019 브랜드 수정 */

    #bannerWarn #artpss {
        background-image: inherit !important;
    }

    #header h2 {
        font-size: 1em;
        color: #595959;
        font-weight: normal;
    }

    #indicator {
        font-size: 1.3em;
        float: none;
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid #ddd; /* for IE9 */
        text-align: center;
    }

        #indicator p {
            color: #fff;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #ddd;
            text-align: center;
            margin-left: 14px; /* for IE9 */
            display: inline-block;
        }

            #indicator p:first-child {
                margin-left: 0;
            }

            #indicator p.now {
                color: #fff;
                background-color: #00aef0;
            }

    input[type="text"], input[type="password"], select {
        border: 1px solid #cccccc;
        height: 40px;
        padding: 4px 10px;
        font-size: 1em;
    }

        input[type="text"]:active, input[type="text"]:focus, input[type="password"]:active, input[type="password"]:focus {
            border: 1px solid #0084FF
        }

    .header_wrap {
        background: #fff;
        height: auto;
        margin: 0 auto;
        padding: 0 35px
    }

    .row {
        width: 100%
    }

    [class*="col-"] {
        width: 100%
    }

    [class*="btn_"] {
        height: 43px;
        padding: 0 25px;
    }

    .btn-panel {
        position: relative;
        top: 5px;
        right: 0;
        float: none;
        width: 100%;
        text-align: center;
        padding: 0 15px
    }

    .btn-in {
        margin-left: 0;
        width: 100%;
        margin-bottom: 15px
    }

    .birth-in select {
        width: 31.8%
    }

    .alert .info {
        text-indent: 0;
    }

    .subtxt {
        margin-top: auto;
        text-align: center
    }

    .twin_col .col-6 {
        width: 65%;
    }

    .twin_col .col-3 {
        width: 35%;
    }



    .captcha {
        height: auto;
    }

    #footer {
        background: #fff;
        height: 94px;
    }

    .copyright {
        display: block;
        font-size: .9em;
        margin: 0 auto;
        text-align: center
    }

    .tooltip .display {
        width: 430px;
        bottom: 40px;
        right: 0;
    }

        .tooltip .display i {
            left: 90%;
        }

    .alert {
        /*position: fixed;*/
        vertical-align: middle;
        background: #ffffff;
        z-index: 49;
        min-height: 240px;
        top: 30%;
        width: 100%;
        padding: 40px 60px;
        left: 0;
    }

    .alert.mobile {
        position: fixed;
        vertical-align: middle;
        background: #ffffff;
        z-index: 999;
        min-height: 240px;
        top: 56%;
        width: 100%;
        padding: 40px 60px;
        left: 0;
    }

        .alert .tit {
            display: inline-block;
            color: #000;
            text-align: right;
            height: 30px;
            line-height: 30px;
            margin-top: 0;
            font-size: 1.5em;
            font-weight: 500;
            margin-bottom: 20px;
            color: #00aef0;
        }

        .alert .info {
            text-indent: 0;
        }

        .alert .btn-alert {
            display: block;
            position: absolute;
            bottom: 40px;
            text-align: center;
            width: 100%
        }

    .captcha {
        height: 110px /*height:auto;*/
    }

    .overlay {
        visibility: visible;
        opacity: 1;
    }
}

@media only screen and (max-width:480px) {
    body {
        font-size: .8em
    }



    #pageWrapper {
        padding: 45px 0 0 0
    }



    #contentWrapper {
        width: 100%;
    }



    #indicator {
        font-size: 1.6em;
    }


    span.submit, input[type=submit] {
        font-size: 1.1em
    }

    .cLogo {
        width: 100px;
        position: absolute;
        top: -40px;
        margin: 0 auto;
    }

    .birth-in select {
        width: 31.6%
    }

    .captcha {
        height: 75px;
    }

    .tooltip .display {
        width: 340px
    }

        .tooltip .display i {
            left: 80%;
        }

    .captcha {
        height: 90px /*height:auto;*/
    }
}

.pop-layer .pop-container {
    padding: 20px 25px;
}

.pop-layer p.ctxt {
    color: #666;
    line-height: 25px;
}

.pop-layer .btn-r {
    width: 100%;
    margin: 10px 0 20px;
    padding-top: 10px;
    border-top: 1px solid #DDD;
    text-align: right;
}

.pop-layer {
    position: relative;
    z-index: 51;
    /* 크기 조정 */
    left: auto;
    top: 17%;
    width: 25%;
    height: auto;
    margin: auto;
    border: 5px solid #3571b5;
    background-color: #fff;
}

.pop-layer.mobile {
    left: 0% !important;
    width: 100% !important;
}

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

    .dim-layer .dimBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .5;
        filter: alpha(opacity=50);
    }

    .dim-layer .pop-layer {
        display: block;
    }

a.btn-layerClose {
    /*display: inline-block;*/
    height: 25px;
    padding: 0 14px 0;
    border: 1px solid #767EED; /*원본색 #304a8a*/
    background-color: #3f5a9d;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
}

a.btn-layer {
    height: 25px;
    padding: 0 14px 0;
    border: 1px solid #767EED; /*원본색 #304a8a*/
    background-color: #3f5a9d;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
}

a.btn-layerClose:hover {
    border: 1px solid #091940;
    background-color: #1f326a;
    color: #fff;
}

a.btn-layer:hover {
    border: 1px solid #091940;
    background-color: #1f326a;
    color: #fff;
}

.f-margin10 {
    margin-left: 10px;
    font-weight: bold;
}

.divDC {
    display: inline-block; /* Flexbox 사용 */
    justify-content: space-between; /* 각 항목 간의 공간 균등 분배 */
}

#divmobileDC1 .auth-option {
    padding-top: 10px;
}

.auth-option {
    display: block; /* 각 옵션을 가로로 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    margin: 0px; /* 항목 간의 여백 */
}

.auth-option.mobile {
    float: left;
    padding: 25px 0px !important;
}

    .auth-option:last-child {
        margin-right: 0; /* 마지막 항목에는 여백 제거 */
    }


:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
}

.d-flex {
    display: flex !important;
}

.justify-content-center {
    justify-content: center !important;
}

.spinner-border {
    display: inline-block;
    width: var(--bs-spinner-width);
    height: var(--bs-spinner-height);
    vertical-align: var(--bs-spinner-vertical-align);
    border-radius: 50%;
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}


@keyframes spinner-border {
    to {
        transform: rotate(360deg) /* rtl:ignore */;
    }
}

.spinner-border {
    --bs-spinner-width: 2rem;
    --bs-spinner-height: 2rem;
    --bs-spinner-vertical-align: -0.125em;
    --bs-spinner-border-width: 0.25em;
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-animation-name: spinner-border;
    border: var(--bs-spinner-border-width) solid currentcolor;
    border-right-color: transparent;
}

.spinner-border-sm {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.2em;
}

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.spinner-grow {
    --bs-spinner-width: 2rem;
    --bs-spinner-height: 2rem;
    --bs-spinner-vertical-align: -0.125em;
    --bs-spinner-animation-speed: 0.75s;
    --bs-spinner-animation-name: spinner-grow;
    background-color: currentcolor;
    opacity: 0;
}

.spinner-grow-sm {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .spinner-border,
    .spinner-grow {
        --bs-spinner-animation-speed: 1.5s;
    }
}

.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.loading {
    /*   display: none;*/
    position: absolute;
    /*    top: calc(50% - (...px /2));
    right: calc(50% - (...px /2));*/
    top: 50%;
    right: 50%;
    z-index: 9999;
    width: 50px;
    height: 50px;
    /*transform: translate(-50%, -50%);*/
}


#loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 반투명 검정색 */
    z-index: 999; /* 스피너보다 위에 위치 */
}

.dpNone {
    display: none;
}

.dpShow {
    display: block;
}

#dimLayerMessage {
    max-height: 400px; /* 원하는 최대 높이 설정 */
    overflow-y: auto; /* 세로 스크롤바 추가 */
}

#smartPop_overlay {
    opacity: 0.7;
    background: rgb(89, 89, 89);
    display: block;
}

#smartPop_overlay.dimBg {
    background: rgb(89, 89, 89);
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 49;
}

.dim-layer1 {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5);*/
}

.dim-layer1 .dimBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    filter: alpha(opacity=50);
}

.dim-layer1 .pop-layer {
    display: block;
}

.dim-layer1 .pop-layer2 {
    display: block;
}


/* popup */
#popwindowWrap {
    padding: 15px 20px;
    height: 92%;
    font-size: 0.8em;
}

#popwindowWrap h1 {
    color: #1883d7;
    font-size: 1.2em;
    font-weight: 400;
    border-bottom: 1px solid #1883d7;
    padding-bottom: .7em;
    margin-bottom: 0.5em;
}

.i_close {
    float: right;
    margin-right: 5px;
}

#instituteWrap {
    border: 1px solid #dedede;
    padding: 20px;
    margin-top: 20px;
    overflow-y: auto;
    height: 300px;
}

    #instituteWrap h3 {
        text-align: center;
        margin-bottom: 1.2em;
    }

    #instituteWrap h4 {
        margin: 25px 0 15px 0;
    }

    #instituteWrap p {
        font-size: .9em;
    }

.intro li {
    margin-left: 20px;
    margin-bottom: 10px;
}

.institute ul, .institute ol {
    margin-left: 10px;
    margin-bottom: 10px;
    list-style: none;
}

    .institute ul li, .institute ol li {
        margin: .7em 0 .5em;
    }

        .institute ul li li, .institute ol li li {
            margin: .7em 0 .5em;
        }

.subbreak {
    background: #f7f7f7;
    padding: 4px 5px;
}

.institute table {
    clear: both;
    width: 100%;
    background: #fff;
    border: 0;
    border-top: 1px solid #00aef0;
    border-right: none;
    border-bottom: 1px solid #ccc;
    border-spacing: 0;
    border-collapse: collapse;
}

.institute th {
    background: #edf9fe;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
    padding: 6px 5px;
    text-align: center;
}

.institute td {
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
    padding: 4px 5px;
    text-align: center;
}

    .institute th:first-child, .institute td:first-child {
        border-left: none;
    }

    .institute th:last-child, .institute td:last-child {
        border-right: none;
    }

/* 2019-01-31 */

[class*="btn_"]:disabled {
    opacity: 0.6;
    background: #dee9fc;
    border-color: #dee9fc;
    color: #929eb0;
    cursor: default;
}

/* tooltip */
.tooltip {
    display: inline-block;
    position: relative;
    text-align: left;
    color: #00aef0;
    left:-1%;
}

.tooltip.col-3.mobile {
    text-align: right;
    left: -10% !important;
    margin-top: -27px !important;
}

.tooltip .display {
    width: 500px;
    bottom: 40px;
    right: -30px;
    /* transform:translate(-50%, -100%);*/
    padding: 10px 20px;
    color: #444444;
    background-color: #EEEEEE;
    font-weight: normal;
    font-size: .8em;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s;
}

.tooltip .display.mobile {
    width: 100% !important;
    right: -30px !important;
    text-align: left !important;
}

.tooltip:hover .display {
    visibility: visible;
    opacity: 1;
}

.tooltip .display i {
    position: absolute;
    top: 100%;
    left: 70%;
    margin-left: -12px;
    width: 24px;
    height: 12px;
    overflow: hidden;
}

.tooltip .display i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    background-color: #EEEEEE;
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/*패스워드 Icon CSS*/
.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important
}

[name='scrDoc'] {
    display: inline-block;
    width: 100%;
    float: left;
}

    [name='scrDoc'] .cont {
        display: inline-block;
        width: 90%;
    }

    [name='scrDoc'] .icon {
        display: flex;
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
        border-radius: 50%;
        color: #fff;
        background: #0F62FE
    }

        [name='scrDoc'] .icon i {
            margin: auto;
            font-size: 18px
        }

    [name='scrDoc'] .flex {
        display: inline-block;
        align-items: center;
        margin: 10px 0 0;
        width: 100%;
    }

    [name='scrDoc'] .input_wrap {
        overflow: hidden;
        position: relative;
        border-radius: 6px 0 0 6px;
        border: 1px solid #d5d5d5;
        width: 100%;
    }

        [name='scrDoc'] .input_wrap .pswd {
            width: 100%;
            height: 35px;
            padding: 0 40px 0 15px;
            border: none;
            /*font-size: 15px;
            font-weight: 500;*/
            color: #24324b;
            /*font-family: 'pretendard';*/
            margin-bottom: 0px;
        }

            [name='scrDoc'] .input_wrap .pswd:focus, .pswd:active {
                border: none !important;
                outline: none !important;
                box-shadow: none !important
            }

        [name='scrDoc'] .input_wrap .eyes {
            cursor: pointer;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }

    [name='scrDoc'] button {
        width: 90px;
        height: 57px;
        border-radius: 0 6px 6px 0;
        border: none;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        background: #24324b;
        font-family: 'pretendard'
    }

#captchaImage {
    border: 1px solid #b5b5b5;
    margin-left: 5px !important;
    float: right;
    margin-right: 1px !important;
}

#captchaImage.mobile {
    width: 100% !important;
    height: 40px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.btn_right {
    background-color: #fff;
    border: 1px solid #b5b5b5;
    height: 34px;
    font-size: 1em;
    font-weight: 400;
    padding: 0 15px;
    /*margin-left: 10px;*/
    margin-right: 0px;
    float:right;
}

.btn_right:hover {
    background-color: #F7F7F7
}

#rbMobileDX, #rbEmailDX {
    margin-left: 16.5%;
}

#rbMobileDS2, #rbMobileDX2 {
    margin-left: 16.5%;
}

#rbMobileDX.mobile, #rbEmailDX.mobile {
    margin-left: 20%;
}

#rbMobileDX.default, #rbEmailDX.default {
    margin-left: 0% !important;
}
/* IE, Edge 눈모양 표시 숨김처리*/
input::-ms-reveal,
input::-ms-clear {
    display: none !important;
}

.text-ellipsis {
    width: 20%; /* 원하는 너비 설정 */
    white-space: nowrap; /* 줄 바꿈 방지 */
    overflow: hidden; /* 넘치는 부분 숨기기 */
    text-overflow: ellipsis; /* 줄임표(...) 표시 */
}