html, body{ height : 100%; }
.LOGIN-SECTION{
	display : flex;
	align-items : center;
	justify-content : center;
	height : 100%;
}
/*
#LOGIN-BANNER{
	display : inline-block;
	width : 480px;
	height : 571px;
	font-size : 0;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : top;
}
*/

#LOGIN-WRAPPER{
	width : 25rem;
	padding : 0;
	margin : 0;
}
#LOGIN-WRAPPER.GUEST{
	display : block;
	margin : 32px auto;
}
#LOGIN-WRAPPER > h1{
	padding : 0;
	margin : 0;
	font-family : 'NanumSquareNeo';
	font-weight : 500;
}
#LOGIN-WRAPPER > h1 > a{
	font-size : 2rem;
}
#LOGIN-WRAPPER > form{
	margin-top : 64px;
}
#LOGIN-WRAPPER > form > div{
	margin-bottom : 8px;
}
#LOGIN-WRAPPER > form > div > input{
	width : 380px;
	height : 50px;
	padding : 0 16px;
	border : solid 1px #CCC;
	color : #666;
	font-family : 'Dotum';
	font-weight : bold;
	font-size : 14px;
}
#LOGIN-WRAPPER > form > div > input::-webkit-input-placeholder{
	color : #BBB;
	font-weight : normal;
	font-size : 12px;
}
#LOGIN-WRAPPER > form > div > input:-ms-input-placeholder{
	color : #BBB;
	font-weight : normal;
	font-size : 12px;
}
#LOGIN-WRAPPER > form > div > button{
	width : 414px;
	height : 60px;
	background-color : var( --BASE-COLOR1 );
	border : 0;
	color : #FFF;
	font-family : 'Dotum';
	font-weight : bold;
	font-size : 14px;
	cursor : pointer
}
#LOGIN-WRAPPER > #LOG-OPTIONS{
	text-align : left;
}
#LOGIN-WRAPPER > #LOG-OPTIONS > span{
	display : inline-block;
	margin-right : 24px;
}
#LOGIN-WRAPPER > #LOG-OPTIONS > span > label{
	color : #333;
	font-size : 14px;
}
#LOGIN-WRAPPER > #LOG-OPTIONS > p.KEEP-ALERT{
	padding : 16px;
	background-color : #FFF6E9;
	border-radius : 4px;
	word-break : break-all;
	text-align : justify;
	font-size : 12px;
	opacity : 0;
	transition : opacity .25s ease-in-out;
}
#LOGIN-WRAPPER > #LOG-OPTIONS > p.KEEP-ALERT > strong{
	color : #06C;
}
#LOGIN-WRAPPER > #LOG-OPTIONS > p.KEEP-ALERT.SHOW{
	opacity : 1;
}
#LOGIN-WRAPPER > #MEMBER-OPTIONS{
	margin-top : 64px;
	text-align : center;
	font-size : 0;
}
#LOGIN-WRAPPER > #MEMBER-OPTIONS > a{
	margin : 0 16px;
	color : #666;
	font-size : 12px;
}
#LOGIN-WRAPPER > #MEMBER-OPTIONS > a:hover{
	text-decoration : underline;
}
#LOGIN-WRAPPER > #MEMBER-OPTIONS > i{
	color : #CCC;
	font-style : normal;
	font-size : 12px;
}

#ADMIN_FORCE{
	position : absolute;
	left : 0;
	bottom : 0;
	width : 12px;
	height : 12px;
	font-size : 0;
}

