@charset "utf-8";

/* 
 * member CSS Document
 */
 

/* 회원 */
.join_area h2{font-size:30px !important; color:#222; font-weight:500; text-align:center; letter-spacing:-1px;}
.join_area h2 i{display:inline-block;}
.join_area > p{margin-top:20px; text-align:center; font-size:16px; color:#494949; font-weight:300; letter-spacing:-1px;}
.join_area h3{margin:30px 0 10px; font-size:16px; color:#222; letter-spacing:-1px;}
.join_area textarea{width:100%; height:250px; box-sizing:border-box; padding:15px; border:1px solid #dbdbdb; resize:none;}
.join_area .title{display:block; margin-bottom:10px; font-size:30px; color:#222; font-weight:200; letter-spacing:-1px;}
.join_area .check{padding-top:15px; text-align:right;}
.join_area .box{padding-bottom:30px; border-bottom:1px dashed #d0d0d0;}
.join_area .box:last-child{border-bottom-width:0px;}
.join_area .box.join{max-width:600px; box-sizing:border-box; margin:0 auto; border-bottom-width:0px;}
.join_area .box.join ul{border-top:1px solid #505c78;}
.join_area .box.join ul li{position:relative; min-height:100px; box-sizing:border-box; padding-top:35px;}
.join_area .box.join ul li:before{content:''; opacity:0.6; display:block; position:absolute; top:50%; right:0px; width:16px; height:18px; margin-top:-9px; transition:all 0.5s ease 0s;}
.join_area .box.join ul li label{position:absolute; top:50%; left:0px; color:#666; font-weight:300; transform:translateY(-50%); transition:all 0.3s ease-in-out;}
.join_area .box.join ul li input{width:100%; height:60px; padding-left:0px; background-color:transparent; border:0px; border-bottom:1px solid #e2e2e2;}
.join_area .box.join ul li input:hover,
.join_area .box.join ul li input:focus{outline:none;}
.join_area .box.join ul li[data-member-login="pw"]:before{background:url(../images/module/icon_data.svg) no-repeat 50% 50%;}
.join_area .box.join ul li[data-member-login="id"]:before{background:url(../images/module/icon_user.svg) no-repeat 50% 50%;}
.join_area .box.join ul li[data-member-login="id"] input{padding-right:25px;}
.join_area .box.join ul li.active label,
.join_area .box.join ul li.in label{top:20px; color:#236af7; transform:translateY(0);}
.join_area .box.join ul li.active input,
.join_area .box.join ul li.in input{border-color:#236af7;}
.join_area .box.join ul li.active:before,
.join_area .box.join ul li.in:before{opacity:1;}
.join_area .box.join .btn_login{display:block; width:100%; height:60px; margin-top:40px; background:#fff; border:1px solid #41464e; color:#41464e; font-size:16px; font-weight:600; transition:all 0.5s cubic-bezier(0, 0, 0.21, 0.87) 0s;}
.join_area .box.join .btn_login:hover{background:#41464e; color:#fff; box-shadow:5px 15px 20px rgba(0,0,0,0.15);}

.join_area .box.find{max-width:500px; box-sizing:border-box; margin:0 auto;}
.join_area .box.find h3 + table{margin-top:10px;}
.join_area .box.find p{margin-top:10px; letter-spacing:-0.5px; font-size:13px; text-align:center;}
.join_area .box.find .tac{margin-top:10px;}
.join_area .box.find .bbsView th{background:transparent;}
.join_area .btn_area{padding-top:30px; text-align:center;}
.join_area .bbsView{margin-top:30px;}	
.join_area .bbsView td em{font-size:0.8rem; word-break:keep-all;}
.join_area .join_box_scroll{overflow-y:auto; height:350px; box-sizing:border-box; padding:20px; border:1px solid #dbdbdb;}

.login_social{position:relative; margin-top:30px; text-align:center;}
.login_social:before{content:'or'; display:block; position:relative; z-index:5; width:100px; margin:0 auto 25px; background:#fff; font-size:20px; font-weight:600; color:rgba(65,70,78,0.4); text-align:center;}
.login_social:after{content:''; opacity:0.1; display:block; position:absolute; top:12px; left:50%; z-index:4; width:80%; height:1px; background:#41464e; transform:translateX(-50%);}
.login_social a{display:inline-block; position:relative; padding:5px 0 5px 35px; margin:0 7px; text-align:left; font-size:14px;}
.login_social a:before{content:''; display:block; position:absolute; left:0px; top:0px; width:30px; height:30px; background-repeat:no-repeat; background-position:50% 0; background-size:100%;}
.login_social .btn_login_naver:before{background-image:url(../images/module/icon_naver.png);}
.login_social .btn_login_kakao:before{background-image:url(../images/module/icon_kakao.png);}
.login_social .btn_login_facebook:before{background-image:url(../images/module/icon_face.png);}

.btn_area.social a{display:inline-block; position:relative; padding:0 10px 0 20px;}
.btn_area.social a:before{content:''; display:block; position:absolute; top:10px; left:0px; width:5px; height:5px; background:#b0b2b4; border-radius:100%;}
.btn_area.social a:first-child:before{display:none;}

.area_namecheck h2{font-size:30px; color:#222; font-weight:500; text-align:center; letter-spacing:-1px;}
.area_namecheck > p{margin-top:20px; text-align:center; font-size:16px; color:#494949; font-weight:300; letter-spacing:-1px;}
.area_namecheck h3{margin:30px 0 10px; padding:0px; font-size:16px; color:#222; letter-spacing:-1px;}
.area_namecheck h3:before{display:none;}

/* 본인인증 */
.area_namecheck .inr{max-width:700px; box-sizing:border-box; margin:0 auto;}
.area_namecheck .box{padding:15px; border:1px solid #d8d8d8;}
.area_namecheck .box p{margin-bottom:5px; letter-spacing:-1px; word-break:keep-all;}
.area_namecheck .box p.red{color:#e92054;}

@media screen and (max-width:1024px){
	.login_social .btn_login_naver:before{background-image:url(../images/module/icon_naver@x3.png);}
	.login_social .btn_login_kakao:before{background-image:url(../images/module/icon_kakao@x3.png);}
	.login_social .btn_login_facebook:before{background-image:url(../images/module/icon_face@x3.png);}
}

@media screen and (max-width:768px){
	.join_area .bbsView{table-layout:fixed;}
	.join_area .bbsView td[data-member-form] em{display:block; margin-top:3px; line-height:1.2em;}
	.join_area .bbsView td[data-member-form="email"] input{width:100%;}
	.join_area .bbsView td[data-member-form="id"]{position:relative;}
	.join_area .bbsView td[data-member-form="addr"] > span{display:block; position:relative;}	
	.join_area .bbsView td[data-member-form="id"] input{width:100%; padding-right:100px;}
	.join_area .bbsView td[data-member-form="addr"] > span input#zip{width:100%; padding-right:120px;}
	.join_area .bbsView td[data-member-form="id"] .button{position:absolute; top:15px; right:10px;}	
	.join_area .bbsView td[data-member-form="addr"] > span .button{position:absolute; top:0; right:0px;}	
	.join_area .bbsView col[data-member-form="th"]{width:120px !important;}	
	.join_area .bbsView col[data-member-form="td"]{width:auto !important;}

	.login_social a{margin:3px 7px; font-size:13px;}
}

@media screen and (max-width:480px){
	.join_area > p{word-break:keep-all;}
	.join_area .bbsView col[data-member-form="th"]{width:100px !important;}
	.join_area .bbsView td[data-member-form="id"] .button{top:10px;}
	.join_area .join_box_scroll{padding:15px 10px;}
	.login_social:before{margin-bottom:15px;}
}

@media screen and (max-width:380px){
	.join_area .bbsView td[data-member-form="id"] .button{top:10px;}
	.btn_area.social a{font-size:14px;}
}

@media screen and (max-width:370px){
	.join_area .box.join{padding-right:0px;}
	.join_area .box.join .button.login{display:block; position:static; width:120px; height:35px; line-height:33px; margin:10px auto 0;}
	.btn_area.social a{padding:0 5px 0 15px;}
}