.LOGIN-SECTION{ text-align : center; }
#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{
	display : inline-block;
	width : 414px;
	padding : 32px;
	margin : 48px auto;
	border : solid 1px #EEE;
	vertical-align : top;
}
#LOGIN-WRAPPER.GUEST{
	display : block;
	margin : 32px auto;
}
#LOGIN-WRAPPER > h1{
	height : 60px;
	padding : 0;
	margin : 0 0 24px 0;
	font-size : 0;
}
#LOGIN-WRAPPER > h1 > a{
	display : block;
	height : 60px;
	margin : 0 auto;
	background-image : url('/images/logo-login.png');
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#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 : #9C0408;
	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;
}


#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;
	font-size : .815em;
}
#JOIN-STEP1-FORM > div > div.DOCUMENT > h1{
	text-align : left;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX{
	display : flex;
	justify-content : space-between;
	align-items : center;

	width : 26rem;
	height : 2.25rem;
	padding : 0 .5rem;
	margin : .5rem auto;
	border : solid 1px #CCC;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > input{
	flex-grow : 0;
	appearance : none;
	width : .815rem;
	height : .815rem;
	margin-right : .5rem;
	border : solid 1px #CCC;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > label{	
	flex-grow : 1;

	color : #333;
	font-size : .75rem;
	cursor : pointer;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > input:checked{
	background-color : #06C;
}
#JOIN-STEP1-FORM > div > div.CHECKBOX > a.MOREVIEW{
	color : #666;
	font-size : .75rem;
}
#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.FLEX{
	display : flex;
	gap : 1rem;
}
#JOIN-STEP2-FORM > dl > dd.FLEX > div > label{ font-size : .815rem; }
#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;
}


/* 모바일 세팅 */
@media( max-width : 480px ){

	#LOGIN-WRAPPER{
		width : auto;
		padding : 2rem;
		margin : 0;
		border : 0;
	}
	#LOGIN-WRAPPER > form > div > input{
		width : 100%;
		height : 3.2rem;
		box-sizing : border-box;
	}
	#LOGIN-WRAPPER > form > div > button{
		width : 100%;
		height : 3.5rem;
	}
	#LOGIN-WRAPPER > #MEMBER-OPTIONS{
		display : flex;
		flex-wrap : wrap;
		gap : .5rem 0;
		margin-top : 2rem;
	}
	#LOGIN-WRAPPER > #MEMBER-OPTIONS > a{
		width : 50%;
		padding : 0;
		margin : 0;
	}
	#LOGIN-WRAPPER > #MEMBER-OPTIONS > a:hover{
		text-decoration : underline;
	}
	#LOGIN-WRAPPER > #MEMBER-OPTIONS > i{ display : none; }

	/* 회원가입 */

	header{
		padding : 1rem 0;
		border-bottom : 0;
	}
	section > h1{
		margin : 1rem 0;
	}

	#JOIN-STEP1-FORM{
		width : auto;
		margin : 1rem;
	}
	#JOIN-STEP1-FORM > div > div.DOCUMENT{
		font-size : .75rem;
	}
	#JOIN-STEP1-FORM > div > div.CHECKBOX{
		width : auto;
	}
	#JOIN-STEP1-FORM > div > button#BTN-NEXT-STEP{
		width : 100%;
		height : 4rem;
		margin : 0;
	}

	#JOIN-STEP2-FORM{
		width : auto;
		margin : 1rem;
	}

	#JOIN-SUCCESS-MSG{
		position : relative;
		height : 13rem;
		margin : 0;
		overflow : hidden;
	}
	#JOIN-SUCCESS-MSG > img{
		position : absolute;
		left : 50%;
		top : 0;
		width : 150%;
		transform : translateX( -50% );
	}
	.JOIN-MEMBER-INFO{
		width : auto;
		margin : 0 1rem;
	}
	.JOIN-MEMBER-INFO > dl > dd{
		width : calc( 100% - 100px )
	}
	.BUTTONS > button#GOTO-LOGIN{
		width : 60%;
	}
	.BUTTONS > button#GOTO-HOME{
		width : 30%;
	}

}