input, button, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"] {border: 0; border: 1px solid var(--border); padding: 10px; height: 42px; width:100%; max-width: 250px;  font-size: 0.94rem;}  
input.w100 {max-width: unset;}

textarea { width: 100%; resize: none; height: 100px; border: 0; border: 1px solid var(--border); padding: 10px;} 
select {
    padding: 0 30px 0 10px; border: 1px solid var(--border); font-size: 0.94rem; height: 42px; font-size: 0.94rem;
    background:url('../img/select_arr_b.png') no-repeat #fff calc(100% - 10px) 50%/10px auto;
}

input::placeholder,
textarea::placeholder { color: #aaa;} 

input[type="button"] {border: 1px solid var(--mainColor2); background: var(--mainColor2); color: #fff; font-size: 0.94rem;padding: 10px; height: 42px; cursor: pointer; transition: all .3s; line-height: 1; }
input[type="button"]:hover {background: #fff; color: var(--mainColor2)0; border: 1px solid var(--mainColor2);}


input[type="radio"] { border-radius: 10px; margin-top: -1px;}
input[type="checkbox"] { margin-top: 0px; } 

input[type="checkbox"],
input[type="radio"] {
    border: 1px solid #ccc; background: #fff; vertical-align: middle; width: 18px; height: 18px; flex-shrink: 0; margin: 0 0 1px 0;
} 
input[type="checkbox"]:checked,
input[type="radio"]:checked { border: 5px solid var(--mainColor2); } 
label {padding-right:20px; display: flex; align-items: center; gap: 5px; font-size: 0.94rem;} 
label:last-child { margin-right: 0;} 

.form_wrap .inner {max-width: 1000px;}
.form_box {margin-bottom: 60px; border-bottom: 1px solid var(--border);}
.form_box .bot_cmnt {border-bottom: 2px solid #fff; margin-top: 20px; margin-bottom: -2px; position: relative; padding-left: 22px; font-size: 0.95rem}
.form_box .bot_cmnt::before {
    display: block; content: "!"; width: 16px; height: 16px; line-height: 16px; border-radius: 100%; background: var(--mainColor2); color: #fff; text-align: center;
    position: absolute; left: 0; top: 4px;
}
.form_top {display: flex; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 15px;}
.form_top .tit {flex: 1 0 0;}
.form_top .tit .big {font-size: 1.25rem; font-weight: 700;}
.form_top .tit .small {font-size: 1rem;}
.form_top .tit .herald_go {font-size: 0.875rem; padding:3px 10px; background: var(--mainColor2); color: #fff; display: inline-block; width: max-content; margin:5px 0}
.form_terms {padding: 10px 0;}
.form_terms .gubun {padding: 0 0 10px; font-size: 1rem;}
.form_terms .gubun p:after {display: inline-block; content: "*"; color: var(--mainColor2); margin-left: 2px;}
.form_terms .terms_wrap {overflow-y: auto; max-height: 180px; font-size: 0.875rem;}
.form_terms .agree {padding: 20px 0;}

.form_btn {display: flex; align-items: center; justify-content: center; gap: 20px;}
.form_list > li {display: flex; gap: 20px; border-bottom: 1px solid var(--border); font-size: 0.94rem;}
.form_list > li > div {padding: 20px 0; min-height: 85px;}
.form_list > li > .gubun {flex-shrink: 0; width: 180px; color: #000; display: flex; align-items: center; }
.form_list > li.req > .gubun p:after {display: inline-block; content: "*"; color: var(--mainColor2); margin-left: 2px;}
.form_list > li > .naeyong {display: flex; justify-content: center; flex-direction: column; gap: 10px; width: 100%;}
.form_list > li > .naeyong .cmnt {font-size: 0.875rem; padding-left: 22px; position: relative; color: #555;}
.form_list > li > .naeyong .cmnt::before {
    display: block; content: "!"; width: 16px; height: 16px; line-height: 16px; border-radius: 100%; background: var(--mainColor2); color: #fff; text-align: center;
    position: absolute; left: 0; top: 3px;
}

.form_list > li > .naeyong.notice .cmnt {color: #000;}
.form_list > li > .naeyong.notice .label {padding-top: 10px;}

.form_list .input {display: flex; gap: 10px; width: 100%; align-items: center;}


.form_list .input input.w75 {max-width: unset; width: 75%;}
.form_list .input input[type="button"] {min-width: 80px; width: max-content;}
.form_list .input .inputId {width: calc(100% - 90px);}
.form_list .input .itemH {display: flex; gap: 10px; align-items: center; font-size: 0.875rem; width: 100%;}
.form_list .input .itemH.name input {max-width: 120px;}
.form_list .email {font-size: 0.875rem; display: flex; gap: 10px; align-items: center;}
.form_list .label {display: flex; flex-wrap: wrap; row-gap: 10px;}
.form_list .label .etcInput {height: 30px; max-width: 150px; font-size: 0.875rem;}
.form_list .labelL {display: flex; flex-direction: column; gap: 10px;}
.form_list .labelAtt .etcInput {height: 30px; max-width: 150px; font-size: 0.875rem;}
.form_list .labelAtt {display: flex; flex-wrap: wrap; row-gap: 10px;}
.form_list .labelAtt label {width: 33%;}
.form_list .file {display: flex; gap: 10px;}
.form_list .file label {
	border: 1px solid #000; background: #000; color: #fff; font-size: 0.94rem;
    padding: 10px; height: 42px; cursor: pointer; transition: all .3s; width: 80px; justify-content: center;
}
.form_list .file label:hover {background: #fff; color: #000;}
.form_list .file input[type="file"] {
	position: absolute; width: 1px; height: 1px; padding:0; margin:-1px; overflow:hidden; border:0; clip:rect(0,0,0,0);
}
.form_list .address {display: flex; flex-wrap: wrap; gap: 10px;}
.form_list .address .line1 {max-width: 380px;}
.form_list .address .line2 {width: 100%; max-width: unset;}

.form_list .input.rankL {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 10px;}
.form_list .input.rankL p::before {
    display: inline-block; content: "-"; margin-right: 5px;
}
.form_list .input.rankS {padding-top: 20px; border-top:1px solid var(--border)} /* 모의면접 순위 셀렉트박스 */
.form_list .input.rankS .text {min-width: 40px;}


.form_add {padding: 30px 0;}
.form_add input[type="button"] {margin: 0 0 0 auto; display: block; min-width: 80px;}
.form_tb {padding-top: 30px;}
.form_tb > div > ul {display: flex; gap: 15px; align-items: center; min-height: 60px;}
.form_tb > div > ul > li {text-align: center; font-size: 0.875rem;}
.form_tb .hd ul {background: #e9e9e9;}
.form_tb .bd ul {border-bottom: 1px solid #ddd;}
.form_tb .button {display: flex; align-items: center; gap: 5px;}
.form_tb .button a {padding: 2px 7px; border-radius: 4px;}
.form_tb .button .modify {background: #000; color: #fff;}
.form_tb .button .delete {background: #e9e9e9; color: #555;}

.form_tb_to .name {width: 100px;}
.form_tb_to .ssn {width: 160px;}
.form_tb_to .address {flex: 1 0 0;}
.form_tb_to .mobile {width: 150px;}
.form_tb_to .email {width: 150px;}
.form_tb_to .button {width: 120px;}

.form_top_check {padding-bottom: 20px; border-bottom: 1px solid var(--border);}
.form_top_check label {font-size: 1.125rem; align-items: flex-start; font-weight: 700;}
.form_top_check label input[type="checkbox"] {margin:3px 0 0 0;}
.form_top_check .cmnt {padding-left: 45px; position: relative; margin-top: 2px;font-size: 0.94rem; font-weight: 500;}
.form_top_check .cmnt::before {
    display: block; content: "!"; width: 16px; height: 16px; line-height: 16px; border-radius: 100%; background: var(--mainColor2); color: #fff; text-align: center;
    position: absolute; left: 23px; top: 2px; 
}

.applyCancel {background: #fff; border: 1px solid #000; width: 180px; padding: 10px; display: block; text-align: center; margin-left: auto; font-size: 0.94rem; margin-top: -20px; margin-bottom: 40px;}

.form_mini {border-bottom: 0; margin-bottom: 10px !important;}
.form_mini .form_top {background: none; color: #000; padding: 0 0 15px; border-bottom: 0;}
.form_mini .form_top .cmnt {font-size: 0.94rem;}
.form_mini .form_list {display: flex; flex-direction: column; gap: 20px;}
.form_mini .form_list > li {flex-direction: column; gap: 5px; border-bottom: unset; padding: 0;}
.form_mini .form_list > li > div {padding: 0; min-height:unset; font-size: 0.875rem;}
.form_mini .form_list > li > .gubun {width: 100%;}
.form_mini .form_list > li.req > .gubun p:after {display: none;}
.form_mini .form_list .input input {width: 100%; max-width: unset;}
.form_mini .form_list .input input[type="button"] {font-size: 0.875rem; flex: 1 0 0;}

.terms_wrap {border: 1px solid #ddd; padding: 20px; font-size: 0.94rem;}
.terms_wrap .box {line-height: 1.5;}
.terms_wrap .tit {font-weight: bold;}


#popAddTo .layer,
#popAddToE .layer {max-width: 1000px;}


@media screen and (max-width:1199px) {    
    .form_list .labelAtt label {width: 50%;}

    .form_tb {padding-top: 0;}
    .form_tb .hd ul {display: none;}
    .form_tb .bd {}
    .form_tb .bd ul {flex-direction: column; min-height: unset; gap: 10px; align-items: flex-start; padding: 20px 0;}
    .form_tb .bd li {text-align: left; width: 100% !important;}

    .form_tb_to .bd li::before {display: inline-block; margin-right: 10px; color: #767676;}
    .form_tb_to .name::before {content: "이름";}
    .form_tb_to .ssn::before {content: "주민번호";}
    .form_tb_to .address::before {content: "주소";}
    .form_tb_to .mobile::before {content: "핸드폰";}
    .form_tb_to .email::before {content: "이메일";}
    .form_tb_to .button::before {margin-right: 0;}
    
}

@media screen and (max-width:899px) {
    .form_box .bot_cmnt {font-size: 0.875rem;}
    .form_box .bot_cmnt::before {top: 3px;}
    .form_terms .gubun {padding: 15px 0;}
    .form_terms .agree {padding: 15px 0;}
    .form_list > li {flex-direction: column; padding: 20px 0; gap: 10px;}
    .form_list > li > div {padding: 0; min-height: unset;}
    .form_list > li > .gubun {width: 100%; }
    .form_btn .btn.big {font-size: 1rem; height: 50px; max-width: unset;}    
    .form_list .input input.w75 {max-width: unset; width: 100%;}
}

@media screen and (max-width:599px) {
    .form_box {margin-bottom: 40px;}
    .form_top .tit .herald_go {display: block;}
    .form_terms .terms_wrap {padding: 20px;}
    .form_list > li > div {font-size: 0.875rem;}
    .form_list .address .line1 {flex: 1 0 0;}
    .form_list .email {flex-wrap: wrap;}
    .form_list .verifyNum input[type="text"] {flex: 1 0 0;}
    .form_btn {flex-direction: column; gap: 10px;}
    .form_btn .st1 {order: 1;}
    .form_btn .st2 {order: 2;}    
    .form_list .labelAtt label {width: 100%;}
    .form_tb_to .bd li::before {display: block; margin-right: 0; margin-bottom: 2px;}

    .form_top_check label {font-size: 1rem;}
    .form_top_check label input[type="checkbox"] {margin-top: 1px;}
    .form_top_check .cmnt {font-size: 0.875rem;}

    .form_list .input.rankS {flex-direction: column;}
}