/* 2. Conatiner - login */

.pcLogin {
    padding:42px 20px 100px 20px;
}

.pcLogin .loginBox {
    margin-top:35px;
    width:800px;
    border:1px solid #c6c6c6;
    margin:0 auto;
}

.pcLogin .loginTitle {
    padding:20px 30px;
    border-bottom:1px solid #e2e2e2;
    font-size:22px;
    color:#232323;
    font-weight:normal;
}

.pcLogin .loginContent {
    margin:0 30px;
    padding:30px 0;
	position:relative;
}

.pcLogin #pcLoginForm {
    padding-right:22px;
    display:inline-block;
    border-right:1px solid #e2e2e2;
    min-height:98px;
}

.pcLogin #pcLoginForm p:first-child,
.pcLogin #pcLoginForm p:nth-child(2) {
    margin-bottom:10px;
    position:relative;
}

.pcLogin #pcLoginForm #pcLoginId,
.pcLogin #pcLoginForm #pcLoginPw {
    padding:0 15px;
    height:42px;
    line-height:42px;
    width:309px;
    background:#fff;
    border:1px solid #d5d5d5;
}

/*
.pcLogin #pcLoginForm .pcLoginId,
.pcLogin #pcLoginForm .pcLoginPw {
    display:block;
    position:absolute;
    top:50%;
	transform:translateY(-50%);
    left:14px;
    font-size:15px;
    color:#999;
}
*/

.pcLogin #pcLoginForm #pcLoginId:focus,
.pcLogin #pcLoginForm #pcLoginPw:focus {
	border:1px solid #006633;
}

/*
.pcLogin #pcLoginForm #pcLoginId:focus ~ .pcLoginId,
.pcLogin #pcLoginForm #pcLoginPw:focus ~ .pcLoginPw {
	display:none;
}
*/

.pcLogin #pcLoginForm p:nth-child(3) {
	margin-bottom:20px;
}

.pcLogin #pcLoginForm #saveId {
	margin-right:5px;
	line-height:normal;
	vertical-align:middle;
	cursor:pointer;
}

.pcLogin #pcLoginForm .saveId {
	font-size:14px;
	color:#232323;
}

.pcLogin #pcLoginForm .loginBtn {
	display:inline-block;
	padding:12px 32px;
	line-height:18px;
	background:#006633;
	font-size:18px;
	color:#fff;
	font-weight:bold;
	cursor:pointer;
}

.pcLogin .loginSns {
	position:absolute;
	right:0;
	top:30px;
}

.pcLogin .loginSns>li {
	margin-bottom:10px;
}

.pcLogin .loginSns>li>a {
	display:block;
	width:350px;
	padding-left:64px;
	height:44px;
	line-height:44px;
	font-size:15px;
	color:#fff;
	font-weight:bold;
	box-sizing:border-box;
}

.pcLogin .loginSns>li:first-child>a {
	background:#3c5a98;
}

.pcLogin .loginSns>li:nth-child(2)>a {
	background:#1ec800;
}

.pcLogin .loginSns>li:nth-child(3)>a {
	background:#ffcd00;
}

.pcLogin .loginLink {
	margin:0 30px;
	padding:18px 0;
	border-top:1px solid #e2e2e2;
}

.pcLogin .loginLink>li {
	display:inline-block;
}

.pcLogin .loginLink>li:nth-child(2),
.pcLogin .loginLink>li:nth-child(3) {
	margin-left:15px;
	padding-left:15px;
	border-left:1px solid #e2e2e2;
}

.pcLogin .loginLink>li>a {
	font-size:15px;
	color:#232323;
}

.mLogin {
	display:none;
}






/* Mobile : 640px 이하 */

