@charset "utf-8";

/* 폼 공통 */
.form_wrap{}

/* 양식 테이블 */
.form_wrap .form_table{clear: both; width: 100%; margin: 0 auto; table-layout: fixed; border-collapse: collapse; font-size: 1rem; word-break: keep-all; overflow: hidden; border-top: 2px solid #222; box-sizing: border-box; background-color: #fff;}
.form_wrap .form_table colgroup col:nth-child(1){width: 200px;}
.form_wrap .form_table colgroup col:nth-child(2){width: calc(100% - 200px);}
.form_wrap .form_table tbody{}
.form_wrap .form_table tbody tr{border-bottom: 1px solid #dbdbdb;}
.form_wrap .form_table tbody tr th{box-sizing: border-box; vertical-align: middle; padding: 1rem 1.5rem; font-weight: 600; text-align: left; background-color: #f9f9f9;}
.form_wrap .form_table tbody tr th label,
.form_wrap .form_table tbody tr th span{position: relative;}
.form_wrap .form_table tbody tr th label.necessary:before,
.form_wrap .form_table tbody tr th span.necessary:before{content: "필수입력항목"; position: absolute; top: 3px; right: -10px; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #cc0000; font-size: 0;}
.form_wrap .form_table tbody tr td{box-sizing: border-box; padding: 1rem 1.5rem; vertical-align: middle;}
.form_wrap .form_table tr td span.added {font-size: 0.9rem; margin-left: 5px; color: #777;}
.form_wrap .form_table .cont.email br,
.form_wrap .form_table .cont.address br{display: none;}

.form_wrap .form_table .captha{display: block; width: 0; height: 0; border: none; opacity: 0; overflow: hidden;}


/* 폼 상단박스 */
.form_wrap .form_info{margin: 0 0 2rem; box-sizing: border-box; padding: 2rem 2rem; background-color: #f5f5f5;}
.form_wrap .form_info p{}


/* 폼 상단 내, 사이드 박스 */
.form_wrap .form_info_side{margin: 0 0 10px 0; text-align: right;}
.form_wrap .form_info_side p{position: relative; display: inline-block;}
.form_wrap .form_info_side p::before{content: "필수입력항목"; position: absolute; top: 6px; left: -10px; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #cc0000; font-size: 0;}


/* 파일첨부 */
.form_wrap .custom-file{width: 500px; height: 44px; position: relative;}
.form_wrap .custom-file + .custom-file{margin-top: 10px;}
.form_wrap .custom-file:after{content: ""; display: block; clear: both;}
.form_wrap .custom-file label{float: left; position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 500px; height: 44px; line-height: 44px;  border: 1px solid #dbdbdb; box-sizing: border-box; text-align: left; padding: 0 150px 0 1rem; cursor: pointer; background-color: #fff; color: #bbb; font-size: 1rem;}
.form_wrap .custom-file label span {display: block; width: 70%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.form_wrap .custom-file input[type="file"]{position: absolute; left: 0; top: 0; width: 0; height: 0; line-height: 0; margin: 0; border: none; padding: 0; overflow: hidden;}
.form_wrap .custom-file input[type="file"]:focus + label{border: 1px solid #222;}
.form_wrap .custom-file .uploaded_file{position: absolute;}
.form_wrap .custom-file .upload_files_del{position: absolute; top: 0; right: 0; color: #fff; background: #222; width: 140px; line-height: 44px; text-align: center; font-size: 1rem; margin: 0; padding: 0; border: none; background-color: #e23131;}
.form_wrap .custom-file img{position: absolute; z-index: 1; width: 40px; height: 30px; left: 65px; top: 50%; transform: translateY(-50%); object-fit: scale-down;}
.form_wrap .custom-file-btn{position: absolute; top: 0; right: 0; color: #fff; background: #222; width: 140px; line-height: 44px; text-align: center; pointer-events: none;}

.form_wrap .info_list{width: 100%; margin: 10px 0 0;}
.form_wrap .info_list li{position: relative; box-sizing: border-box; padding: 0 0 0 10px; font-size: 0.9rem;}
.form_wrap .info_list li:before{content: "*"; position: absolute; top: 2px; left: 0;}
.form_wrap .add_fileform button{
    background: #222; color: #fff;
    width: 30px; height: 30px; box-sizing: border-box; padding: 0 0 2px 1px;
    font-size: 1.5rem; line-height: 1; cursor: pointer; text-align: center;
    display: inline-block; vertical-align: middle; margin-right: 0.4rem;
}
.form_wrap .add_fileform span{
    display: inline-block; vertical-align: middle; color: #888; letter-spacing: -0.3px;
}


/* 주소 입력 */
.form_wrap .address .postcode {margin-bottom: 5px;}
.form_wrap .address .postcode:after {content: ""; display: block; clear: both;}
.form_wrap .address .postcode input{float: left;}
.form_wrap .address .postcode .search_btn {float: left; display: inline-block; margin: 0 0 0 2px; vertical-align: middle; box-sizing: border-box; padding: 0 1rem; width: 120px; line-height: 44px; font-weight: 400; color: #fff; background: #222; cursor: pointer; text-align: center;}
#daum_zipcode {display:none;border:1px solid;width:98%;height:400px;margin:5px 0;position:relative; overflow:auto;}


/* 폼 개인정보취급방침 */
.form_wrap .agree{height: 200px; overflow-y: auto; box-sizing: border-box; padding: 1rem 1.5rem; background-color: #f9f9f9; border: 1px solid #dbdbdb;}
.form_wrap .agree .title{font-size: 17px; font-weight: 600; margin: 0 0 0.5rem;}


/* 작성오류 시 */
.invalid-feedback{display: block; height: auto; line-height: 130%; margin: 1rem 0 0 5px; font-size: 0.9rem; color: #dc3545;}
.member .agree .join_check + .invalid-feedback{text-align: center;}

/* 비밀번호 폼 */
.form_wrap.password{max-width: 500px; margin: 0 auto;}





@media screen and (max-width:1300px){
    .form_wrap .form_table .cont.email br,
    .form_wrap .form_table .cont.address br{display: block;}
    .form_wrap .form_table .cont.email select{margin: 5px 0 0;}
    .form_wrap .form_table .cont.address .address_input input:last-of-type{margin: 5px 0 0;}
}

@media screen and (max-width:1280px){
    .form_wrap .form_list > li .tit{width: 160px;}
    .form_wrap .form_list > li .cont{width: calc(100% - 160px);}

    .form_wrap .form_table colgroup col:nth-child(1){width: 160px;}
    .form_wrap .form_table colgroup col:nth-child(2){width: calc(100% - 160px);}
}

@media screen and (max-width:1238px){
    .form_wrap .address .address_input input:last-of-type {margin-top: 5px;}
}

@media screen and (max-width:880px){
    .form_wrap .address .postcode input{width: calc(100% - 122px);}
}

@media screen and (max-width:860px){
    .form_wrap .form_list > li.w50{width: 100%; float: none;}
    .form_wrap .form_list > li .tit{display: block; width: 100%; background-color: transparent; padding: 1rem 1rem 0;}
    .form_wrap .form_list > li .cont{display: block; width: 100%; padding: 0.5rem 1rem 1rem;}

    .form_wrap .form_table{table-layout: auto;}
    .form_wrap .form_table tbody tr {display: block; padding:1.5rem 0;}
    .form_wrap .form_table tbody tr th{display: block; width: 100%; background-color: transparent; padding: 0 0 0.5rem 0;}
    .form_wrap .form_table tbody tr th label {line-height: 1;}
    .form_wrap .form_table tbody tr th span {line-height: 1;}
    .form_wrap .form_table tbody tr td{display: block; width: 100%; padding: 0;}

    .form_wrap .custom-file {width: 100%;}
    .form_wrap .custom-file label {width: 100%; float: none; position: absolute;}
    .form_wrap .custom-file-btn{position: relative; float: right;}
    .form_wrap .custom-file .upload_files_del{position: relative; float: right;}

    .form_wrap .address .postcode {margin-bottom: 5px;}
}

@media screen and (max-width:768px){
    .form_wrap .form_info{padding: 1.5rem;}
}

@media screen and (max-width:568px){
    .form_wrap .checkbox_style label{margin: 0 10px 0 0;}

    .form_wrap .custom-file-btn{width: 96px;}
    .form_wrap .custom-file .upload_files_del{width: 96px;}
    .form_wrap .custom-file label{padding: 0 100px 0 1rem;}

    .form_wrap .agree{height: 160px; padding: 1rem; font-size: 13px;}
    .form_wrap .agree .title{font-size: 14px;}

	.form_wrap .address .postcode input {width: calc( 100% - 92px);}
	.form_wrap .address .postcode .search_btn {width: 90px;}
}