html, body {
    height: 100%;
    min-height: 640px
}

body, div, p, input, button {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    color: #221f1f;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    font-weight: 300
}

.btn {
    background-color: #2dabe5;/*color1*/
    border-radius: 0;
    color: white;
    cursor: pointer;
    font-size: 1em;
    line-height: 3.1875;
    width: 100%
}

.btn:hover {
    opacity: 0.8
}

.clearfix {
    overflow: hidden
}

.clearfix::after {
    clear: both
}

.m-only {
    display: none;
}

.input {
    border: 2px solid #f0f0f0;
    color: #7d7e83;
    font-size: 16px;
    font-weight: normal;
    line-height: 3.1875;
    margin-top: 10px;
    padding: 0 23px;
    width: 100%
}

.input:first-child {
    margin-top: 0
}

.input input {
    color: inherit;
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    width: 100%
}

.input input:focus, .input>input:active {
    outline: none
}

.input i {
    color: inherit
}

.bg {
    background-color: #edf1f5;
    height: 100%;
    position: relative;
    width: 100%
}

.window-wrapper {
    bottom: 0;
    height: 476px;
    left: 0;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 825px
}

.window {
    border-radius: 13px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    height: 100%;
    width: 100%
}

.window::after {
    clear: both
}

.window .logo-section {
    background-color: #0d47a1;/*color2*/
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    float: left;
    height: 100%;
    width: 413px
}

.window .login-section {
    background-color: white;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    float: left;
    height: 100%;
    padding: 50px;
    width: 412px
}

.window .copyright-section {
    clear: both;
    text-align: center
}

.window.login .fig-portrait {
    color: #d2d2d2;
    margin: 25px auto 10px;
    text-align: center;
    width: 170px;
    height:45px;
    max-height:45px;
    overflow-y: hidden;
    line-height: 50px;
}

.window.login .fig-portrait>img {
    max-width:170px; max-height:45px;
}

.window.login .fig-logo {
    margin: 117px auto 45px;
    text-align: center;
    width: 250px
}

.window.login .fig-logo>img {
    font-size: 0;
    width: 100%
}

.window.login .fig-logo>p.name {
    color: white;
    font-size: 13.5px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 14px
}

.window.login .fig-logo>p.copyright {
    color: white;
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 251px
}

.window .section-input p {
    margin-bottom: 8px
}

