@charset "utf-8";

/*************** index.html *******************/
.index_wrap{
	position: absolute;
	left: 50%; top: 40%;
	max-width: 80rem;
	transform: translate(-50%, -50%);
}
/* 비디오팝업창 */
.popup_box{
	position: relative;
	max-width: 60rem;
	z-index: 999;
	margin: 0 auto 6rem;
}
.popup_cont{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.popup_cont iframe, .popup_cont object, .popup_cont embed{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.popup_btn{
	position: absolute;
	right: -40px; top: 0;
}
.popup_btn a{
	font-size: 3rem;
	padding: 0 .5rem;
	display: block;
	line-height: 1;
	color: #ccc;
}
/* intro tabs */
.introTabs{
	display: table;
	table-layout: fixed;
	max-width: 80rem;
	margin: 0 auto;
}
.introTabs li{
	display: table-cell;
	vertical-align: middle;
	padding: 0 4.5rem;
	position: relative;
}
.introTabs li a{display: block; width: 100%; height: 100%; transition: all .2s ease-in-out;}
.tabTogo{
	position: absolute;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	text-transform: uppercase;
	font-weight: bolder;
	letter-spacing: -.1rem;
	font-size: 2.5rem;
	display: none;
}
.introTabs li a:hover img{
	opacity: .1;
}
.introTabs li a:hover .tabTogo{
	display: block;
}
.intro_foo{
	display: table;
	position: fixed;
	bottom: 5%;
	left: 50%; transform: translateX(-50%);
}
.intro_foo li{
	display: table-cell;
	/* padding: 0 1rem 0 0; */
	box-sizing: border-box;
}
.intro_foo li:last-child{padding: 0;}
.intro_foo li a{
	text-transform: uppercase;
	font-size: 1.3rem;
	color: #666;
	font-weight: 300;
	line-height: 1;
	display: block;
}
.intro_foo li a b{color: #333; font-weight: 400;}
.intro_foo li a:hover, .intro_foo li a:hover b{color:#007549}
.intro_foo li a i{
	font-size: 1.8rem;
	vertical-align: sub;
}
#footer.intro_foo{position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);}

/*************** END index.html *******************/


/* 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{
	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: 3rem 0;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 400;
	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;
}
.find_wrap tbody td, .join_wrap tbody td{text-align: left;}
.find_wrap tbody td input, .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;
}
.find_wrap tbody tr.findID02 td input[type="tel"], .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;
}
.find_wrap tbody tr.findID02 td input[type="tel"]{
	margin: 0 .2rem;
	padding: 0;
	width: 5.5rem;
}
/* 인증번호 입력 */
a.certi_btn{
	background-color: #999;
	color: #fff;
	padding: 0.2rem 0.7rem;
	margin-left: .5rem;
	font-size: 1.2rem;
	font-weight: 300;
}

/* sns계정로그인 */
/* 2022.12.08 이전
.sns_login p{text-align: center; color: #666; font-size: 1.2rem;}
.sns{display: flex; justify-content: center;}
.sns > div{width: 4.6rem; height: 4.6rem; border-radius: 100%; margin-left: 10px;}
.sns > div:first-child{margin-left:0;}
.sns > div a{display: block; width: 100%; height: 100%; text-align: center; line-height: 4.6rem;}
.sns > div img{background: transparent;}
.sns > div.kakao{background: #fee500;}*/
/* 2022.12.08 수정 */
.sns_login p{text-align: center; color: #666; font-size: 1.2rem;}
.sns{display: flex; justify-content: center;}
.sns > div{width: 100%; margin-left: 10px; padding: 1.5rem 0;}
.sns > div:first-child{margin-left:0;}
.sns > div a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.sns > div img{background: transparent;}
.sns > div.kakao{background: #fee500;}
.sns > div span{box-sizing: border-box; padding: 0 0 0 1rem; color: #000; text-transform: initial; font-size: 1.6rem;}



/* 테블릿 세로 (해상도 1400px)
-------------------------------- */
@media all and (max-width:1400px) {

}

/* 테블릿 세로 (해상도 1200px)
-------------------------------- */
@media all and (max-width:1200px) {

}


/* 테블릿 세로 (해상도 960px)
------------------------------------------------------ */
@media all and (max-width:960px) {
	/* login */
	#container.loginContainer{margin: 30rem auto 0;}
	#container.loginContainer.joinContainer{margin: 18rem auto 0;}
}

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

	/* intro- 비디오팝업창 */
	.popup_box{display: none;}

	/* find id + password */
	.find_wrap tbody td input{width:17rem; height: 3.5rem;}
	.find_wrap tbody tr.findID02 td input[type="tel"]{width: 5.3rem;}
	a.certi_btn{padding: .6rem .7rem;}
}

/* max-width: 640px------------------------------------------------------ */
@media screen and (max-width:640px) {
	
	/* 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;}

	/* sns계정로그인 */
	/*.sns > div{width: 6rem; height: 6rem;}
	.sns > div a{line-height: 6rem;}
	.sns > div img{width: 40%; height: auto;}*/
	.sns > div img{width: 5%;}

	/* find id + password */
	.findBox colgroup{display: none;}
	.findBox table th{width: 20%;}
	.find_wrap tbody td input{width:18rem;}
	a.certi_btn{padding: .7rem 1rem;}
}