.GUEST-SECTION{
	width : 864px;
	margin : 128px auto;
	overflow : hidden;
}
.GUEST-SECTION > #GUEST-WRAPPER{
	float : left;
	width : 334px;
	height : 380px;
	padding : 32px;
	margin : 16px;
	border : solid 1px #EEE;
}
.GUEST-SECTION > #LOGIN-WRAPPER{
	float : right;
	width : 334px;
	height : 380px;
	margin : 16px;
}
.GUEST-SECTION > #GUEST-WRAPPER > h1,
.GUEST-SECTION > #LOGIN-WRAPPER > h1{
	height : auto;
	padding : 0;
	margin : 0;
	background-image : none;
	font-family : 'Noto Sans KR';
	font-weight : 500;
	font-size : 20px;
}
.GUEST-SECTION > #GUEST-WRAPPER > form,
.GUEST-SECTION > #LOGIN-WRAPPER > form{
	margin-top : 32px;
}
.GUEST-SECTION > #GUEST-WRAPPER > form > div,
.GUEST-SECTION > #LOGIN-WRAPPER > form > div{
	margin-bottom : 8px;
}
.GUEST-SECTION > #GUEST-WRAPPER > form > div > input,
.GUEST-SECTION > #LOGIN-WRAPPER > form > div > input{
	width : 100%;
	height : 50px;
	padding : 0 16px;
	border : solid 1px #CCC;
	color : #666;
	font-weight : bold;
	font-size : 14px;
	box-sizing : border-box;
}
.GUEST-SECTION > #GUEST-WRAPPER > form > div > input::-webkit-input-placeholder,
.GUEST-SECTION > #LOGIN-WRAPPER > form > div > input::-webkit-input-placeholder{
	color : #BBB;
	font-weight : normal;
	font-size : 12px;	
}
.GUEST-SECTION > #GUEST-WRAPPER > form > div > button,
.GUEST-SECTION > #LOGIN-WRAPPER > form > div > button{
	width : 100%;
	height : 50px;
	background-color : #1974B7;
	border : 0;
	color : #FFF;
	font-weight : bold;
	font-size : 14px;
	cursor : pointer
}
.GUEST-SECTION > #LOGIN-WRAPPER > #MEMBER-OPTIONS{
	margin-top : 16px;
}






header{
	height : 70px;
	padding : 0;
	background-color : #FFF;
	border-bottom : solid 1px #DDD;
	text-align : center;
	font-size : 0;
}
header > #MAIN-LOGO{
	display : inline-block;
	width : 270px;
	height : 50px;
	margin : 10px 0;
	background-image : url("/images/logo-join.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	font-size : 0;
}

h1{
	padding : 0;
	margin : 48px 0;
	text-align : center;
	color : #333;
	font-family : 'Nanum Gothic';
	font-weight : 600;
	font-size : 24px;
}

