@charset 'utf-8';

body.login{overflow: hidden;position: relative;width: 100%;height: 100%;background-image: url(../images/login/bg_login.jpg);background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
body.login .login_wrap{position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);width: 100%;max-width: 870px;}

/*.logo{display: inline-block;}*/
.logo{display: inline-block;height: 82px;float: right;}
.logo h1{display: inline-block;padding-left: 37px;margin-bottom: 20px;}
.logo h1 img{display: inline-block;}

.login_box{width: 100%;height: auto;border-radius: 30px;background-color: #fff;display: flex;}


/* radio */
.custom_radio{overflow: hidden;position: relative;display: inline-block;min-height: 18px;line-height: 22px;vertical-align: middle;margin-right: 10px;cursor: pointer;}
.custom_radio p{display: inline-block;vertical-align: middle;}
.custom_radio:last-of-type{margin-right: 0px;}
.custom_radio input[type="radio"]{position: absolute;z-index:-1;left:-30px;width: 18px;border: 0;}
.custom_radio input[type="radio"] + span{position:relative;z-index:1;left:0;display: inline-block;vertical-align: middle;width:18px;height: 18px;border-radius: 50%;background-color: #fff;border: 2px solid #9a9999;margin-right: 5px;}
.custom_radio input[type="radio"]:focus + span{border: 1px solid #000!important;}
.custom_radio input:checked + span{border-color: #4d74ea;}
.custom_radio input:checked + span::after{content:'';position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:9px; height: 9px; border-radius: 50%;display: inline-block;background-color: #4d74ea;}

.left_wrap{width: 40%;padding: 0 30px 0 20px;box-shadow: 10px 2px 20px rgba(125, 128, 194, 0.2);z-index: 1;position: relative;}

.left_wrap .img_login{display: block;width: 100%;height: 100%;background: url(../images/login/img_login.jpg) no-repeat center;background-size: 100%;max-width: 260px;margin: auto;}
.left_wrap .btn_login{background-color: #6963ff;}
.left_wrap .top_wrap{font-size: 13px;color: #828181;text-align: center;}
.left_wrap .top_wrap span{margin-right: 16px;}
/*
.right_wrap .bottom_wrap{position: relative;margin-bottom: 25px;margin-top: 55px;right: -30px;}
*/
.right_wrap .bottom_wrap{position: relative;margin-bottom: 25px;margin-top: 0px; }
.left_wrap .bottom_wrap .add_epki{font-size:13px; color:#6964ff;text-decoration: underline;position: relative;padding-right: 14px;}
.left_wrap .bottom_wrap .add_epki:before, .left_wrap .bottom_wrap .add_epki:after, .msg-loading .close:before, .msg-loading .close:after {content: '';width: 9px;height: 2px;background: #6964ff; position:absolute;right: 0;top: 2px;bottom: 0;margin: auto;}
.left_wrap .bottom_wrap .add_epki:after{ transform: rotate(90deg);}
.right_wrap .bottom_wrap .no_loading{font-size:12px;color: #999;display: inline-flex;}
.right_wrap .bottom_wrap .no_loading > b{color:#555;}
.right_wrap .bottom_wrap .no_loading > a{font-size: 11px;text-align: center;color: #fff;background: #6963ff;width: 16px;height: 16px;display: inline-block;border-radius: 100px;margin-left: 6px;font-family:  arial;padding-right: 1px;box-sizing: border-box;line-height: 16px;}
.right_wrap{padding: 60px 30px 0;width: 60%;background: #efeefe;border-radius: 0 30px 30px 0;}
.right_wrap h2{ font-size: 36px; text-transform: uppercase; text-align: center; color: #21258a; margin-bottom: 20px;  background: linear-gradient(to right, #639dff, #21258a); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.right_wrap h2:after { content: '!'; font-weight: normal;}
.right_wrap p{font-size: 12px;text-align: center;color: #888;line-height: 20px;word-break: keep-all;}
.right_wrap p b { color: #333;}
.right_wrap p strong { color: #6963ff;}
/*
.btn_wrap{display: flex;margin-top: 40px;}
*/
.btn_wrap{display: flex;margin-top: 40px;flex-direction: row-reverse;}
.btn_wrap a{flex: 1;}
.add_epki{background: #2f3093;margin-right:15px;width: 100%;display: block;height: 50px;line-height: 50px;color: #fff;font-size: 15px;font-weight: bold;border-radius: 100px;text-align: center;box-shadow: 0px 3px 6px rgba(45, 48, 145, 0.3);}
.btn_login{background: #6963ff;width: 100%;display: block;height: 50px;line-height: 53px;color: #fff;font-size: 15px;font-weight: bold;border-radius: 100px;text-align: center;box-shadow: 0px 3px 6px rgba(45, 48, 145, 0.3);}
.add_epki:hover{color: #fff; text-decoration: none; background: #232487;}
.btn_login:hover{color: #fff; text-decoration: none; background: #5c55f9;}
.right_wrap .bottom_wrap{text-align: right;}
.msg-loading{position: absolute;top: 100%;width: calc(100% - 30px);background: #2c2f90;padding: 18px 20px;margin: auto;margin-top: 12px;word-break: keep-all;color: #a6a4d9;border-radius: 6px;line-height: 18px;transform: scaleY(0);opacity: 0;transition: .2s ease;transform-origin: top;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);left: calc(50% + 8px);text-align: left;}
.msg-loading.on {opacity: 1;transform: scaleY(1);}
.msg-loading:before {content: '';position: absolute;width: 15px;height: 15px;right: 0;top: -3px;background: #2c2f90;transform: rotate(45deg);left: 0;margin: auto;}
.msg-loading a{ color: #fff; text-decoration: underline;}
.msg-loading .close{ text-indent: -99999px; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: none; cursor: pointer;}
.msg-loading .close:before{transform: rotate(-45deg);}
.msg-loading .close:after{transform: rotate(45deg);}
.msg-loading .close:before,.msg-loading .close:after{ left: 0; width: 10px; height: 1px; background: #a6a4d9;}

.footer{width: 100%;margin-top: 40px;padding: 0 37px;color: #fff;font-size: 13px;text-align: center;}
.footer ul{width: 100%;}
.footer ul li{display:inline-block;width: 33%;}
.footer p{margin-top: 15px;}


.pop_login_box .top{ padding: 30px 30px 40px;text-align: center; position: relative; z-index: 1; margin-bottom: 30px;}
.pop_login_box .top:after { content: ''; position: absolute; width: calc(100% + 100px); height: 100%; top: 0; left: -50px; z-index: -1; border-radius: 0 0 100% 100%; background: #2d2f92; box-shadow: 0 5px 10px rgba(125, 128, 194, 0.5);}
.pop_login_box .top h2{font-size:18px;color: #fff;margin-bottom: 10px;}
.pop_login_box .top p{font-size: 12px;color: #9494cb;line-height: 18px;}
.input_wrap{padding: 0 40px;}
.input_wrap  > div{position:relative;}
.input_wrap label{width: 24px; height: 24px; font-size: 0; position: absolute; left: 20px; top: 0; bottom: 0;opacity: 0.6; margin: auto;}
.input_wrap input:focus + label{opacity: 1;}
.input_wrap .id label{ background: url(../images/login/id_ic.svg) no-repeat left center; background-size: 24px;}
.input_wrap .pw label{ background: url(../images/login/pw_ic.svg) no-repeat left center; background-size: 22px;}
.input_wrap input{display: block;width: 100%;height: 50px;line-height: 50px;border: 1px solid #aca9ff; font-family:'Roboto'; letter-spacing:1px; border-radius: 30px;outline:0;padding-left: 60px !important;background: #fff !important;}
.input_wrap input:focus{border-width:2px; border-color:#6963ff}
.input_wrap input[type ="text"]{margin-bottom: 20px;padding: 10px;font-size: 15px;}
.input_wrap input[type ="password"]{margin-bottom: 20px;padding: 10px;font-size: 15px;}



.btn_login2{background: #385fe5;width: 75%;display: block;height: 77px;line-height: 77px;color: #fff;font-size: 30px;font-weight: bold;border-radius: 100px;text-align: center;box-shadow: 0px 3px 6px rgba(45, 48, 145, 0.3);margin:0 auto;}
.btn_login2:hover{color: #fff; text-decoration: none; background: #5c55f9;}
.add_epki2{background: #2f3093;margin-right:15px;width: 100%;display: block;height: 50px;line-height: 50px;color: #fff;font-size: 15px;font-weight: bold;border-radius: 100px;text-align: center;box-shadow: 0px 3px 6px rgba(45, 48, 145, 0.3);}
/* 반응형 임시작업 */
@media screen and (max-width: 1170px) {
    .msg-loading{ right: -10px; left: auto; width: calc(100% + 15px);}
    .msg-loading:before{ left: auto; right: 10px;}
}
@media screen and (max-width: 640px) {
    body.login{overflow-y: scroll;}
    body.login .login_wrap{position: static;transform: translate(0);width: 100%; max-width:none;padding: 10px;}
    .logo h1{display: inline-block;padding-left: 20px;margin-bottom: 10px;}
    .login_box{display: block;}
    .login_box > div{ width: 100%;}
    .login_box .left_wrap{height: 220px;border-radius: 30px 30px 0 0;box-shadow: 0px 6px 20px rgba(125, 128, 194, 0.3);}
    .left_wrap .img_login{background-size: 220px;max-width: 100%;}
    .right_wrap{padding-top: 40px;padding-bottom: 20px;padding: 40px 30px 20px;border-radius: 0 0 30px 30px;}
    .btn_wrap{ margin-top: 30px;}
    .right_wrap .bottom_wrap{ margin-bottom: 0; margin-top: 35px;right: 0;}


    .footer{width: 100%;margin-top: 20px;padding: 0px;color: #fff;font-size: 12px;text-align: center;}
    .footer ul li{display:block;width: 100%;}
}