@charset "UTF-8";
html,body{height:100%}
body{background:#ffffff}
.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 #279E77; text-align:center; line-height:40px; color:#279E77; 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:2px; 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: #279E77; margin-right:5px}
.formWrap .chk-box .find-idpw a{color:#777777}
.formWrap .btn-full{display:block; height:40px; width:100%; border-radius:20px; background:#279E77; border:0; line-height:40px; margin-top:40px; color:#ffffff; padding:0 }
.formWrap .btn-link{color:#279E77; 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/ygpa/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:#279E77; flex-shrink:0; margin-left:10px; border-radius:6px; color:#ffffff}

.login_tabNav { display: flex; flex-wrap: nowrap; margin-bottom:40px } 
.login_tabNav button {position:relative; flex-grow: 1; width: 100%; height: 40px; margin-left: -1px; border: 1px solid #EFEFEF; border-bottom: 1px solid #279E77; text-align: center; background: #ffffff; color: #222222}
.login_tabNav button:hover, .login_tabNav button:focus,.login_tabNav button.active { color: #ffffff; background: #279E77}
.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;
}
.idBox {display: flex; justify-content: center;}
.idBox > input {margin-right: 10px;}

#cmpnyNmDirect { height: 40px; width: 100% }

#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: #279E77; 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}



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

/* 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: 400px
	}
	
	.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: 300px }
	.loginContainer, .joinContainer, .searchContainer, .resultContainer, .agreeContainer {height: auto}
	.formWrap { flex-direction: column; width: 300px; 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: 300px
	}
	.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%}
}