@charset "utf-8";


/* login */
#container.loginContainer{
	display: flex;
	justify-content: center;
	margin: 20rem auto 0;
	min-height: 55vh;
}
.login_wrap{text-transform: uppercase; width: 40rem;min-height:55vh;}
.login_wrap h1, .find_wrap h1, .join_wrap h1{
	border-bottom: 2px solid #000;
	letter-spacing: -.1rem;
	font-weight: bolder;
	line-height: 2;
	margin-bottom: 2.5rem;
	font-size: 1.6rem;
	text-transform: uppercase;
}
.userBox input{
	width: 100%;
	padding: 1rem;
	font-size: 1.4rem;
	color: #666;
	/* margin-top: 1.5rem; */
	border: none;
	border: 1px solid #ccc;
	outline: none;
	box-sizing: border-box;
	margin-bottom: 1rem;
}
.userBox input::placeholder{
	font-weight: 500;
	color: #999;
	text-transform: uppercase;
	letter-spacing: -.06rem;
	font-family: 'Spoqa Han Sans Neo', 'Roboto', sans-serif;
}
.guestBox input::placeholder{font-weight: 300;}

.userFind{
	display: flex;
	justify-content: flex-end;
	text-transform: none;
	margin-bottom: 2.5rem;
}
.userFind li{
	margin-left: 1.3rem;
	position: relative;
}
.userFind li:last-child:after{
	content:"";
	display: block;
	position: absolute;
	width:1px; height: 1rem;
	background: #000;
	left: -0.62rem; top: 50%; transform: translateY(-50%);
}
.userFind li a{
	font-size: 1.2rem;
	font-weight: 300;
	display: block;
}
.userFind li a:hover{color: #007549;}
.userSignIn a, .login_forguest a, .guestSignIn a{
	background: #000;
	color: #fff;
	width: 100%;
	display: block;
	padding: 1.5rem 0;
	box-sizing: border-box;
	font-weight: 600;
	font-size: 1.6rem;
	text-align: center;
}
.guestSignIn{margin-top:1.5rem;}
.guestSignIn a{
	background: #666;
	color: #fff;
}
.userJoin{
	padding: 4rem 0;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 300;
	text-transform: none;
}
.userJoin a{
	font-weight: bold;
	display: inline-block;
	text-decoration: underline;
}
.login_forguest a{
	background: #fff;
	border: 1px solid #666;
	color: #666666;
	letter-spacing: -.05rem;
	text-align: center;
	transition: all .2s ease-in-out;
}
.login_forguest a:hover{color:#000; border-color: #000;}

/* find id + pwd */
.find_wrap{
	text-transform: uppercase;
	width: 40rem;
	min-height: 48vh;
}
.findBox .radioWrap{text-align: center; margin: 0 0 2.5rem 0;}
.findBox .radioWrap li{
	display: inline-block;
	margin: 0 1rem 0 0;
}
.findBox .radioWrap li label{
	padding-left: .5rem;
	font-size: 1.3rem;
	vertical-align: text-top;
}
.find_wrap tbody th{
	text-align: center;
	padding: 1.5rem 0;
	font-weight: 600;
}
.join_wrap tbody td{text-align: left;}
.join_wrap tbody td input, .join_wrap tbody td select{
	width: 18rem;
	height: 2.5rem; /* line-height: 2.5rem; */
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 0 1rem;
	font-size: 1.2rem;
}
/* .join_wrap tbody tr td.join_phoneWrap input[type="tel"], .join_wrap tbody tr td.join_phoneWrap select{
	width: 5.5rem;
	margin: 0 0.5rem 0;
	text-align: center;
} */
/* ÀÎÁõ¹øÈ£ ÀÔ·Â */
a.certi_btn{
	background-color: #999;
	color: #fff;
	padding: 0rem 1rem;
	height: 2.5rem;
	line-height: 2.5rem;
	margin-left: .5rem;
	font-size: 1.2rem;
	font-weight: 300;
	display: inline-block;
}


/* ȸ¿ø°¡ÀÔ */
.join_wrap{width: 60rem; min-height: 48vh;}
.join_wrap tbody tr td.join_phoneWrap select{
	margin-left: 0;
	padding: 0;
}
.join_wrap tbody th, .join_wrap tbody td{border-bottom: 1px solid #999;}
/* .join_wrap tbody th{text-align: center;} */
.join_agree p{
	font-size: 1.3rem;
	font-weight: 300;
	color: #333;
}
.join_agree p font, .join_agree div font{font-family: 'Spoqa Han Sans Neo', 'Roboto', sans-serif !important;}
.join_agree{margin-bottom: 5rem;}
.join_agree p label{
	padding-left: .5rem;
	vertical-align: middle;
}
.join_agree p.join_all{
	font-size: 1.5rem;
	font-weight: 500;
	color: #000;
	margin-bottom: 2.5rem;
	padding: 2.5rem 0;
	border-top: 2px solid #999;
	border-bottom: 1px dotted #999;
}
.join_agree .join_box{
	width: 100%;
	height: 15rem;
	padding: 2rem;
	overflow-y: auto;
	text-align: left;
	border: 1px solid #999;
	color: #666;
	line-height: 1.3;
	background: #fff;
	margin: .5rem 0 1.5rem;
	box-sizing: border-box;
}
.join_agree .join_box div{
	font-size: 1.3rem;
	font-weight: 300;
	color: #333;
}
.join_agree > div{
	margin-bottom: 2.5rem;
}


/* Å×ºí¸´ ¼¼·Î (ÇØ»óµµ 1400px)
-------------------------------- */
@media all and (max-width:1400px) {

}

/* Å×ºí¸´ ¼¼·Î (ÇØ»óµµ 1200px)
-------------------------------- */
@media all and (max-width:1200px) {

}


/* Å×ºí¸´ ¼¼·Î (ÇØ»óµµ 960px)
------------------------------------------------------ */
@media all and (max-width:960px) {
	.m_foo{display: none;}
	
}

/* max-width: 768px------------------------------------------------------ */
@media screen and (max-width:768px) {

	.join_wrap tbody td input, .join_wrap tbody td select{height: 3.5rem;}
	a.certi_btn{padding: 0rem 1rem; height: 3.5rem; line-height: 3.5rem;}
}

/* max-width: 640px------------------------------------------------------ */
@media screen and (max-width:640px) {
	/* intro */
	.introTabs {width: 40%;}
	.intro_foo{width: 80%;}
	/* login */
	#container.loginContainer{margin: 20rem auto 0;}
	#container.loginContainer.joinContainer{margin: 15rem auto 0;}
	.login_wrap, .find_wrap, .join_wrap{padding: 0 5%}
	.join_wrap .tbl_wrap tbody{border-top: 0;}
	.tbl_wrap tbody th, .tbl_wrap tbody td{padding: 2rem .3rem;}

	/* find id + password */
	.join_wrap colgroup{display: none;}
	.join_wrap table th{width: 25%;}
}
@media screen and (max-width:380px) {
	.join_wrap tbody td input{width: 100%;}
	.join_wrap tbody td input#inputCheckNumber{width: 80%;}
	.join_wrap tbody tr input#join_phone{width: 80%%;}
	a.certi_btn{padding: .5rem 0rem; display: block; margin: 1rem 0 0 0; text-align: center;}
	
}