@charset "UTF-8";
html,body{height:100%}
body{background:#ffffff}
.loginContainer {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
    align-items: center;
    background: url(../../images/opendata/loginBg.png) no-repeat center;
    justify-content: center;
}

.loginContWrap { min-width: 500px; border: 2px solid #1e429b; background: #fff; padding: 40px 30px; text-align: center; border-radius: 7px; }

.userTitle {
    font-size: 2rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 40px;
}
.userTitle > img {
	width: 180px;
    margin-right: 10px;
}
.userTitle span { position: relative; font-size: 2.3rem; font-weight: 600; margin-left: 35px; color: #1e429b; letter-spacing: -2px; }
.userTitle span::before { content:""; position: absolute; left: -23px; top: 50%; transform: translate(0%, -50%); width: 2px; height: 27px; background: #000; }

.memberWrap, .agreeWrap{position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100%; flex-wrap:wrap}
.memberContainer{width:400px; height:auto; padding:20px 0}
.agreeContainer{height:auto; padding:20px 0}
.userTitle {margin-bottom: 40px; text-align:center}
.userTitle > img {width: 200px}
.pTlt{height:40px; border-bottom:1px solid #006EDB; text-align:center; line-height:40px; color:#006EDB; margin-bottom:40px; font-size:1rem}

.formWrap { display: block; width: 100%; }
.formWrap form, .formWrap fieldset {width:100%;}
.formWrap ul li{position: relative;}
.formWrap ul li input[type="text"], .formWrap ul li input[type="password"]{border:1px solid #aaaa; width:100%; height:40px; line-height:40px; box-sizing:border-box; padding:0 15px; border-radius:7px; font-size:.875rem}
.formWrap .chk-box{margin-top:10px; display:flex; justify-content:space-between; font-size:12px}
.formWrap .chk-box input[type="checkbox"]{accent-color: #006EDB; margin-right:5px}
.formWrap .chk-box .find-idpw a{color:#777777}
.formWrap .btn-full{display:block; height:40px; width:100%; border-radius:2px; background:#0c3c6e; border:0; line-height:40px; margin-top:40px; color:#ffffff; padding:0; border-radius: 7px; }
.formWrap .btn-link{color:#006EDB; margin:10px 0; height:40px; line-height:40px; display:inline-block; font-size: 14px}
.formWrap .btn-full.btn-dgt{border-radius:5px; background:url(../../../../images/upa/com/cmm/onepass-bi.png) no-repeat 10px 50% #1C2674;  background-size: 40px 40px;}
.formWrap .btn-link.btn-dgt{color:#1C2674}
.formWrap ul li.button-type{display:flex;}
.formWrap ul li.button-type input{flex-grow:1}
.formWrap ul li.button-type button{width:70px; height:40px; background:#006EDB; flex-shrink:0; margin-left:10px; border-radius:6px; color:#ffffff}

.login_tabNav { display: flex; flex-wrap: nowrap; margin-bottom:40px; width: 450px } 
.login_tabNav button {position:relative; flex-grow: 1; width: 100%; height: 40px; margin-left: -1px; border: 1px solid #EFEFEF; border-bottom: 1px solid #006EDB; text-align: center; background: #ffffff; color: #222222}
.login_tabNav button:hover, .login_tabNav button:focus,.login_tabNav button.active { color: #ffffff; background: #006EDB}
.login_tabNav button:hover:before, .tabNav button:focus:before,.tabNav button.active:before {width:100%}
.pwlabel {display: block;}
.pwShowHide {position: absolute; top: 0px; right: 0px; width: 40px; height: 40px; border-top-right-radius: 5px; border-bottom-right-radius: 5px}
.pwShowHide:hover {background-color: #d7d7d7}
.pwShowHide > img {width: 22px; height: 22px; vertical-align: middle;}

.show-password{position:absolute; right:10px; width:25px; height:25px; top:7px; background:url(../../../../images/ygpa/com/cmm/icon-eye.png); background-size: 25px 25px; cursor:pointer}
.show-password.eye-slash{background:url(../../../../images/ygpa/com/cmm/icon-eye-slash.png);  background-size: 25px 25px;}

/* #joinForm, .onepassLogin, #pwResetForm, .resultWrap, #agreeForm {
	background-color: #F5FAFF;
	padding: 40px 80px;
} */

.idConfirm, .nameConfirm, .comSearch {
	padding: 5px;
	font-size: .825rem;
}
.idConfirm-container {text-align: center; padding: 20px;}
.idConfirm-container h2 {font-size: 1.25rem; text-align: left;}
.idBox {display: flex; justify-content: center;}
.idBox > input {margin-right: 10px;}
.idConfirm-container > button {font-size: .925rem; width: 65px; height: 30px;}

#agreeForm {min-width: 1200px}
#agreeForm h3 {font-size: 1.25rem;}
#agreeForm h3 > span {font-size: 1rem;}
#agreeForm h3:before {content: ""; display: inline-block; width: 4px; height: 15px; background-color: #006EDB; margin: 4px 4px 0 0 }
#agreeForm > div:not(.btnWrap) {display: flex; flex-direction: column}
#subscriptionBox, #personalInfoBox {padding: 20px; background-color: #efefef; font-size:.875rem; line-height:1.4}
.agreeBox {display: flex; align-items:center; justify-content:center}
.agreeBox input[type="checkbox"]{margin-right:3px}
.allAgree {padding: 10px; text-align: center; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 10px;}
.allAgree label{display: flex; align-items:center; justify-content:center;}
.allAgree label input[type="checkbox"]{margin-right:3px}
.privacyPolicy {width: 25%; min-width: 210px}
#clearLock .modal-content {width:450px}
#checkIdForm{margin-top : 20px}

#clearLock .t_bold3 { line-height: 1.3rem }
#clearLock input[type="text"] { width: 85% }

/* 
------------------- 반응형 -------------------

PC , 테블릿 가로 (해상도 1024px ~ 1200px)
@media all and (min-width:1024px) and (max-width: 1200px) {
	.formWrap > form input[type=text], .onepassLogin input[type=text], .formWrap > form input[type=email], .formWrap > form input[type=password], .companyField select, #loginForm button, #joinForm > button, #idSearchForm button, #pwResetForm > button {		
		width: 450px
	}
	
	.agreeContainer > .userTitle {margin-bottom: 20px}
	#agreeForm { min-width: 0; width: 100% }
}

테블릿 가로 (해상도 768px ~ 1023px)
@media all and (min-width:768px) and (max-width:1023px) {
	.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {height: auto}
	.formWrap { flex-direction: column; width: 400px }
	.signFnid { text-align: center }
	.onepassBtn { width: 100% }
	#idSearchForm > .signFnid { display: none }
	
	.userTitle { font-size: 1.5rem; margin-top: 20px; margin-bottom: 20px }
	.userTitle > img { width: 130px }
	#agreeForm { min-width: 0; width: 100% }
}

모바일 가로, 테블릿 세로 (해상도 480px ~ 767px) 
@media all and (min-width:480px) and (max-width:767px) {
	.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {height: auto}
	.formWrap { flex-direction: column; width: 400px }
	.formWrap > form input[type=text], .onepassLogin input[type=text], .formWrap > form input[type=email], .formWrap > form input[type=password], .companyField select, #loginForm button, #joinForm > button, #idSearchForm button, #pwResetForm > button {		
		width: 400px
	}
	.idField > input, .nameField > input, .companyField > input { width: 240px !important }
	.signFnid { text-align: center }
	#idSearchForm > .signFnid { display: none }
	
	.userTitle { font-size: 1.5rem; margin-top: 20px; margin-bottom: 20px }
	.userTitle > img { width: 130px }
	#agreeForm { min-width: 0; width: 100%; padding: 40px 40px }
}

모바일  세로 (해상도 ~ 479px)
@media all and (max-width:479px) {
	.memberContainer { width: 350px }
	.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {height: auto}
	.formWrap { flex-direction: column; width: 350px; display:block }
	.formWrap > form input[type=text], .onepassLogin input[type=text], .formWrap > form input[type=email], .formWrap > form input[type=password], .companyField select, #loginForm button, #joinForm > button, #idSearchForm button, #pwResetForm > button {		
		width: 350px
	}
	.idField > input, .nameField > input, .companyField > input { width: 240px !important }
	.signFnid { text-align: center }
	.onepassInfoText {font-size: .8rem}
	#idSearchForm > .signFnid { display: none }
	
	.userTitle { font-size: 1.2rem; margin-top: 20px; margin-bottom: 20px }
	.userTitle > img { width: 150px }
	h2 {font-size: 1.125rem}
	#agreeForm { min-width: 0; width: 100%; padding: 40px 40px }
	#agreeForm h3 {font-size: 1rem}
	#agreeForm h3 > span {font-size: .9rem; word-break: keep-all; }
	.privacyPolicy {width: 100%}
	.login_tabNav { width: 350px }
}
 */