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;  padding: 10px; height: 40px; width:100%; max-width: 250px;  font-size: 0.94rem; background: #222; color: #fff;}  
input.w100 {max-width: unset;}

textarea { width: 100%; resize: none; height: 100px; border: 0; padding: 10px; background: #222; color: #fff;} 
select {
    padding: 0 30px 0 10px; font-size: 0.94rem; height: 40px; color: #fff; border: 0;
    background:url('../../img/icon_select_arr.png') no-repeat #222 calc(100% - 10px) 50%/13px 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: 40px; cursor: pointer; transition: all .3s;}
input[type="button"]:hover {background: var(--mainColor2); color: #fff;}


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

input[type="checkbox"],
input[type="radio"] {
    border: 1px solid #aaa; background: #000; vertical-align: middle; width: 18px; height: 18px; flex-shrink: 0;
} 
input[type="checkbox"]:checked,
input[type="radio"]:checked { border: 5px solid var(--mainColor2); } 
label { margin-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;}
.form_top {display: flex; align-items: flex-end; margin-bottom: 10px;}
.form_top .tit {flex: 1 0 0;}
.form_top .tit .big {font-size: 1.5rem; font-weight: 700;}
.form_top .tit .small {font-size: 1rem;}
.form_top .cmnt {padding-left: 22px; position: relative;}
.form_top .cmnt::before {
    display: block; content: "!"; width: 16px; height: 16px; border-radius: 100px; background: var(--mainColor2); color: #fff;
    position: absolute; top: 3px; left: 0; text-align: center; line-height:16px; font-size: 0.875rem;
}
.form_top .req {font-size: 0.875rem;}
.form_top .req span {color: var(--mainColor2); font-weight: 700;}
.form_terms {border:1px solid var(--border); word-break: break-all;}
.form_terms .terms {padding: 20px; font-size: 0.94rem; display: flex; flex-direction: column; gap: 30px; max-height: 180px; overflow-y: auto;}
.form_terms .terms .tit {font-weight: 700; margin-bottom: 5px;}
.form_terms .agree {padding: 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end;}
.form_btn {display: flex; align-items: center; justify-content: center; gap: 20px;}
.form_list {border-top: 2px solid #fff;}
.form_list > li {display: flex; gap: 20px; border-bottom: 1px solid #555;}
.form_list > li > div {padding: 20px 0; }
.form_list > li > .gubun {flex-shrink: 0; width: 200px; color: #ccc;}
.form_list > li.req > .gubun p:after {display: inline-block; content: "*"; color: var(--mainColor2); margin-left: 2px;}
.form_list > li > .naeyong {display: flex; flex-direction: column; gap: 10px; width: 100%;}
.form_list > li > .naeyong .cmnt {font-size: 0.875rem; padding-left: 25px; position: relative;}
.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 .input {display: flex; gap: 10px; width: 100%; align-items: center;}
.form_list .input input[type="button"] {width: 80px;}
.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%; color: #ccc;}
.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 .file {display: flex; gap: 10px; flex-wrap: wrap;}
.form_list .file label {
	border: 1px solid var(--mainColor2); background: var(--mainColor2); color: #fff; font-size: 0.94rem;
    padding: 10px; height: 40px; cursor: pointer; transition: all .3s; width: 80px; justify-content: center; margin-right: 0;
}
.form_list .file label:hover {background: var(--mainColor2); color: #fff;}
.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 .file span {flex-wrap: wrap; word-break: break-all; font-size: 0.875rem;}
.form_list .textareaMax {font-size: 0.875rem; color: #ccc;}
.form_list .account {display: flex; gap: 10px;}
.form_list .payMethod {display: flex; flex-direction: column ;}
.form_list .payMethod p {font-size: 0.875rem;}
.form_list .payMethod .method {font-weight: 700; font-size: 1rem;}

.deleteId {
    color: #ccc; margin: -40px 0 20px auto; display: block; width: 80px; height: 36px; line-height: 36px; text-align: center;
    border: 1px solid var(--border); font-size: 0.94rem;
}

.form_nt {background: #151515; padding: 30px; display: flex; flex-direction: column; gap: 30px;}
.form_nt .tit {font-size: 1.25rem; font-weight: 700; margin-bottom: 5px;}
.form_nt .text {display: flex; flex-direction: column; gap: 5px;}
.form_nt .text p {padding-left: 10px; position: relative; font-size: 0.94rem; color: #ccc;}
.form_nt .text p::before {display: block; content: "·"; position: absolute; left: 0;}

.form_tk {margin-bottom: 60px; display: flex; gap: 40px; justify-content: center;}
.form_tk_item {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.form_tk_item input {display: none;}
.form_tk_item label {display: flex; flex-direction: column; flex:  1 0 0;}
.form_tk_item input + label {border: 1px solid var(--border);}
.form_tk_item input + label .btn {background: #e9e9e9; color:#000;}
.form_tk_item input:checked + label {border: 1px solid var(--mainColor2); outline: 1px solid var(--mainColor2);}
.form_tk_item input:checked + label .btn {background: var(--mainColor2); border: 1px solid var(--mainColor2); color: #fff;}
.form_tk_item .box { padding: 40px; flex: 1 0 0; display: flex; flex-direction: column;}
.form_tk_item .name {font-size: 1.25rem;}
.form_tk_item .price {font-size: 2.5rem; font-weight: 700; margin-top: 20px; line-height: 1;}
.form_tk_item .cont {display: flex; flex-direction: column; gap: 10px; margin-top: 40px; flex: 1 0 0;}
.form_tk_item .text {position: relative; padding-left: 15px; line-height: 1.4;}
.form_tk_item .text::before {
    display: block; content: ""; width: 5px; height: 5px; background: var(--mainColor2);
    position: absolute; left: 2px; top: 7px;
}
.form_tk_item .text .big {font-size: 0.94rem;}
.form_tk_item .text .small {font-size: 0.875rem; color: #aaa;}
.form_tk_item .btn {overflow: hidden; height: 40px; width: 100px;  margin-top: 40px;}


.form_list .tk_view {position: relative;}
.form_list .tk_view .btn:hover {background: var(--mainColor2); color: #fff;}
.form_list .tk_view .hide {
    position: absolute; top: 100%; left: 0; width: max-content;  height: auto;
    padding: 10px; border: 1px solid var(--mainColor2); background: #fff; 
    flex-direction: column; gap: 10px; z-index: 1; display: none; color: #000;
}
.form_list .tk_view .hide .box {margin-bottom: 10px;}
.form_list .tk_view .hide .box:last-child {margin-bottom: 0;}
.form_list .tk_view .hide .tit {font-weight: 700; font-size: 0.875rem; color: var(--mainColor2);}
.form_list .tk_view .hide p {font-size: 0.83rem; padding-left: 10px; position: relative; margin-top: 5px; line-height: 1.2;}
.form_list .tk_view .hide p::before {display: block; content: "·"; position: absolute; left: 0;}

@media screen and (max-width:899px) {
    .form_top .tit .big {font-size: 1.25rem;}
    .form_list > li {flex-direction: column; gap: 10px; padding: 20px 0;}
    .form_list > li > div {padding: 0;}
    .form_list > li > .gubun {width: 100%;}

    .form_nt .tit {font-size: 1rem;}
    .form_nt .text p {font-size: 0.875rem;}

    .form_tk_item .box {padding: 30px;}
    .form_tk_item .name {font-size: 1rem;}
    .form_tk_item .price {font-size: 2rem; margin-top: 10px;}
    .form_tk_item .cont {margin-top: 30px;}
    .form_tk_item .text .big {font-size: 0.875rem;}
    .form_tk_item .text .small {font-size: 0.83rem;}
    .form_tk_item .btn {margin-top: 30px; font-size: 0.875rem;}

}

@media screen and (max-width:599px) {
    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="email"],
    input[type="tel"] {max-width: unset;}
    .form_list .input {flex-wrap: wrap;}
    .form_list .input.st2 {flex-wrap: nowrap;}
    .form_list .input .itemH {flex-wrap: wrap; gap: 5px;}
    .form_list .input .itemH .text {width: 100%;  }
    .form_list .input .itemH.name input {width: calc(50% - 2.5px); max-width: unset;}
    .form_list .email {flex-wrap: wrap;}
    .form_list .email input {width: calc(50% - 10px);}
    .form_list .account {flex-direction: column;}
    .form_list .account select {width: fit-content;}
    .form_list .account input {width: 100%;}
    .form_list .file input[type="text"] {flex: 1 0 0;}

    .form_nt {padding: 20px;}
    .form_tk {flex-direction: column; gap: 20px;}
    .form_tk_item .btn {width: 100%;}

    .form_list .tk_view {width: 100%;}
    .form_list .tk_view .btn {width: 100%;}
    .form_list .tk_view .hide {width: 100%; position: unset;}
    

}