#JOIN-STEP1-FORM{
	width : 768px;
	margin : 64px auto;
}
#JOIN-STEP1-FORM > div{
	margin-bottom : 16px;
}
#JOIN-STEP1-FORM > div > div.DOCUMENT{
	height : 206px;
	padding : 16px;
	border : solid 1px #CCC;
	overflow : auto;
}
#JOIN-STEP1-FORM > div > div.DOCUMENT > h1{
	text-align : left;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX{
	width : 438px;
	height : 36px;
	margin : 8px auto;
	border : solid 1px #CCC;
	overflow : hidden;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > input{
	display : none;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > label{
	display : inline-block;
	width : 338px;
	height : 36px;
	color : #333;
	line-height : 36px;
	vertical-align : top;
	font-size : 13px;
	cursor : pointer;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > label:before{
	content : '';
	display : inline-block;
	width : 36px;
	height : 36px;
	padding : 0;
	margin : 0;
	margin-right : 8px;
	background-image : url("/images/icon-black-check.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 24px;
	border : 0;
	opacity : .25;
	vertical-align : top;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > input:checked + label:before{
	opacity : 1;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > a.MOREVIEW{
	float : right;
	width : 100px;
	height : 36px;
	color : #666;
	text-align : center;
	line-height : 36px;
	font-size : 12px;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > a.MOREVIEW:hover{
	color : #000;
}
#JOIN-STEP1-FORM > div > button#BTN-NEXT-STEP{
	display : block;
	width : 360px;
	height : 48px;
	margin : 64px auto;
	background-color : #155394;
	border : 0;
	color : #FFF;
	font-family : 'Noto Sans KR';
	font-weight : 400;
	font-size : 17px;
	cursor : pointer;
}

#JOIN-STEP2-FORM{
	width : 448px;
	margin : 64px auto;
}
#JOIN-STEP2-FORM > dl{
	padding : 0;
	margin : 0;
}
#JOIN-STEP2-FORM > dl > dt{
	padding : 0;
	margin : 16px 0 0 0;
	color : #666;
	font-family : 'Noto Sans KR';
	font-weight : 300;
	font-size : 14px;
}
#JOIN-STEP2-FORM > dl > dt.ESSENTIAL:before{
	content : '*';
	color : #E11;
}
#JOIN-STEP2-FORM > dl > dd{
	padding : 0;
	margin : 4px 0 0 0;
}
#JOIN-STEP2-FORM > dl > dd > .TEXTBOX{
	height : 42px;
	padding : 0 16px;
	border : solid 1px #CCC;
	font-size : 0;
}
#JOIN-STEP2-FORM > dl > dd > .TEXTBOX > input{
	width : 100%;
	height : 42px;
	padding : 0;
	margin : 0;
	border : 0;
	outline : 0;
	font-size : 16px;
}
#JOIN-STEP2-FORM > dl > dd > .TEXTBOX > input::-webkit-input-placeholder{
	font-size : 12px;
	color : #999;
}
#JOIN-STEP2-FORM > dl > dd > .SELECTBOX{
	height : 42px;
	padding : 0 16px;
	border : solid 1px #CCC;
	font-size : 0;
}
#JOIN-STEP2-FORM > dl > dd > .SELECTBOX > select{
	width : 100%;
	height : 42px;
	padding : 0;
	margin : 0;
	border : 0;
	outline : 0;
	font-size : 14px;
}
#JOIN-STEP2-FORM > dl > dd > .CHECKBOX{
	height : auto;
	padding : 0;
	font-size : 0;
}
#JOIN-STEP2-FORM > dl > dd > .CHECKBOX > div{
	margin-top : 4px;
}
#JOIN-STEP2-FORM > dl > dd > .CHECKBOX > div > input[type="checkbox"]{
	margin : 0 4px -2px 0;
	vertical-align : middle;
}
#JOIN-STEP2-FORM > dl > dd > .CHECKBOX > div > input[type="checkbox"] + label{
	font-size : 12px;
	line-height : 20px;
	vertical-align : middle;
}
#JOIN-STEP2-FORM > dl > dd > .CHECKBOX > div > input[type="radio"]{
	margin : 0 4px -2px 0;
	vertical-align : middle;
}
#JOIN-STEP2-FORM > dl > dd > .CHECKBOX > div > input[type="radio"] + label{
	font-size : 12px;
	line-height : 20px;
	vertical-align : middle;
}

#JOIN-STEP2-FORM > dl > dd > .INFLOW-ETC{
	display : none;
}

#JOIN-STEP2-FORM > dl > dd > .TOAST-MSG{
	padding : 0 4px;
	margin : 4px 0;
	color : #666;
	font-size : 11px;
}
#JOIN-STEP2-FORM > dl > dd > .TOAST-MSG.ALERT{
	color : #C11;
}
#JOIN-STEP2-FORM > dl > dd > .TOAST-MSG.SUCCESS{
	color : #056BD7;
}
#JOIN-STEP2-FORM > div > #BTN-JOIN-EXEC{
	width : 100%;
	height : 72px;
	margin : 32px 0;
	background-color : #09C;
	border : 0;
	color : #FFF;
	font-family : 'Noto Sans KR';
	font-size : 19px;
	cursor : pointer;
}
#JOIN-STEP2-FORM > div > .JOIN-MSG{
	padding : 0;
	margin : 4px 0;
	color : #666;
	line-height : 20px;
	font-family : 'Nanum Gothic';
	font-weight : 400;
	font-size : 11px;
}

#JOIN-SUCCESS-MSG{
	margin : 36px 0;
	text-align : center;
}
.JOIN-MEMBER-INFO{
	width : 360px;
	margin : 0 auto;
}
.JOIN-MEMBER-INFO > dl{
	padding : 0;
	margin : 0;
}
.JOIN-MEMBER-INFO > dl > dt{
	float : left;
	width : 80px;
	height : 36px;
	background-color : #E9E9E9;
	border-top : solid 1px #BBB;
	line-height : 36px;
	text-align : center;
	font-weight : bold;
	font-size : 12px;
}
.JOIN-MEMBER-INFO > dl > dd{
	width : 260px;
	height : 36px;
	padding : 0 8px;
	margin-left : 84px;
	margin-bottom : 4px;
	background-color : #F4F4F4;
	border-top : solid 1px #DDD;
	line-height : 36px;
	font-size : 12px;
}

