@charset "utf-8";

/* ---------------------------------------------- 공통 ---------------------------------------------- */
/* common */
* {box-sizing:border-box;} /* 지우지마세요*/

.member-wrap { 
	margin:0 auto; padding:50px 0;
	width:1200px;
	font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
	font-size:12px; line-height:1; color:#606060;
}
.member-wrap a { 
	display:block;
	font-size:12px; color:#606060; 
	text-decoration:none; 
	transition:all .3s ease;
}
.member-wrap a:hover {color:#111;}

/* 타이틀 */
.member-title { 
	padding-bottom:20px;
	font-weight:normal; 
	font-size:30px; line-height:1; color:#303030;
	text-align:center;
}

/* form style */
.member-wrap input, 
.member-wrap select, 
.member-wrap textarea { 
	border:1px solid #dedede; border-radius:0; background:#fff;
	font-size:13px; line-height:1; color:#666; vertical-align:middle; 
}
.member-wrap input, 
.member-wrap select { 
	display:inline-block;
}
.member-wrap input[type="text"], 
.member-wrap input[type="password"],
.member-wrap select { 
	padding:0 7px; height:35px;
}
.member-wrap input[type="radio"],
.member-wrap input[type="checkbox"] { 
	display:none;
}
.member-wrap input[type="radio"] + label { 
	 position:relative; display:inline-block; 
	 cursor:pointer;
}
.member-wrap input[type="radio"] + label:before { 
	content:""; display:inline-block; 
	position:absolute; left:0; top:-1px; 
	width:20px; height:20px;  background:#fff; 
	border-radius:50%; border:1px solid #bebebe;
	transition:all .3s ease;
}
.member-wrap input[type="radio"]:checked + label:before { 
	content: "\f00c"; color: #fff; 
	display:inline-block;
	width:20px; height:20px;
	background:#111; border-color:#111;
	font-family: 'FontAwesome';
	font-size: 12px; line-height:20px; text-align: center;
}
.member-wrap input[type="checkbox"] + label { 
	 position:relative; display:inline-block; 
	 cursor:pointer;
}
.member-wrap input[type="checkbox"] + label:before { 
	content:""; display:inline-block; 
	position:absolute; left:0; top:-1px; 
	width:20px; height:20px;  background:#fff; 
	border:1px solid #bebebe;
	transition:all .3s ease;
}
.member-wrap input[type="checkbox"]:checked + label:before { 
	content: "\f00c"; color: #fff; 
	display:inline-block;
	width:20px; height:20px;
	background:#111; border-color:#111;
	font-family: 'FontAwesome';
	font-size: 12px; line-height:20px; text-align: center;
}
.member-wrap p label { 
	display:inline-block; padding-left:28px;
	line-height:20px; color:#666;
	vertical-align:middle;
}
.member-wrap select { 
	padding:0 0 0 10px; min-width:150px;
	background:#fff url('/img/common/select-arrow.gif') no-repeat right center;
	-webkit-appearance: none; 
	-moz-appearance: none; 
	appearance: none;
	-ms-appearance: none; 
	cursor:pointer;
}
.member-wrap select::-ms-expand {display: none;}
.member-wrap textarea { 
	padding:10px;
	height:150px; width:100%; 
	font-family:'Malgun Gothic', Sans-serif;
	color:#666;
}
.member-wrap input[type="file"] { 
	border:0 none;
}


/* ---------------------------------------------- 로그인 ---------------------------------------------- */
/* login-form-wrap */
.login-form-wrap { 
	position:relative;
	margin:0 auto; padding-top:150px;
	width:500px; 
	border-top:1px solid #e1e1e1;
	text-align:center;
}
.login-form-wrap:before { 
	content:''; display:inline-block;
	position:absolute; top:30px; left:50%; z-index:66;
	margin-left:-32px;
	width:64px; height:89px;
	background:url('/img/member/icon_lock.png') no-repeat 0 0;
	background-size: 100% auto;
}
.login-input {width:100%;}
.login-input li {margin:0 0 15px;}
.login-form-wrap input[type="text"],
.login-form-wrap input[type="password"] { 
	width:100%; height:50px;
}
.save-id-wrap { 
	float:left; 
	width:50%; text-align:left;
}
.save-id-wrap label {font-size:13px;}
.find-btn-wrap { 
	float:right; 
	width:50%; text-align:right;
}
.find-btn-wrap a { 
	display:block; width:100%; height:100%;
	font-size:13px; line-height:20px;
}
/* btn */
.login-btn-wrap { 
	clear:both; 
	padding:30px 0 0; width:100%; 
	text-align:center;
}
.login-btn-wrap a { 
	display:block; width:100%;
	margin-bottom:10px; 
	font-weight:500; font-size:15px; line-height:50px; 
}
.login-btn-wrap .btn-login { 
	background:#464646; color:#fff;
}
.login-btn-wrap .btn-join { 
	background:#d3d3d3; color:#464646;
}


/* ---------------------------------------------- 회원가입 ---------------------------------------------- */
/* ------------ 약관 ------------ */
/* join-form-wrap */
.join-form-wrap { 
	width:100%;
}
.join-form-wrap legend { 
	padding:30px 0 10px;
    font-weight: 500; font-size: 16px; line-height: 20px;
    color: #303030;
}
.join-form-wrap legend span { 
	display:inline-block; margin:7px 0 0; width:100%;
	font-weight:normal; font-size:13px; line-height:18px;
	color:#666;
}
.join-form-wrap .box-wrap { 
	overflow-x:hidden;
	margin-bottom:15px; padding:15px 20px;
	width:100%; height:230px;
	border:1px solid #bebebe; border-top-color:#303030;
	white-space: pre-line; 
	font-size:14px; line-height:18px;
	color:#666; text-align:left;
}
.join-agree label strong {color:#f84a4a;}

/* btn */
.join-btn-wrap { 
	clear:both; 
	padding:30px 0 0; width:100%; 
	text-align:center; font-size:0; line-height:0;
}
.join-btn-wrap a { 
	display:inline-block; margin:0 5px;
	width:150px;
	font-weight:500; font-size:15px; line-height:50px; 
}
.join-btn-wrap .btn-confirm { 
	background:#464646; color:#fff;
}
.join-btn-wrap .btn-cancel { 
	background:#d3d3d3; color:#464646;
}

/* ------------ 회원가입 폼 ------------ */
.form-table { 
	width:100%; table-layout:fixed;
	border-top:1px solid #303030;
	border-bottom:1px solid #303030;
}
.form-table tr{ 
	border-bottom:1px solid #e1e1e1;
}
.form-table tr:last-child { 
	border-bottom:0 none;
}
.form-table th { 
	padding:16px 10px 16px 20px;
	background:#f4f4f4;
	font-weight:500; font-size:13px; line-height:18px;
	color:#303030; text-align:left; vertical-align:middle;
}
	/* 필수항목 */
.member-wrap th.required:after { 
	content:''; display:inline-block;
	margin-top:-3px; margin-left:7px; 
	width:14px; height:11px;
	background:url('/img/common/required.png') no-repeat 0 0;
	vertical-align:middle;
}
.form-table td { 
	padding:7px 13px 8px;
	font-size:13px; line-height:18px; color:#666;
	vertical-align:middle;
}
.form-table td input, 
.form-table td select, 
.form-table td span,
.form-table td label,
.form-table td .check-btn { 
	display:inline-block;
	margin-right:-5px;
}
	/* 분류 */
.join-form-select select { 
	min-width:200px;
}
	/* 이름 */
.join-form-name input { 
	min-width:200px;
}
	/* 아이디 */
.join-form-id input { 
	min-width:200px;
}
	/* 중복확인 / 우편번호 찾기 버튼*/
.form-table .check-btn { 
	display:inline-block; 
	margin-left:10px;	padding:0 15px;
	border:1px solid #dedede;
	background:#f3f3f3; 
	font-weight:500; font-size:14px; line-height:33px;
	vertical-align:middle;
}
	/* 비밀번호 */
.join-form-password  input { 
	min-width:320px;
}
.join-form-password  input::-webkit-input-placeholder {color:#f84a4a;}
.join-form-password  input::-moz-placeholder {color:#f84a4a;}
.join-form-password  input:-ms-input-placeholder {color:#f84a4a;}
.join-form-password  input:-moz-placeholder {color:#f84a4a;}
	/* 연락처*/
.join-form-tel select { 
	max-width:150px; min-width:auto; width:25%;
}
.join-form-tel input { 
	margin-left:7px; max-width:150px; width:25%;
}
.join-form-tel span { 
	margin-left:7px;
}
	/* 이메일*/
.join-form-email input { 
	min-width:250px;
}
.join-form-email span { 
	display:inline-block;
	margin-top:7px; width:100%;
}
	/* 주소 */
.join-form-address input.address { 
	margin-top:7px; width:100%; 
}
.join-form-radio p { 
	display:inline-block;
	margin-right:30px;
}
.join-form-check p { 
	display:inline-block;
	margin-right:30px;
	padding-top:5px; padding-bottom:5px;
}
	/* 생년월일 */
.join-form-birth select { 
	width:23%; max-width:150px; min-width:auto;
}
.join-form-birth input { 
	margin-left:10px;
	width:23%; max-width:150px;
}
.join-form-birth input:first-of-type { 
	margin-left:0;
}
.join-form-birth span { 
	margin-left:7px; margin-right:7px !important;
}
	/* text */
.form-table td .info-text { 
	display:inline-block; 
	margin-left:10px; padding:5px 0;
	vertical-align:middle;
}

/* ------------ 회원가입완료 ------------ */
.result-title { 
	border-top:1px solid #e1e1e1;
	padding:70px 0 30px; width:100%;
	font-weight:100; font-size:30px; line-height:36px;
	color:#303030; text-align:center;
}
.result-text { 
	width:100%;
	font-size:14px; line-height:20px; color:#666;
	text-align:center;
}
.result-text span { 
	font-weight:500; color:#303030;
}
.warning-message { 
	margin:50px 0 15px;
	width:100%; color:#f84a4a; text-align:center;
}
.join-result-wrap .form-table { 
	margin:0 auto; width:65%;
	margin-bottom:50px;
}


/* ------------ 이용약관 / 개인정보취급방침 / 이메일무단수집거부 / 사이트맵 ------------ */
.utils-wrap,
.site-map-wrap { 
	margin:0 auto; padding:50px 0;
	width:1005px;
	font-size:16px; line-height:1.5;
	color:#888;
	word-break:keep-all;
}
@media screen and (max-width: 1200px) { 
	.utils-wrap,
	.site-map-wrap { 
		padding:50px 30px; width:100%;
	}
}

.utils-wrap h3 { 
	margin:50px 0 20px;
	font-weight:500; font-size:20px; line-height:1;
	color:#111;
}
.utils-wrap h3 + p { 
	margin-bottom:15px;
}
.utils-wrap > ol > li,
.utils-wrap > ul > li {		
	padding-left:23px;
	text-indent:-23px;
}
.utils-wrap  > dl > dd { 
	padding-left:23px;
}
.utils-wrap > ol ul ,
.utils-wrap > ol ol,
.utils-wrap ol dl { 
	margin:5px 0;
}
.utils-wrap > ol ul li ,
.utils-wrap > ol ol li { 
	padding-left:9px;
	text-indent:-9px;
}
.utils-wrap ol dl { 
	padding-left:23px;
}
.utils-wrap .privacy-cont dd {
	padding-left:9px; 
}
.utils-wrap .privacy-num dd { 
	padding-left:17px;
}
.utils-wrap .supplementary { 
	margin-top:30px;
}
.utils-wrap .supplementary dd { 
	padding-left:0;
}

/* 사이트맵 */
.site-map { 
	margin:50px 0 0; width:100%;
	font-size:0; line-height:0;
}
.site-map a { 
	display:block; width:100%;
}
.site-map .depth01 { 
	display:inline-block; 
	margin-right:5%; margin-bottom:5%; width:30%;
	vertical-align:top;
}
.site-map .depth01:nth-child(3n) { 
	margin-right:0;
}
.site-map .depth01 > a { 
	padding:15px 10px;
	border-bottom:2px solid #111;
	font-weight:500; font-size:24px; line-height:1;
	color:#1771cc;
}
.site-map .depth02 a { 
	padding:15px 10px;
	border-bottom:1px solid #ddd;
	font-weight:500; font-size:16px; line-height:1.5;
	color:#111;
}