@charset "utf-8";

/* ******************************************************
	00. common
*******************************************************/
input[type=text],
input[type=number],
input[type=email],
input[type=url],
input[type=tel],
input[type=password]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;width:100%;height:30px;text-align:left;font-size:14px;line-height:1;color:#333;padding:0 10px;background-color:#fff;border-radius:0;border:1px solid #ddd;box-sizing:border-box;transition:background 0.5s, border 0.5s ease;z-index:0;outline:none;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0 40px #efefef inset;-webkit-text-fill-color: #333}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s;}
select{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:30px;font-size:14px;color:#888;line-height:1;padding:5px 20px 5px 10px;border-radius:0;background-color:#fff;border:1px solid #ddd;background-image:url(../images/util/select_arrow_gray.png);background-position:right 10px center;background-repeat:no-repeat;box-sizing:border-box;z-index:0;white-space:normal;word-wrap:normal;word-break:normal}
select:focus{outline:none;border:1px solid #333}
select::-ms-expand{display:none}
select{padding:5px 10px \0/IE9;}
textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:160px;font-size:14px;line-height:20px;color:#333;padding:10px;background-color:#fff;border:1px solid #ddd;border-radius:0;box-sizing:border-box;resize:none;transition:background 0.5s, border 0.5s ease}
textarea.gray{background:#f6f6f6}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=password]:focus,
textarea:focus,
input[type=text].active,
input[type=number].active,
input[type=email].active,
input[type=url].active,
input[type=tel].active,
input[type=password].active,
textarea.active {outline:none;border:1px solid #333 !important;z-index:1}

input[type=text]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=tel]:disabled,
input[type=password]:disabled,
select:disabled{background-color:#e4e4e4}

::-webkit-input-placeholder{color:#888}
::-moz-placeholder{color:#888}
:-ms-input-placeholder{color:#888}
:-moz-placeholder{color:#888}
input[type=submit]{display:inline-block;border:none;outline:none;padding:0;background:none;border-radius:0;cursor:pointer}
button{display:inline-block;border:none;outline:none;padding:0;background:none;border-radius:0;cursor:pointer}
button > span{position:relative;}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #efefef inset;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


/* jquery-ui */
.ui-datepicker .ui-datepicker-title select {display:inline-block; min-width:0; width:40%; height:30px; padding:5px 10px; margin:0 3px; color:#222; font-size:14px; line-height:1; border:1px solid #ddd; background-color:#fff; background-image:url(../images/util/select_arrow_gray.png); background-position:right 8px center; background-repeat:no-repeat; vertical-align:middle; -webkit-appearance:inherit; appearance:inherit}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {top:4px;}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {top:3px;}

.d_wrap {position:relative; display:inline-block; width:100%; height:30px;}
.d_wrap > input {color:#333;font-size:14px;line-height:1;padding:0 10px;}
.d_wrap > input:focus + img{border-left-color:#333;}
.d_wrap > img {position:absolute; top:1px; right:1px; width:28px; height:28px; cursor:pointer;border-left:1px solid #ddd;z-index:1;transition:all 0.5s ease;}



/* ******************************************************
	01. form
*******************************************************/
/* 약관 컨텐츠 */
.agree_content{font-size:14px;color:#666;line-height:22px;padding:25px 20px;background:#f6f6f6;border-top:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;box-sizing:border-box;height:270px;overflow-y:auto;}
.agree_info{font-size:17px;line-height:24px;margin-top:17px}
.agree_info + .agree_check{margin-top:5px}
.agree_single_txt{font-size:14px;line-height:22px;color:#666;}
.agree_single_txt.big{font-size:16px;line-height:24px;}
.agree_single_txt em{font-weight:700;}

/* 동의하기 체크 박스 */
.agree_check{margin:10px -5px 0 -5px;}
.agree_check:after{content:'';display:block;clear:both;}
.agree_check > p{float:left;padding:5px;}
.agree_check input{vertical-align:middle;}
.agree_check label{font-size:16px;color:#666;vertical-align:middle;margin-left:3px}

/* 파일첨부 */
.file_upload_parent:after{content:'';display:block;clear:both;}
.file_upload_parent .file_upload_wrap{width:510px;float:left;}
.file_upload_parent .info{float:left;font-size:14px;line-height:30px;color:#888;margin-left:10px;}
.upload_file{position:relative;max-width:510px;margin-top:10px;padding-right:140px;overflow:hidden;}
.upload_file:first-child{margin-top:0;}
.upload_file input[type='file']{position:absolute;top:0;left:-40px;display:block;width:100%;height:30px;opacity:0;z-index:5;cursor:pointer;}
.upload_file input[type='text']{}
.upload_file .btn_file{position:absolute;top:0;right:40px;display:block;width:89px;height:30px;font-size:13px;color:#fff;line-height:28px;background:#9c9c9c;border:1px solid #8f8f8f;box-sizing:border-box;text-align:center;}
.upload_file .btn_file_add,
.upload_file .btn_file_del{position:absolute;top:0;right:0;}

.btn_file_add{position:relative;display:inline-block;width:30px;height:30px;box-sizing:border-box;background:#fff;border:1px solid #ddd;}
.btn_file_add:before{content:'';position:absolute;top:50%;left:50%;display:block;width:14px;height:2px;margin:-1px 0 0 -7px;background:#666;}
.btn_file_add:after{content:'';position:absolute;top:50%;left:50%;display:block;width:2px;height:14px;margin:-7px 0 0 -1px;background:#666;}

.btn_file_del{position:relative;display:inline-block;width:30px;height:30px;box-sizing:border-box;background:#fff;border:1px solid #ddd;}
.btn_file_del:before{content:'';position:absolute;top:50%;left:50%;display:block;width:14px;height:2px;margin:-1px 0 0 -7px;background:#666;}

/* 전화번호 */
.phone_wrap{max-width:425px;margin:0 -12px;}
.phone_wrap:after{content:'';display:block;clear:both;}
.phone_wrap > div{position:relative;float:left;width:33.33%;padding:0 12px;box-sizing:border-box;}
.phone_wrap > div:after{content:'-';position:absolute;top:0;left:-12px;display:block;width:24px;height:30px;font-size:14px;color:#888;line-height:30px;text-align:center;}
.phone_wrap > div:first-child:after{display:none;}

/* 핸드폰 및 전화번호 */
.dubble_phone{overflow:hidden;}
.dubble_phone .phone_sort{width:125px;margin-right:20px;float:left;}
.dubble_phone .phone_wrap{float:left;}

/* 이메일 */
.email_wrap{max-width:535px;margin:0 -5px;}
.email_wrap:after{content:'';display:block;clear:both;}
.email_wrap > div{position:relative;float:left;width:27%;padding:0 5px;box-sizing:border-box;}
.email_wrap > div:first-child{width:39%;padding-right:23px;}
.email_wrap > div:first-child:after{content:'@';position:absolute;top:0;right:-5px;display:block;width:23px;height:30px;font-size:14px;color:#888;line-height:30px;text-align:center;}
.email_wrap > div:last-child{width:34%}

/* 생년월일 */
.birthday_wrap {max-width:375px;margin:0 -5px;}
.birthday_wrap:after{content:'';display:block;clear:both;}
.birthday_wrap > div{float:left;width:25%;box-sizing:border-box;padding:0 5px;}

/* 멀티 체크 */
.mulity_check{margin:-5px -20px;line-height:1;}
.mulity_check:after{content:'';display:block;clear:both;}
.mulity_check > p{float:left;line-height:1;padding:5px 20px;}
.mulity_check input,
.mulity_check label{vertical-align:middle;}
.mulity_check label{margin-left:5px;font-size:16px;line-height:1;color:#666}

/* 주소 입력 */
.address_wrap{max-width:585px;}
.address_wrap > div{position:relative;margin-top:10px}
.address_wrap > div:first-child{margin-top:0;}
.address_wrap .address{position:relative;padding-right:100px;}
.address_wrap .address button,
.address_wrap .address a{position:absolute;top:0;right:0;display:block;width:90px;height:30px;font-size:13px;color:#fff;line-height:28px;background:#9c9c9c;border:1px solid #8f8f8f;box-sizing:border-box;text-align:center;}
.address_wrap .input input{max-width:334px;}

.address_wrap_new{max-width:585px;}
.address_wrap_new > div{position:relative;margin-top:10px}
.address_wrap_new > div:first-child{margin-top:0;}
.address_wrap_new .address{position:relative;padding:0 100px 0 110px;}
.address_wrap_new .address button,
.address_wrap_new .address a{position:absolute;top:0;right:0;display:block;width:90px;height:30px;font-size:13px;color:#fff;line-height:28px;background:#9c9c9c;border:1px solid #8f8f8f;box-sizing:border-box;text-align:center;}
.address_wrap_new .address_post{position:absolute;top:0;left:0;width:100px;}
.address_wrap_new .input input{}

/* 달력 */
.date_mulity{}
.date_mulity:after{content:'';display:block;clear:both;}
.date_mulity > div{position:relative;float:left;width:50%;box-sizing:border-box;}
.date_mulity > div:first-child{padding-right:13px}
.date_mulity > div:last-child{padding-left:13px}
.date_mulity > div:last-child:after{content:'~';position:absolute;top:0;left:-13px;display:block;width:26px;height:30px;font-size:14px;color:#888;line-height:30px;text-align:center;}

.mulity_average{}
.mulity_average:after{content:'';display:block;clear:both;}
.mulity_average > div{position:relative;float:left;width:50%;box-sizing:border-box;}
.mulity_average > div:first-child{padding-right:13px}
.mulity_average > div:last-child{padding-left:13px}
.mulity_average > div:last-child:after{content:'/';position:absolute;top:0;left:-13px;display:block;width:26px;height:30px;font-size:14px;color:#888;line-height:30px;text-align:center;}
.mulity_average.type02 > div:last-child:after{content:'-'}

/* 체중 & 신장 */
.char_input{position:relative;padding-right:30px;}
.char_input:after{content:'';position:absolute;top:0;right:0;font-size:16px;color:#666;line-height:30px;text-align:right;display:block}
.char_input.cm:after{content:'cm'}
.char_input.kg:after{content:'kg'}
.char_input.eye_left,
.char_input.eye_right{padding-right:25px;}
.char_input.eye_left:after{content:'좌'}
.char_input.eye_right:after{content:'우'}

/* 가족관계 */
.relation_wrap{position:relative;}
.relation_wrap:after{content:'';display:block;clear:both;}
.relation_wrap > div{float:left;width:54%;box-sizing:border-box;}
.relation_wrap > div.select{width:46%;padding-right:10px;}

/* 자기소개 */
.self_history{padding:20px 10px;border-top:2px solid #888;border-bottom:2px solid #888;}

/* 도로명 검색 */
.input_address{position:relative;padding-right:73px;}
.input_address button,
.input_address input[type=submit],
.input_address a{display:block;position:absolute;top:0;right:0;width:63px;height:30px;font-size:13px;color:#fff;line-height:28px;box-sizing:border-box;text-align:center;background:#9c9c9c;border:1px solid #8f8f8f;}
.input_address.type_02{padding-right:166px;}
.input_address.type_02 .btn_search{right:93px;}
.input_address.type_02 .btn_user_input{width:83px;right:0px;}

/* 인라인 체크박스 */
.inline_check{margin-left:20px;display:inline-block;vertical-align:middle;}
.inline_check input,
.inline_check label{vertical-align:middle;}
.inline_check label{color:#888;margin-left:6px;}

/* 영문 이름 */
.eng_name {margin:0 -5px;}
.eng_name:after{content:'';display:block;clear:both;}
.eng_name > div {float:left;width:33.33%;padding:0 5px; box-sizing:border-box;}




/* ******************************************************
	@ reponsive
*******************************************************/
@media screen and (max-width:1660px){		
	
}

@media screen and (max-width:1024px){				
	/* ******************************************************
		00. common
	*******************************************************/
	input[type=text],
	input[type=number],
	input[type=email],
	input[type=url],
	input[type=tel],
	input[type=password]{width:100% !important;max-width:100% !important;display:block;height:30px;font-size:13px;padding:0 10px}
	select{width:100% !important;max-width:100% !important;display:block;padding-top:0;padding-bottom:0;line-height:1;height:30px;font-size:13px;/*padding:10px 40px 10px 10px;*/background-image:url(../images/util/select_arrow_gray_x2.png);background-size:9px auto}
	textarea{height:80px;font-size:13px;line-height:18px;padding:15px 10px}

	input[type=submit]{-webkit-appearance:none;-moz-appearance:none;appearance:none;}

	/* 인라인 체크박스 */
	.inline_check{margin-left:0;margin-top:5px;}

	/* 영문 이름 */
	.eng_name {margin:0 0px;}
	.eng_name > div {width:100%;padding:0 0px;margin-top:5px;}
	.eng_name > div:first-child {margin-top:0;}
	.user_name > li > div{height:171px;}

	
	.address_wrap_new .address{padding:0 100px 0 0;}
	.address_wrap_new .address_post{position:relative;top:auto;left:auto;width:auto;}
	.address_wrap_new .address_default{margin:10px -100px 0 0;}

	
}

@media screen and (max-width:768px){	
	
	/* 약관 컨텐츠 */
	.agree_content{font-size:13px;line-height:18px;padding:20px 10px;height:130px}
	.agree_info{font-size:14px;line-height:20px;margin-top:15px}
	.agree_info + .agree_check{margin-top:5px}
	.agree_single_txt{font-size:13px;line-height:20px}
	.agree_single_txt.big{font-size:14px;line-height:22px;}

	/* 동의하기 체크 박스 */
	.agree_check{margin:5px -5px 0 -5px;line-height:1;}
	.agree_check label{font-size:13px;line-height:1;}

	/* 파일첨부 */
	.file_upload_parent .file_upload_wrap{width:auto;float:none;}
	.file_upload_parent .info{float:none;margin-top:10px;font-size:13px;line-height:15px;margin-left:0;}
	.upload_file{position:relative;max-width:100%;padding-right:116px}
	.upload_file .btn_file{width:65px;}

	/* 전화번호 */
	.phone_wrap{max-width:100%;margin:0;}
	.phone_wrap > div{width:33.33%;padding:0 0 0 10px;}
	.phone_wrap > div:after{left:0;width:10px;font-size:13px}
	.phone_wrap > div:first-child{padding-left:0;}

	/* 핸드폰 및 전화번호 */
	.dubble_phone .phone_sort{width:100%;margin-right:0;float:none;}
	.dubble_phone .phone_wrap{float:none;margin-top:10px;}

	/* 이메일 */
	.email_wrap{max-width:100%;margin:0;}
	.email_wrap > div{width:50%;padding:0;box-sizing:border-box;}
	.email_wrap > div:first-child{width:50%;padding-right:10px;}
	.email_wrap > div:nth-child(2){width:50%;padding-left:10px;}
	.email_wrap > div:first-child:after{right:-10px;width:20px;font-size:13px}
	.email_wrap > div:last-child{width:100%;margin-top:10px;}

	/* 멀티 체크 */
	.mulity_check{margin:-5px -10px}
	.mulity_check > p{padding:5px 10px;}
	.mulity_check label{font-size:15px}

	/* 체중 & 신장 */
	.char_input:after{font-size:13px;}

	/* 자기소개 */
	.self_history{padding:15px 0px;}

	.input_address.type_02{padding-right:73px;padding-bottom:40px;}
	.input_address.type_02 .btn_search{right:0px;}
	.input_address.type_02 .btn_user_input{width:100%;right:0;bottom:0;top:auto;}
	
	/* 인라인 체크박스 */
	.inline_check{position:absolute;top:0;right:0;margin-top:20px;line-height:1;}

	.d_wrap {max-width:100% !important;}

	/* 영문 이름 */
	.eng_name {margin:0 -5px;}
	.eng_name > div {width:33.33%;padding:0 5px;margin:0;}
	.user_name > li > div{height:auto;}

}


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


}