@CHARSET "UTF-8";
@import url("./font.css");

/* CSS Document */

/* ------------------------------------------------------------
 * Name      : login.css
 * Desc       :한국환경공단
 * Created   : 2023/02/27 by NRI
 * Updated   :
------------------------------------------------------------ */

/* common */
*{margin:0;padding:0}
html,body{width:100%;height:100%} 
body{font-family:"Noto Sans KR",Noto Sans,Noto Sans KR,sans-serif;color:#333;font-size:13px;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body,p,h1,h2,h3,h4,h5,h6,menu,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button{margin:0;padding:0}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption{display:block}
img, video{max-width:100%;height:auto}
img,fieldset{border:0}
img{vertical-align:middle}
menu,ul,ol{list-style:none}
em,address{font-style:normal}
a,a:link{color:#4b4b4b;text-decoration:none}
a:hover,a:active,a:focus{color:#2b3443;text-decoration:none}
textarea{overflow:auto}
strong{font-family: 'Noto Sans KR'}
option,x:-moz-any-link{padding-right:6px}
option,x:-moz-any-link,x:default{padding-right:0}
input, textarea, select, label{vertical-align:middle;letter-spacing:-1px}
input[type="text"], input[type="password"], textarea, select{font-weight:500;text-indent:20px; font-family:"Noto Sans KR", sans-serif;font-size:15px;color:black}
input[type="file"]{font-family:Noto Sans KR, sans-serif}
textarea{line-height:1.8}
legend, caption, .blind{visibility:hidden;overflow:hidden;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
button,label{cursor:pointer}
button::-moz-focus-inner{padding:0}
hr{display:none}
table{border-spacing:0;border-collapse:collapse}
select,textarea,button{vertical-align:middle}
input{height:19px;vertical-align:middle}
button{border:0 none;font-family:"Noto Sans KR";background-color:transparent;cursor:pointer}
.checkbox{width:14px;height:14px;margin-bottom:2px;vertical-align:middle;border-width:0}
html:first-child select{padding-right:6px;height:20px} /* Opera 9 & Below Fix */
option{padding-right:6px} /* Firefox Fix */
.blind{visibility:hidden!important;overflow:hidden!important;position:absolute!important;width:0!important;height:0!important;font-size:0!important;line-height:0!important;color:transparent!important;background-color:transparent!important}
span{vertical-align:0}
.floatR{float:right}
.txt_center{text-align:center}
.txt_left{text-align:left}
.txt_right{text-align:right}

/* 건너뛰기 */
#skipnavi a{width:100%;position:absolute;display:block;left:0;top:-10000px;background:#2c7bbb;color:#fff;font-weight:600;font-size:11px;text-align:center;z-index:2100;}
#skipnavi a:hover, #skipnavi a:focus, #skipnavi a:active{position:absolute;display:block;top:0;left:0;width:100%;padding:5px 0;background:#2c7bbb;color:#fff;}

/* placholder */
.int_login::-webkit-input-placeholder {
	color: #757575
}

::-webkit-input-placeholder,
.int_login::-webkit-input-placeholder {
	color: #757575
}

::-moz-placeholder {
	color: #757575
}

/* firefox 19+ */
input.int_login:-ms-input-placeholder,
input.int_num:-ms-input-placeholder {
	color: #757575
}

/* ie */
input:-moz-placeholder {
	color: #757575
}

/*체크박스*/
input[type="checkbox"] {
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	border: 1px solid #999;
	appearance: none;
	cursor: pointer;
	transition: background 0.2s;
	margin-right: 5px;
	vertical-align: middle;
	margin-top:5px;

}

input[type="checkbox"]:checked {
	background: #27a3a9 url("/eXPortal/keco/images/check.png") center;
	background-repeat: no-repeat;
	border: none;
}

/*라디오박스*/
.radio {
	margin: 0.5rem;

}

.radio input[type=radio] {
	position: absolute;
	opacity: 0;
}

.radio input[type=radio] + .radio-label:before {
	content: "";
	background: #f4f4f4;
	border-radius: 100%;
	border: 1px solid #b4b4b4;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	position: relative;
	top: -0.2em;
	margin-right: 5px;
	vertical-align: middle;
	cursor: pointer;
	text-align: center;
	transition: all 250ms ease;
	margin-top:5px;

}

.radio input[type=radio]:checked + .radio-label:before {
	background-color: #27a3a9;
	box-shadow: inset 0 0 0 4px #f4f4f4;
}

.radio input[type=radio]:focus + .radio-label:before {
	outline: none;
	border-color: #27a3a9;
}

.radio input[type=radio]:disabled + .radio-label:before {
	box-shadow: inset 0 0 0 4px #f4f4f4;
	border-color: #b4b4b4;
	background: #b4b4b4;
}

.radio input[type=radio] + .radio-label:empty:before {
	margin-right: 0;
}

/* login */
h1 {
	display: none
}
.bg_login {
	width: 100%;
	margin: 0 auto;
	height: 100vh;
	background: url("/eXPortal/keco/images/svy_bg.png")center center no-repeat;
	background-size: cover;
}

.bg_login .bg_img {
	position: relative;
	box-sizing: border-box;
	min-height: 920px;
}
.bg_login .content_login {
	position: relative;

}
.bg_login .bg_img:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: inherit;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	filter: blur(8px);
	z-index: 0;
	margin-left: -4px;
	overflow: hidden;
}

.text_img {
	display: flex;
	justify-content: center;
    height: 100vh;
    flex-wrap: nowrap;
    align-items: center;
}
.center_wrap {
	position: relative;
	height:100vh;
}
.center_wrap .logo{
	text-align:center;
}
.login {
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%,-50%);
	max-width:580px; max-height:630px;
	border-radius: 20px;
	background:#fff;
	padding:60px;
	box-shadow: 5px 5px 10px #554842;
}
.tit_area {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0px 0px 10px;
	border-bottom: 1px solid #a3a8b1
}

.tit_area h2 {
	font-size: 48px;
	color: #262626;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

.checkbox_box {
	display: flex;
	align-items: center;
	margin: 20px 0px 10px;
	justify-content: space-between;
}

.checkbox_box .checkbox_area label {
	font-weight: bold;
}

.checkbox_box .radio_button {
	display: flex;
	color: #222222 !important;
}



.row_group {
	margin-top: 5px
}

.join_row {
	width: 100%;
	height: 51px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 10px;
	border: 0;
	background: #f2f2f2;
	font-size: 15px;
	box-sizing: border-box;
	word-break: break-all;
	text-indent: 20px;
	z-index: 10;
	border-radius: 30px;
}

.join_row:first-child {
	margin-bottom: 19px
}

.hdn {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	overflow: hidden
}

.btn_area {
	margin: 20px auto 20px
}

.btn_login {
	position: relative;
	background: linear-gradient(260deg, rgba(75, 116, 164, 1) 0%, rgba(70, 173, 157, 1) 100%);
	width: 100%;
	height: 51px;
	line-height: 51px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	border: none;
	box-sizing: border-box;
	border-radius: 30px;
}

.btn_login:hover {
	background: linear-gradient(90deg, rgba(75, 116, 164, 1) 0%, rgba(70, 173, 157, 1) 100%);
	font-weight: bold;
}

.copyright{
	font-size:12px;
	color:#8e8e8e;
	text-align:center;
}


/*popup*/
@media (max-width:1343px) {
	.bg_login {
		margin-bottom: -130px;
	}
	.footer_wrap {
		height:130px;
	}
}

@media (max-width:1023px) {
	.bg_login {
		margin-bottom: -160px;
	}

	.footer_wrap {
		height: 160px;
		width: calc(100% - 500px);
	}

	.footer_area {
		width: 100%;
	}
	
	.bg_login .bg_img {
		width: calc(100% - 500px);
		height: auto;
		min-height:830px;
	}

	.bg_img .center_img {
		padding: 40px;
	}
	.pic_txt{
		font-size:14px;
		text-align: center;
		margin-top:-70px;
		word-break:break-all;
		right:10px;
	}

	.center_wrap {
		max-width: 100%;
		margin: 0 auto;
		
	}
	
	
}

@media only all and (max-width:768px) {
	body {
		min-width: 375px
	}

	.bg_login {
		min-height: 100%;
		margin-bottom:0px;
	}

	.content_login {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.center_wrap {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.checkbox_box .checkbox_area input{
		margin:0.5rem;
	}

	.join_row {
		width: 100%;
	}
	.login {
		height:auto;
		min-height:auto;
		padding:50px;
		width:350px;
		}

	.check {
		width: 100%;
	}

	
}