@media screen and (max-width:640px) {

    /* 1. 제거하기 */
	
	header {
		display:none;
	}
	
	.pcLogin {
		display:none;
	}

    /* 2. 100% 만들기 */

    /* 3. 나타내기 */
	
	.mLogin {
		display:block;
		background:#f5f5f5;
	}
	
	.mLogin .loginBox {
		width:100%;
		height:100%;
		padding:0 17px;
		box-sizing:border-box;
	}
	
	.mLogin .loginLogo {
		padding:36px 0 32px 0;
		text-align:center;
		position:relative;
	}
	
	.mLogin .loginLogo>a:first-child {
		position:absolute;
		left:10px;
		top:50%;
		transform:translateY(-50%);
	}
	
	.mLogin .loginLogo>a:first-child>img {
		width:18px;
		height:18px;
	}
	
	.mLogin .loginKeyboard {
		margin-bottom:10px;
	}
	
	.mLogin .viewKeyboard,
	.mLogin .viewSpecialWord {
		display:none;
	}
	
	.mLogin .keyboardArea input {
		position:absolute;
		top:-9999px;
	}
	
	.mLogin .keyboardArea label {
		color:#666;
		margin-right:15px;
		padding-right:13px;
		font-size:14px;
		background:url(../images/mLogin_arrow_down.svg) right center no-repeat;
		background-size:9px auto;
	}
	
	.mLogin .keyboardArea .viewKeyboard,
	.mLogin .keyboardArea .viewSpecialWord {
		margin-top:10px;
	}
	
	.mLogin .keyboardArea .viewKeyboard img,
	.mLogin .keyboardArea .viewSpecialWord img {
		width:100%;
		max-width:572px;
	}
	
	.mLogin .keyboardArea #keyboardBtn1:checked ~ .keyboardBtn1,
	.mLogin .keyboardArea #keyboardBtn2:checked ~ .keyboardBtn2 {
		background-image:url(../images/mLogin_arrow_up.svg);
	}
	
	.mLogin .keyboardArea #keyboardBtn1:checked ~ .viewKeyboard,
	.mLogin .keyboardArea #keyboardBtn2:checked ~ .viewSpecialWord {
		display:block;
	}
	
	.mLogin .loginInput {
		margin-bottom:25px;
	}
	
	.mLogin .inputSet {
		position:relative;
	}
	
	.mLogin .inputSet input {
		display:block;
		width:100%;
		height:43px;
		padding:0 42px 0 12px;
		margin:0 0 7px;
		box-sizing: border-box;
		font-size:14px;
		border:1px solid #dadada;
		background:#fff;
		outline:none;
	}
	
	.mLogin .inputSet input:focus {
		border-color:#006633;
	}
	
	
	.mLogin .loginOptions {
		height:23px;
		margin-bottom:15px;
	}
	
	.mLogin .loginCheck {
		float:left;
		display:inline-block;
		color:#666;
	}
	
	.mLogin .loginOptions div:nth-child(2) {
		margin-left:15px;
	}
	
	.mLogin .loginCheck input {
		position:absolute;
		top:-9999em;
		
	}
	
	.mLogin .loginCheck label {
		display:inline-block;
		height:23px;
		line-height:23px;
		font-size:14px;
		padding-left:32px;
		overflow:hidden;
		background:url(../images/mLogin_checkbox.png) 0 0 no-repeat;
		background-size:23px auto;
	}
	
	.mLogin .loginCheck input:checked ~ label {
		background-position:0 100%;
	}
	
	.mLogin .loginBtn {
		display:block;
		width:100%;
		height:50px;
		line-height:50px;
		overflow:hidden;
		text-align:center;
		font-size:1.429em;
		color:#fff;
		background:#006633;
		border:none;
		cursor:pointer;
	}
	
	
	
	
	.mLogin .loginLink {
		margin-bottom:25px;
		text-align:center;
		vertical-align:middle;
	}
	
	.mLogin .loginLink>li {
		display:inline-block;
		height:14px;
		line-height:1em;
	}
	
	.mLogin .loginLink>li:nth-child(2),
	.mLogin .loginLink>li:nth-child(3) {
		padding-left:8px;
		margin-left:8px;
		border-left:1px solid #d7d7d7;
	}
	
	.mLogin .loginLink>li>a {
		color:#666;
		font-size:14px;
	}
	
	
	.mLogin .loginSns {
		padding-top:17px;
		padding-bottom:17px;
		border-top:1px solid #dadada;
		border-bottom:1px solid #dadada;
	}
	
	.mLogin .loginSns>li {
		margin-bottom:8px;
	}
	
	.mLogin .loginSns>li:nth-child(3) {
		margin-bottom:0;
	}
	
	.mLogin .loginSns>li>a {
		display:block;
		height:50px;
		line-height:50px;
		color:#fff;
		text-align:center;
		font-size:1.071em;
	}
	
	.mLogin .loginSns>li:first-child>a {
		background:#3c5a98;
	}
	
	.mLogin .loginSns>li:nth-child(2)>a {
		background:#1ec800;
	}
	
	.mLogin .loginSns>li:nth-child(3)>a {
		background:#ffcd00;
	}




}