@charset "utf-8";

body {
	background-color: #fff;
}

.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
    align-items: center;
    background: url('../../../../images/egovframework/com/uat/uia/login_bg.png') no-repeat bottom / 100%;
    justify-content: center;
}

.userTitle {
    font-size: 2rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 40px;
}

.userTitle > img {
	width: 180px;
    margin-right: 10px;
}

.formWrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

h2 {
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.formLabel {
	display: none;
}

.idSaveText {
	display: flex;
	align-item: center;
	font-size: .9rem;
	margin: 10px 0px 20px;
}

.idSaveText > input[type=checkbox] {
	margin-right: 10px;
}

#loginForm, #idSearchForm {
	padding: 40px 80px;
	border-right: 1px solid #efefef;
	background-color: #F5FAFF;
}

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

.formWrap > form input[type=text], .onepassLogin input[type=text], .formWrap > form input[type=email], .formWrap > form input[type=password], .companyField select {
	width: 400px;
	border-radius: 5px;
	height: 40px;
    font-size: .825rem;
}

#loginForm fieldset, #idSearchForm fieldset, #pwResetForm fieldset {
	margin-bottom: 20px;
}

#joinForm fieldset {
	margin-bottom: 40px;
	position: relative;
}

fieldset:last-child {
	margin-bottom: 0px;
}

.idField, .nameField, .companyField {
	display: flex;
	justify-content: space-between;
}

.idField > input, .nameField > input, .companyField > input {
	width: 340px !important;
}

#joinForm > button, #idSearchForm button, #pwResetForm > button {
	width: 400px;
	height: 40px;
	border-radius: 2px;
}

#loginForm button { width: calc(200px - 5px); height: 40px; border-radius: 2px }
.upaBtn { background: linear-gradient(94.01deg, #138ABC 0%, #183494 100%); color: #FFF; font-size: .875rem; cursor: pointer; transition: all .2s; border: 2px solid transparent }
.upaBtn:hover { background: #FFF; color: #183494; background: linear-gradient(0deg, #fff 0%, #fff 100%) padding-box, linear-gradient(270deg, #138ABC 0%, #183494 100%) border-box }

.onepassInfoText {
	margin-bottom: 20px;
	font-size: 1rem;
	color: #727272;
}

.onepassBtn {
	width: 400px;
	height: 40px;
	border-radius: 5px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
	background: url('../../../../images/upa/com/cmm/btn_onepass_default.png') no-repeat center / cover;
}

.signFnid {
	font-size: .825rem;
	color: #727272;
	margin-top: 10px;
}

.signFnid a, .loginText {
	color: #727272;
}

.signFnid > span:hover, .loginText:hover {
	text-decoration: underline;
	cursor: pointer;
}

.loginText {display: inline-block; margin-top: 10px; width: 100%; text-align: center}

.idConfirm, .nameConfirm, .comSearch {
	padding: 5px;
	font-size: .825rem;
}

.pwText  {
	color: #e70000;
	position: absolute;
	top: 45px;
	left: 5px;
}

.pwText2  {
	color: #e70000;
	position: absolute;
	top: 45px;
	left: 5px;
	display: none;
}

.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;}

.modalPwField {position: relative;}
.modalPwField input {width: 100%; height: 40px}

.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;}

.resultWrap > p {font-size: 1.125rem;}
.resultWrap > button {width: 300px; height: 40px; margin-top: 20px}

#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: #007BF5; margin-top: -2px }
#agreeForm > div:not(.btnWrap) {display: flex; flex-direction: column}
#subscriptionBox, #personalInfoBox {padding: 20px; background-color: #efefef;}
.agreeBox {display: block; text-align: center;}
.allAgree {padding: 10px; text-align: center; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 10px;}
.privacyPolicy {width: 25%; min-width: 210px}


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

/* 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, #joinForm > button, #idSearchForm button, #pwResetForm > button {		
		width: 300px
	}
	
	#loginForm button {
		width: calc(150px - 5px)
	}
	
	.idField > input, .nameField > input, .companyField > input {
		width: 240px !important
	}
	
	.agreeContainer > .userTitle {margin-bottom: 20px}
	#agreeForm { min-width: 0; width: 100% }
	.onepassBtn {
		width: 300px;
		background: url('../../../../images/upa/com/cmm/btn_onepass_300.png') no-repeat center / cover;	
	}
}


/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
	.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {height: auto}
	.formWrap { flex-direction: column; width: 560px }
	#loginForm, #idSearchForm { border-right: none; border-bottom: 1px solid #EFEFEF }
	.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: 460px }
	#loginForm, #idSearchForm { border-right: none; border-bottom: 1px solid #EFEFEF }
	.formWrap > form input[type=text], .onepassLogin input[type=text], .formWrap > form input[type=email], .formWrap > form input[type=password], .companyField select, #joinForm > button, #idSearchForm button, #pwResetForm > button {		
		width: 300px
	}
	
	#loginForm button {
		width: calc(150px - 5px)
	}
	.idField > input, .nameField > input, .companyField > input { width: 240px !important }
	.signFnid { text-align: center }
	.onepassBtn {
		width: 300px;
		background: url('../../../../images/upa/com/cmm/btn_onepass_300.png') no-repeat center / cover;	
	}
	#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) {
	.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {height: auto}
	.formWrap { flex-direction: column; width: 350px }
	#loginForm, #idSearchForm { border-right: none; border-bottom: 1px solid #EFEFEF; padding: 20px 40px }
	#joinForm, .onepassLogin, #pwResetForm, .resultWrap, #agreeForm { padding: 20px 40px }
	.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: 270px
	}
	.idField > input, .nameField > input, .companyField > input { width: 240px !important }
	.signFnid { text-align: center }
	.onepassBtn {
		width: 270px;
		background: url('../../../../images/upa/com/cmm/btn_onepass_270.png') no-repeat center / cover;	
	}
	.onepassInfoText {font-size: .8rem}
	#idSearchForm > .signFnid { display: none }
	
	.userTitle { font-size: 1.2rem; margin-top: 20px; margin-bottom: 20px }
	.userTitle > img { width: 100px }
	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%}
}