@charset "utf-8";

/* .main-visual-wrap { background: url("../../img/sub/contact/visual_img_01.png"); background-size: cover; background-position: center; } */
.main-visual-wrap { background-color: var(--dark-color); }

.section { padding-top: 0; }


.contact-wrap .form-area { position: relative; }
.contact-wrap .form-area input[type=text] { font-size: 1.4rem; height: 60px; border:0; border: 1px solid #c5c5c5; transition: border-color .25s ease; }
.contact-wrap .form-area input[type=text]:focus,
.contact-wrap .form-area input[type=text]:active { border-color: #aaa; }
.contact-wrap .form-area .row { margin-bottom: 30px; }
.contact-wrap .form-area .row:last-child { margin-bottom: 0; }
.contact-wrap .form-area .row input[type=text] { width: 48%; }
.contact-wrap .form-area .row>input[type=text]:nth-child(1) { float: left; }
.contact-wrap .form-area .row>input[type=text]:nth-child(2) { float: right; }
.contact-wrap .form-area .row .text-box { position: relative; width: 48.5%; height: 60px; }
.contact-wrap .form-area .row .text-box-wrap { float: left; width: 100%; }
.contact-wrap .form-area .row .text-box-wrap .text-box:nth-child(1) { float: left; }
.contact-wrap .form-area .row .text-box-wrap .text-box:nth-child(2) { float: right; }
.contact-wrap .form-area .row .text-box-wrap .text-box input[type=text] { width: 100%; color: #333; padding: 0 20px;}
.contact-wrap .form-area .row .text-box-wrap .text-box > label { position: absolute; top: 23px; font-size: 1.4rem; color: #555; left: 20px; pointer-events: none; transition: all .25s ease; }
.contact-wrap .form-area .row .text-box-wrap .text-box > label .ess,
.contact-wrap .form-area .row .text-area .ess { background: var(--main-blue); width: 4px; height: 4px; border-radius: 10px; display: block; position: absolute; top:0; right: -10px; }
.contact-wrap .form-area .row .text-box-wrap .text-box input[type=text]:valid + label,
.contact-wrap .form-area .row .text-box-wrap .text-box input[type=text]:focus + label { top: -17px; left: 0; font-size: 1rem; }
.contact-wrap .form-area .row .text-area { position: relative; width: 100%; height: 250px; }
.contact-wrap .form-area .row .text-area textarea { width: 100%; height: 100%; border:0; border: 1px solid #c5c5c5; overflow-y: auto; padding: 18px 20px; transition: border-color .25s ease; font-size: 1.4rem; resize: none; color: #333; }
.contact-wrap .form-area .row .text-area textarea:focus,
.contact-wrap .form-area .row .text-area textarea:active { border-color: #aaa; }
.contact-wrap .form-area .row .text-area label { position: absolute; top: 23px; font-size: 1.4rem; color: #555; left: 20px; pointer-events: none; transition: all .25s ease; }
.contact-wrap .form-area .row .text-area textarea:valid + label,
.contact-wrap .form-area .row .text-area textarea:focus + label { top: -17px; left: 0; font-size: 1rem; }
.contact-wrap .form-area .submission-btn .recaptcha { display: block; margin-bottom: 20px;}
.contact-wrap .form-area .submission-btn button { background: var(--main-blue); border: none; height: 60px; width: 100%; color: #fff; font-size: 1.4rem; font-weight: bold; outline: 0; transition: box-shadow .25s ease,background .25s ease; }
.contact-wrap .form-area .submission-btn button:hover { box-shadow: 0 5px 15px -5px rgba(0,0,0,0.25); background: var(--main-blue); }

.contact-wrap .form-area .row.file { border: 1px solid #c5c5c5; }
.contact-wrap .form-area .row.file .text-box-wrap { position: relative; }
.contact-wrap .form-area .row.file .text-box-wrap .text-box { float: none; width: 100%; height: auto; }
.contact-wrap .form-area .row.file .text-box-wrap .text-box .file-input { position: relative; padding-left: 100px; }
.contact-wrap .form-area .row.file .text-box-wrap .text-box .file-input > input[type='file'] { width: calc(100% - 100px); opacity: 0; position: absolute; top:0; right:0; display: block; cursor: pointer; line-height: 60px; z-index: 1;}
.contact-wrap .form-area .row.file .text-box-wrap .text-box .file-input > .label { color: rgba(0,0,0,0.4); font-size: 1.3rem; width: 100%; text-align: left; display: block; cursor: pointer; line-height: 60px;}
.contact-wrap .form-area .row.file .text-box-wrap .del-btn { position: absolute; top: 20px; right: 20px; color: #333; padding: 5px 9px; font-size: 1rem; font-weight: 600; background:rgba(0,0,0,0.2); border-radius: 3px; z-index: 3; cursor: pointer; background: transparent; border: 1px solid #b95b5b; color: #b95b5b; }

@media all and (max-width: 1250px)
{
	.contact-wrap .form-area { width: 65%; margin: 0 auto; }
	.contact-wrap .sec-width { width: 100%; }
}
@media all and (max-width: 780px)
{
	.contact-wrap .form-area { width: 100%; padding: 40px 0; border-top-right-radius: 0; border-top-left-radius: 0; }
	.contact-wrap .form-area .submission-btn button { width: 100%; height: 50px;  }
	.contact-wrap .form-area .row { margin-bottom: 25px;}
	.contact-wrap .form-area .row .text-box { height: 50px; }
	.contact-wrap .form-area input[type=text] { height: 50px; }
	.contact-wrap .form-area .row .text-box-wrap .text-box label { top: 17px; }
	.contact-wrap .form-area .row .text-area label { top: 17px; }
	.contact-wrap .form-area .row.file .text-box-wrap .text-box .file-input > .label,
	.contact-wrap .form-area .row.file .text-box-wrap .text-box .file-input > input[type='file'] { line-height: 40px; }
	.contact-wrap .form-area .row.file .text-box-wrap .del-btn { top: 5px; }
	
}
@media all and (max-width: 420px)
{
	.contact-wrap .form-area .row input[type=text] { width: 100%; }
	.contact-wrap .form-area .row>input[type=text]:nth-child(1) { margin-bottom: 30px; }
	.contact-wrap .form-area .row .text-box-wrap .text-box:nth-child(1) { margin-bottom: 30px; }
	.contact-wrap .form-area .row .text-box { width: 100%; }
	.contact-wrap .form-area .row.file .text-box-wrap .text-box { margin-bottom: 0; }
	
	.contact-wrap .form-area .submission-btn .recaptcha { width: 100%; }
	.contact-wrap .form-area .submission-btn .recaptcha img { width: 100%; }

	.contact-wrap .section-title .s-title { font-size: 1.2rem; line-height: 1.6; word-break: keep-all; }
	.contact-wrap .section-title .s-title b { font-size: 1.4rem; }
}


/* 지도 */
.map-wrap { height: 540px; background: #f7f7f7; }


.valid { font-size: 1.15rem; color: #e54040; padding: 5px 0; font-weight: 500; }
.valid:after { content: ""; display: block; clear: both; }