/*loading css start*/
.backbg {
    position: absolute;
    top: 0px;
    left: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    font: normal 0.5em tahoma,arial,arial,helvetica;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.5);
    color: #dadfdf;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-family: sans-serif;
    z-index: 9998;
}
.backbg:hover{
    cursor: wait;
}
.loading-spinner-container {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -8%);
    text-align: center;
    display: block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1;
    -webkit-animation: wait 49s;
    animation: wait 49s;
    z-index: 9999;
}
.loading-txt1{
    color: #fff;
    display: block;
    margin: 10px 0;
    padding-left: 12px;
}
.loading-spinner {
    width: 10em;
    height: 10em;
    -webkit-animation: spin 1.4s infinite;
    animation: spin 1.4s infinite;
}
.loading-st0{ fill:none;stroke:#EAEFEF;stroke-width:5.25; }
.loading-st1{ fill:none;stroke:#37c1ff;stroke-width:5.25;stroke-linecap:round; }
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to   { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}
/*loading css end*/

.fig-logo .tit {color:#fff; font-size:24px; display:block; font-family: Arial;}
.fig-logo .tit span {color:#ce9574; font-size:24px;}
.fig-logo .etc {color: #91dcff; text-shadow: 1px 1px 1px #092856; font-weight: bold; font-size: 12px; display:inline-block; margin-top:12px; font-family: 'Rubik',Arial, sans-serif;}
.fig-logo .subtitle {
    color:#fff;
    font-size: 13.5px;
    top: 55px;
    letter-spacing: 1px;
    font-family: 'Rubik',Arial, sans-serif;
    display:inline-block;
    margin-top: 20px;
}

.captcha_area {padding:10px 0 5px 74px; width:100%; margin:0 auto;}
.captcha_img {display:inline-block; float:left; height:50px; position: relative;}
.captcha_border:after {position: absolute; left:0; top:0; width:146px; height:47px; content:""; border:2px solid #e8f0fe;}
.captch_option {float:left; width:15px; text-align: left; padding-left:3px;}
.captch_option:after {clear:both; content:""; display: block;}
.captch_option > button {float:left; background: #efefef; padding: 3px 4px; width:21px; border:2px solid #e8f0fe; cursor:pointer;}
.captch_option > button.reload {margin-top:12px;}
.overflow:after {clear:both; content:""; display: block;}
.captcha_input {height:37px; border:2px solid #f0f0f0; margin-top:5px; padding:5px; width:174px; background: #fff; border-radius: 0;}
.captcha_input input {background: #e8f0fe; width:100%;}

.ui-dialog-titlebar-close {
    position:absolute !important;top:10px !important;right:0px !important;;
}
.otpDialog .ui-dialog-titlebar {
    color: #000000;
    background-color:transparent; border:0px;
}
.ui-dialog-title {
    padding-top:30px;
}

.ui-dialog-buttonpane
{
    margin-top:0 !important;padding-top:0 !important; border-top:0
}
.otpAuthKeyInput {
    background-color:#E7E7E7;border:1px solid #B1B1B1; color:#B1B1B1;padding-left:5px;
}
.otpLoginBtn, .otpLoginBtn:hover, .otpLoginBtn:active, .otpLoginBtn:visited{
    background-color : #0d47a1 !important;
    color : white !important;;
    font-size: 15px !important;
}
.otpLoginCancelBtn, .otpLoginCancelBtn:hover, .otpLoginCancelBtn:active, .otpLoginCancelBtn:visited {
    background-color : white !important;;
    color : #999999 !important;;
    font-size: 15px !important;
}

#otpAuthCodeArea>h4, #createOtp>h4 {
    margin-bottom:0;
    color:#999999;
}

.otpAuthContents {
    border: 0px;
    padding-left:0px; margin-top:0px;
    padding-right:0px;
}

#otpBarcodeIframe {
    display:inline-block;
    border : 2px solid #0d47a1;
    padding:3px;
}

.otpAuthCodeInput {
    float: left;
    width: calc(100% - 145px);
    padding-right:20px;
    line-height: 130px;
}

.otpAuthCodeInput input {
    border-bottom: 1px solid #0d47a1;
    color:#0d47a1; font-size:20px; letter-spacing:5px;
}

.otpAuthCodeInput input::placeholder {
    color:#0d47a1; font-size:12px; letter-spacing:0px;
}

/* appdown-wrapper : S */
.appdown-wrapper .btn {
    cursor: pointer;
    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;

    display: inline-block;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    padding: 0 12px;
    width: 90px;
    -webkit-box-shadow: none;
    position: relative;
    text-align: left;
    height: 35px;
    border-radius: 8px;
    border:1px solid #0d47a1;
    line-height: 1.9;
    background:transparent;
}
.appdown-wrapper .p-right{
    position: absolute;
    right: 15px;
    top: 10px;
}
/* @media(hover: hover) and (pointer: fine) { */
@media(hover: hover) {
    .appdown-wrapper a.btn-social:hover.btn{
        color:#fff;
    }
    .appdown-wrapper a.btn-social:hover{
        background-color: #0d47a1;
    }
    .appdown-wrapper a.btn-social:hover b,
    .appdown-wrapper a.btn-social:hover i{
        color:#fff;
    }
    .appdown-wrapper a.btn-social:hover > :first-child,
    .appdown-wrapper a.btn-social:hover > :first-child,
    .appdown-wrapper a.btn-social:hover > :first-child{
        color:#fff;
    }
}
.appdown-wrapper .btn-social > :first-child {
    width: 32px;
    line-height: 1.5;
    font-size: 19px;
    text-align: center;
}
.appdown-wrapper .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#777;
}
.appdown-wrapper .p-right {
    position: absolute;
    right: 15px;
    top: 10px;
}
.appdown-wrapper {display:inline-block; float:right;}
.appdown-wrapper > * {vertical-align: middle; text-decoration: none; }
.appdown-wrapper b {font-weight: normal; font-size: 12px; color:#777;}
.appdown-wrapper > span {color:#666; margin-right:10px;}
.appdown-wrapper > a {width:48px;}
.appdown-wrapper > a.apple b {margin-left:15px;}
.appdown-wrapper .fa-apple:before,
.appdown-wrapper .fa-android:before {font-size:24px;}
.appdown-wrapper .btn-social * {vertical-align: middle;}
.appdown-wrapper .btn-social.apple b {margin-left:11px;}

/*.no_capchar .window.login .fig-portrait {margin: 45px auto;} */ /* 135 vs 95 */
.no_capchar .window.login .fig-portrait {margin: 10px auto;}
.no_capchar .btn_area {margin-top: 20px;}
.no_capchar .section-input .input.clearfix {margin-bottom:10px;}

@media ( max-width :1023px) {
    .no_capchar .window.login .fig-portrait {
        margin: 25px auto;
    }
    .appdown-wrapper {text-align:center; padding-top:0;}
}
@media (max-height :640px) {
    .window-wrapper {margin:0; }
}
@media (max-height :680px) {
    .appdown-wrapper {padding-top: 0; }
}

@media ( max-width :1023px) {
    .d-only {
        display: none
    }
    .window-wrapper {
        height: 580px;
        max-width: 458px;
        padding: 15px;
        width: 100%
    }
    .window {
        box-shadow: none;
        height: 100%;
        max-width: 438px;
        width: 100%
    }
    .window .logo-section {
        border-top-right-radius: 13px;
        border-bottom-left-radius: 0;
        float: none;
        height: auto;
        width: 100%
    }
    .window .login-section {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 13px;
        float: none;
        height: auto;
        padding: 45px 45px 62px;
        width: 100%
    }
    .window.login .fig-logo {
        margin: 0 auto;
        padding: 39px 0 31px;
        text-align: center;
        width: 100%
    }
    .window.login .fig-logo {
        width: 213px
    }
    .window.login .fig-logo>img.m-only {
        display: inline;
        font-size: 0;
        width: 100%
    }
    .window.login .fig-logo>p.name {
        font-size: 11px
    }
    .window.login .fig-portrait {
        color: #d2d2d2;
        font-size: 72px;
        margin: 20px auto 39px;
        text-align: center;
        width: 170px
    }
    .window .copyright-section {
        margin-top: 11px
    }
    .window .copyright-section.m-only {
        display: block
    }
    .window .copyright-section .copyright {
        color: #817792;
        font-size: 14px
    }
}



/* blueverse when buildtype != bni */

@font-face {
    font-family: 'KanitExtraLight';
    src:
        local("KanitExtraLight"),
        url(./Kanit-ExtraLight.woff2) format("woff2"),
        url(./Kanit-ExtraLight.woff) format("woff"),
        url(./Kanit-ExtraLight.ttf) format("truetype");
}
@font-face {
    font-family: 'KanitLight';
    src:
        local("KanitLight"),
        url(./Kanit-Light.woff2) format("woff2"),
        url(./Kanit-Light.woff) format("woff"),
        url(./Kanit-Light.ttf) format("truetype");
}
@font-face {
    font-family: 'KanitMedium';
    src:
            local("KanitMedium"),
            url(./Kanit-Medium.woff2) format("woff2"),
            url(./Kanit-Medium.woff) format("woff"),
            url(./Kanit-Medium.ttf) format("truetype");
}
@font-face {
    font-family: 'KanitRegular';
    src:
            local("KanitRegular"),
            url(./Kanit-Regular.woff2) format("woff2"),
            url(./Kanit-Regular.woff) format("woff"),
            url(./Kanit-Regular.ttf) format("truetype");
}
.blueverse.bg {background-color: #f1f1f1;}
.blueverse .window-wrapper {height:520px; width:940px; font-family: KanitLight;}
.blueverse .window {box-shadow: none;}
.blueverse .window .logo-section {width:520px;}
.blueverse .window .login-section {border-radius: 20px; width:420px; box-shadow: 5px 5px 5px #ababab; padding-top:10px;}
.blueverse .no_capchar .window .login-section {padding-top:50px; overflow: hidden;}
.blueverse .captcha_img > img {height:50px; overflow-y: hidden;}

.blueverse .window.login .fig-logo {text-align: left; margin:0; width:100%;}
.blueverse.bg .logo-section {background-color: #f1f1f1;}
.blueverse.bg .blueverse_login_graphic img {}
.blueverse .logo-section p {color:#fff;}
.blueverse .logo-section p.login_txt1 .c1 {color:#250088; font-family: KanitLight; font-weight: bold;}
.blueverse .logo-section p.login_txt1 .c2 {color:#007cff; font-family: KanitLight; font-weight: bold;}
.blueverse .logo-section p.login_txt2 {font-family: KanitRegular; font-size:50px; line-height: 48px; color:#0f0f0f;}
.blueverse .logo-section p.login_txt3 {font-family: KanitExtraLight; font-size:45px; height: 40px; line-height: 35px; color:#0f0f0f;}

.blueverse .login-section h1 {font-family: KanitRegular; font-size:27px; margin:10px 0 0; height:41px; overflow-y: hidden;}
.blueverse .no_capchar .login-section h1 {margin:30px 0 0; height:41px; overflow-y: hidden;}
.blueverse .login-section .guide {font-family: KanitLight; font-size:14px; margin-bottom:20px;}
.blueverse .section-input {position: relative;}
.blueverse .section-input .label {font-size:10px; color:#7D7E83; font-family: KanitLight; margin: 10px 0 5px;}
.blueverse .section-input input:not(.captcha_input input) {border: 2px solid #D3D3D3; border-radius: 28px; color:#7d7e83; height:55px; width:100%; padding:0 20px 0 50px; position:relative;}
.blueverse .section-input .fauser {position:relative; margin-top:20px;}
.blueverse .no_capchar .section-input .fauser {margin-top:40px;}
.blueverse .section-input .falock {position:relative; margin-top:20px;}
.blueverse .section-input .fauser:after {position: absolute; font-family: 'FontAwesome'; content: "\f007"; top: 14px; font-size: 23px; left: 20px; color:#777;}
.blueverse .section-input .falock:after {position: absolute; font-family: 'FontAwesome'; content: "\f023"; top: 14px; font-size: 23px; left: 23px; color:#777;}
.blueverse .section-input input:focus {border-color:#5B8BD0 !important;}
.blueverse .section-input input:focus-visible {outline:0;}
.blueverse .section-input .login_btn {margin-top:0;}
.blueverse .no_capchar .section-input .login_btn {margin-top:20px;}
.blueverse .section-input .login_btn .btn {border-radius: 26px; font-family: KanitLight;}
.blueverse .section-input .appdown-wrapper > a {border: 1px solid #777; border-radius: 4px; padding:5px 7px 3px;}
.blueverse .section-input .appdown-wrapper .fa-apple:before, .appdown-wrapper .fa-android:before {font-size:16px;}
.blueverse .section-input .detail {font-size:12px; font-family: KanitExtraLight; position: absolute; bottom:-70px; text-align: center; margin: 0 -40px; color:#badbff;}
.blueverse .no_capchar .section-input .detail {bottom:-140px;}
@media ( max-width :1023px) {
    .blueverse .window .logo-section {display:none;}
    .blueverse .window .copyright-section .copyright {color:#fff;}
    .blueverse .appdown-wrapper {margin-top: 0;}
}

.blueverse .forgotpassword {padding:10px 0 10px 25px;}
.blueverse .forgotpassword a {text-decoration: none; font-size: 12px; font-family: arial, sans-serif; color:#777;}
.resetpassword .modal-content {background:#fff; width:350px; height:390px; color:#333;}
.resetpassword .reset-input {border: 2px solid #D3D3D3; border-radius: 28px; color: #7d7e83; height: 55px; width: 100%; padding: 0 20px 0 50px; position: relative;}
.resetpassword .resetpa {position: relative; margin-bottom:20px;}
.resetpassword .resetpa input:focus-visible {outline:none;}
.resetpassword .resetpa input:focus {border:2px solid #5B8BD0;}
.resetpassword .resetpa:after {position: absolute; font-family: 'FontAwesome'; content: "\f007"; top: 14px; font-size: 23px; left: 20px; color: #777;}
.resetpassword .resetpa_1:after {content: "\f007";}
.resetpassword .resetpa_2:after {content: "\f0e0"; font-size:18px; top:18px;}
.resetpassword .resetpa_3:after {content: "\f023"; font-size:18px; top:18px;}
.resetpassword .login_btn button {border-radius:30px;}
.resetpassword .guide {font-size:13px; margin-bottom: 20px;}
/* 모달 팝업 스타일 */
.resetpassword.modal {display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5);}
.resetpassword .modal-content {background-color: #fefefe; margin: 0 auto; position:relative; top:calc(50% - 200px); padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px;}
.resetpassword .close {color: #aaa; float: right; font-size: 28px; font-weight: bold;}
.resetpassword .close:hover,
.resetpassword .close:focus { color: black; text-decoration: none; cursor: pointer;}
.resetpassword .reset-input {border: 2px solid #D3D3D3; border-radius: 28px; color: #7d7e83; height: 55px; width: 100%; padding: 0 20px 0 50px; position: relative;}
.resetpassword .display-none {display: none;}
.resetpassword .readonly-color {background-color: #cdced5; cursor: default;}
.resetpassword .reset-pwd {font-size: 13px; width: 125px !important;}
.resetpassword .reset_btn {background:#2dabe5;} /* [branding] */