.BUTTONS{
	margin-top : 16px;
	text-align : center;
	font-size : 0;
}
.BUTTONS > button{
	height : 48px;
	margin : 0 4px;
	background-color : #999;
	border : 0;
	color : #FFF;
	font-weight : bold;
	font-size : 13px;
	cursor : pointer;
}
.BUTTONS > button#GOTO-LOGIN{
	width : 230px;
	background-color : #395FC5;
}
.BUTTONS > button#GOTO-HOME{
	width : 120px;
	background-color : #393939;
}




#FIND-WRAPPER{
	width : 494px;
	padding : 32px;
	margin : 128px auto 0 auto;
	border : solid 1px #EEE;
}
#FIND-WRAPPER > h1{
	height : 60px;
	padding : 0;
	margin : 0 0 24px 0;
	font-family : 'Noto Sans KR';
	font-weight : 500;
	font-size : 28px;
	line-height : 60px;
}
#FIND-WRAPPER > .FIND-MSG{
	padding : 0;
	margin : 0;
	text-align : center;
	color : #666;
	font-size : 12px;
}
#FIND-WRAPPER > form{
	width : 360px;
	margin : 24px auto;
}
#FIND-WRAPPER > form > div{
	margin-bottom : 16px;
	font-size : 0;
}
#FIND-WRAPPER > form > div > label{
	display : block;
	margin-bottom : 4px;
	color : #666;
	font-size : 12px;
}
#FIND-WRAPPER > form > div > input[type="text"],
#FIND-WRAPPER > form > div > select{
	height : 38px;
	padding : 0 12px;
	margin : 0;
	border : solid 1px #BBB;
	outline : 0;
	font-size : 12px;
	box-sizing : border-box;
	vertical-align : top;
}
#FIND-WRAPPER > form > div > input[type="text"][readonly],
#FIND-WRAPPER > form > div > select[readonly]{
	background-color : #F9F9F9;
	color : #666;
}
#FIND-WRAPPER > form > div > #MBR-NAME{ width : 100%; }
#FIND-WRAPPER > form > div > #MBR-MOBILE1{ width : 100px; }
#FIND-WRAPPER > form > div > #MBR-MOBILE2,
#FIND-WRAPPER > form > div > #MBR-MOBILE3{ width : 120px; margin-left : 10px; text-align : center; }
#FIND-WRAPPER > form > div > #MBR-MAIL1{ width : 120px; margin-right : 10px; }
#FIND-WRAPPER > form > div > #MBR-MAIL2{ width : 120px; }
#FIND-WRAPPER > form > div > #MBR-MAIL-SELECT{ width : 110px; border-left : 0; }
#FIND-WRAPPER > form > #FIND-RESULT{
	height : 24px;
	padding : 0;
	margin : 0;
	text-align : center;
	font-size : 14px;
	line-height : 24px;
}
#FIND-WRAPPER > form > #FIND-RESULT > strong{
	color : #395FC5;
}
#FIND-WRAPPER > form > .BUTTONS{
	margin-top : 32px;
	text-align : center;
	font-size : 0;
}
#FIND-WRAPPER > form > .BUTTONS > #GOTO-LOGIN{
	background-color : #999;
	width : 120px;
}
#FIND-WRAPPER > form > .BUTTONS > #FIND-ID-EXEC{
	width : 200px;
	background-color : #395FC5;
}

#FIND-WRAPPER > form > div > #MBR-MOBILE,
#FIND-WRAPPER > form > div > #MBR-MOBILE-AUTH-NUMB{
	width : 240px;
	margin-right : 10px;
}
#FIND-WRAPPER > form > div > button{
	width : 110px;
	height : 38px;
	background-color : #FFF;
	border : solid 1px #CCC;
	font-size : 12px;
}
#FIND-WRAPPER > form > div > button[disabled]{
	color : #999;
	background-color : #F9F9F9;
	border-color : #DDD;
}



/*  */
@media ( max-width : 26rem ){

	#LOGIN-WRAPPER{
		width : 24rem;
		padding : 0;
		margin : 0;
	}
	#LOGIN-WRAPPER > form > div > input{
		width : 100%;
		box-sizing : border-box;
	}
	#LOGIN-WRAPPER > form > div > button{
		width : 100%;
	}

}