
input,button { margin: 0; padding: 0; }
input[type=text],textarea { width: 100%; border: 0; outline: none; font-family: Pretendard, sans-serif; }
.wd100 { width: 100%; }

.filebox { position: relative; height: 6.2vw; line-height: 6.2vw; display: flex; align-items: center; background: none; }

.filebox .upload-name { flex:1; height:90%; line-height:90%; font-size:1.5vw; color:var(--sub-text-color) !important; background-color: transparent; border:0; outline-style:none; }

.filebox label { position: relative; width: 1.82vw; height: 1.82vw; line-height: 1.82vw; padding: 0; font-size: 0; cursor: pointer; text-align: center; margin-left: 0.5vw; background: none; }
.filebox label::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.25vw; height: 1.25vw; background: var(--contact-bg2) no-repeat center; background-size: 1.25vw 1.25vw; opacity: 1; pointer-events: none; }
input.upload-name:disabled { color: var(--sub-text-color) !important; -webkit-text-fill-color: var(--sub-text-color) !important; opacity: 1 !important; }


.filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


@media all and (max-width:640px) {
	.filebox { height: 12.5vw; line-height: 12.5vw; background-size: 3vw auto; }
	.filebox .upload-name { width: calc(100% - 5.2vw); font-size: 2.5vw; }
	.filebox label { width: 4.375vw; height: 4.375vw; line-height: 4.375vw; margin-top: -0.5vw; background-size: 3vw 3vw; }
}

.clear { zoom: 1; }
.clear:after { display: block; clear: both; content: ""; }
.fr { float: right; }
.contact-1 { position: relative; z-index: 3; padding: 6vw 0 7.8vw; }
.contact-1 > form { width: 80%; margin: 0 auto; display: block; }
.contact-1 .frm-tbl { width: 100%; }
.contact-1 .frm-tbl > div { border: solid 1px var(--input-border); transition: border 0.4s; display: block; }
.contact-1 .frm-tbl > div.tbl-right { width: 100%; }

.contact-1 .frm-tbl > div.tbl-left ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; padding: 0; margin: 0; list-style: none; }
.contact-1 .frm-tbl > div.tbl-left ul li { height: 6.2vw; line-height: 6.2vw; padding: 0; font-size: 1.5vw; border-top: none; display: flex; align-items: center; border-width: 1px 0; border-style: solid; border-color: var(--contact-color3); }

.tbl-left ::placeholder, .tbl-right textarea::placeholder { color: var(--sub-text-color); }
 

.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 3; }
.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3; }

.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(2),
.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(4) { margin-left: 60px; }

.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(3),
.contact-1 .frm-tbl > div.tbl-left ul li:nth-child(4) { margin-top: -1px; }

.contact-1 .frm-tbl > div.tbl-right ul { display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; }

.contact-1 .frm-tbl > div.tbl-right ul li.textarea, .contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea { padding-left: 0; margin-left: 0; }

.contact-1 .frm-tbl > div.tbl-right ul li.textarea { height: 28vw; margin-top: -1px; padding: 30px 0 30px 0; }
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea { width: 100%; height: 100%; box-sizing: border-box; background-color: transparent; resize: none; font-size: 1.5vw; line-height: 1.3; color: var(--contact-color3); display: block; overflow: auto; }

.contact-1 .frm-tbl > div.tbl-right ul li { height: auto; line-height: normal; padding: 0; border-width: 1px 0; border-style: solid; border-color: var(--contact-color3); margin-top: -1px; }

.contact-1 .frm-tbl > div input[type=text], .contact-1 .frm-tbl > div textarea, .contact-1 .frm-tbl > div input[type=file] { height: 90%; line-height: 1.3; font-size: 1.5vw; color: var(--contact-color3); width: 100%; background-color: transparent; }


.contact-1 .prv { display: none; }
.contact-1 .button { margin-top: 6vw; text-align: center; width: 100%; }
.contact-1 .button .btn { display: inline-block; border: 0; outline-style: none; background: var(--bg-color); border: 1px solid var(--contact-color3); color: var(--contact-color3); font-size: 1.4vw; font-weight: 400; width: 16vw; height: 5vw; cursor: pointer; transition: all 0.4s; }


/* textarea 내부 스크롤 */
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea::-webkit-scrollbar { width: 10px; background-color: transparent; }
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea::-webkit-scrollbar-button { display: none; }
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea::-webkit-scrollbar-track { background-color: transparent; }
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; }
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea::-webkit-scrollbar-thumb:hover { background: #555; }
.contact-1 .frm-tbl > div.tbl-right ul li.textarea textarea { scrollbar-width: auto; scrollbar-color: #888 transparent; }
