@import url("common.css");

body {background: #edf2f8}

.loginWrap {
    border-bottom:2px solid #caced3;
    font-size:0;
    margin-bottom:150px;
    width: 864px;
    margin:0 auto;
    margin-top: 155px;
    margin-bottom:170px;
}
.loginWrap::after {content:""; clear:both; display:block}
.logo {margin-bottom:22px; display:block}
/* leftCont */
.leftCont {
    width:440px;
    padding:50px;
    box-sizing: border-box;
    background:white;
    display:inline-block;
    min-height:453px;
    float:left;
}
.loginTit {font-size:0;width: 360px}
.loginTit span.login-tit {
    display:inline-block;
	font-size:53px;
	letter-spacing:-.05em;
	line-height:1;
	vertical-align:middle;
	color:#087EB4;
	font-weight:500
}
.loginTit span.login-txt {
    display:inline-block;
    font-weight:400;
    color:#242424;
    vertical-align:middle;
    margin-left:15px;
    font-size:16px;
}
.loginTit span strong {
    font-size:16px; color:#b3005b; font-weight:500;
}

.tabWrap {overflow:hidden; /*argin-top:30px*/ margin-top:25px}
.tabWrap li {
    float:left; width:50%; height:50px;
    box-sizing:border-box; text-align:center;
}
.tabWrap li a {position:relative;box-sizing:border-box; display:block; height:100%; border:1px solid #087EB4; text-align:center; transition:0.3s}
.tabWrap li a:before {content:'';display:inline-block;vertical-align:middle;width:0;height:100%}
.tabWrap li a:after {content:"";display:none;position:absolute;box-sizing:border-box;width:100%;height:100%;left:0;top:0;border:3px solid rgba(59, 153, 252, .5);z-index:1}
.tabWrap li a span {display:inline-block;vertical-align:middle;max-width:95%;color:#087EB4;font-size:16px;font-weight:bold;}
.tabWrap li.on {background:#087EB4}
.tabWrap li.on a span {color:white}
.tabWrap li a:focus:after {display:block}

.tabCont {display:none}
.tabCont.on {display:block; margin-top:20px}

input[type="text"], input[type="password"] {
    width:100%;
    height:45px;
    padding-left: 30px;
    margin-bottom:5px;
    box-sizing:border-box;
    border-bottom:1px solid #d2d2d2;
}
.id{background:url(../images/login/person.png) no-repeat left 4px center}
.ps{background:url(../images/login/lock.png) no-repeat left 4px center}
input[type="password"] {margin-bottom:15px}
input[type="checkbox"] + label {cursor:pointer}
#saveID:focus {outline:rgb(59, 153, 252) solid 3px}
/*.saveIdWr input[type="checkbox"]:focus + label {outline:rgb(59, 153, 252) solid 3px}*/

.login {
    background:#087EB4;
    display:block;
    text-align:center;
    height:55px;
    line-height:55px;
    margin-top:20px;
}
.login span {color:white; font-size:20px; font-weight:700}

.login:focus {outline:3px solid rgba(0,0,0,.8)}

/* leftCont//*/
/* rightCont */
.rightCont {
    width: 424px;
    display:inline-block;
    background:#094b9f;
    box-sizing:border-box;
    padding: 38px 50px;
    min-height:489px;
    float: right;
}
.rightCont > p {font-size:18px; color:white}
.rightCont h1 {
    color:white;
    font-size:45px;
    font-weight:300;
    display: inline-block;
    /* margin-top:6px; */
}
.rightCont h1 strong{color:white; font-size:45px; font-weight:700}
.rightCont ul li {margin-top: 12px}
.rightCont ul li img {margin-right:10px}
.rightCont ul li p {
    display:inline-block;
    vertical-align:middle;
    color:white;
    font-size:13px;
    /* width: 226px; */
    line-height:22px;
}
.rightCont ul li p span {font-size:20px; color:white; font-weight:bold}

.loginWrap {position:relative}
.loginWrap .slogan {position:absolute; top:-61px; right:-9px}
.loginWrap:focus {outline:3px solid rgba(59,153,252,.5)}

.change {margin-top:14px}
.change a {display:inline-block}
.change a:hover,
.change a:focus {text-decoration:underline}
.reset {margin-left:6px}

@media screen and (max-width: 1192px) {
    .loginWrap {width:440px; margin-top:52px}
    .rightCont {width:100%}
	.loginWrap{position:relative}
	.logo{margin:0 auto 36px auto;}
	.loginWrap .sloganArea{width:100%;height: auto;text-align: center; margin-bottom:40px}
	.loginWrap .slogan{position: static}

}

@media screen and (max-width: 440px) {
    .loginWrap, .leftCont, .rightcont {width:100%}
    .logo {margin:0 auto; margin-bottom:22px}
    .loginTit {text-align:center; width:100%}
    .loginTit img {margin-bottom: 26px}
    .loginTit span {line-height:1.6;display:inline-block;width:100%;margin-left: 0}

    .rightCont ul li img {display:block; margin: 0 auto}
    .rightCont ul li p {text-align:center; display:block; margin-top:10px}
	.loginWrap {margin-bottom:120px}

}

/* 20220727 박지예 추가 */
.popup_wrap{position:fixed; top:0; left:0; width:100%; height:100%;}
.popup_wrap .pop_bg{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.popup_wrap .popup{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:30px; box-sizing: border-box;}
.popup_wrap .popup .btn_pop_close{position:absolute; top:32px; right:35px;}
.popup h1 {font-size:20px; font-weight:bold; margin-bottom:20px; color:#000}
.pop_cont .info{background-color:#edf2f8; padding:20px; box-sizing:border-box; font-size:14px; line-height:20px;}
.pop_cont .info b{color:#2ca8e2;}

/* 20220728 박지예 추가 */
.loginWrap{margin-bottom:0;}
.remoteBtn{ text-align:right; width:864px; margin:0 auto; margin-bottom:120px; margin-top:20px;}
.remoteBtn:after{display:block; content:''; clear:both;}
.remoteBtn a{display:inline-block; padding:6px 10px; border:1px solid #bbb;}
.remoteBtn a span{display:inline-block;background-size:40px;line-height:20px;font-size:15px;display: block;font-size: 17px;color: red;}
.remoteBtn a span em{display: block;font-size: 17px;color: red;padding: 0 30px 0 0;right: 50px;align-self: bold;}
/*
.remoteBtn a span{display:inline-block; background:url(../images/login/browsers.png) no-repeat left center; background-size:40px; line-height:20px; font-size:15px; padding-left:50px;}
.remoteBtn a span em{display:block; font-size:20px; color:#094b9f; font-weight:bold;}
*/
@media screen and (max-width: 1192px) {
    .remoteBtn{width:440px;}
}
@media screen and (max-width: 440px) {
    .remoteBtn{width:100%;}
}