@charset "utf-8";
/* contact us */
.main-visual-wrap { background: url("../../img/sub/contact/visual_img_01.png"); background-size: cover; background-position: center; }

/* 컨택트 */
.box-wrap.contact-wrap .content-area { width: 1170px; margin: 0 auto; }
.box-wrap.contact-wrap .content-area .info-area { float: left; background: #f7f7f7; padding: 50px 30px; width: 370px; border-radius: 5px; }
.box-wrap.contact-wrap .content-area .info-area .message h5 { font-size: 1.6rem; font-weight: bold; }
.box-wrap.contact-wrap .content-area .info-area .message p { font-size: 1.4rem; color: #666; line-height: 20px; margin-top: 10px; }
.box-wrap.contact-wrap .content-area .info-area .contact-info .info-name { font-weight: bold; font-size: 1.4rem; display: block; margin-top: 45px; margin-bottom: 8px; }
.box-wrap.contact-wrap .content-area .info-area .contact-info a,
.box-wrap.contact-wrap .content-area .info-area .contact-info address { letter-spacing: 0; font-size: 1.3rem; color: #666; line-height: 18px; cursor: default; }
.box-wrap.contact-wrap .content-area .form-area { float: right; background: #f7f7f7; width: 760px; padding: 50px 30px; border-radius: 5px; }
.box-wrap.contact-wrap .content-area .form-area input[type=text] { font-size: 1.4rem; height: 50px; border: 1px solid #ddd; padding-left: 18px; transition: border-color .25s ease; }
.box-wrap.contact-wrap .content-area .form-area input[type=text]:focus,
.box-wrap.contact-wrap .content-area .form-area input[type=text]:active { border-color: #2373ea; }
.box-wrap.contact-wrap .content-area .form-area .row { margin-bottom: 30px; }
.box-wrap.contact-wrap .content-area .form-area .row:last-child { margin-bottom: 0; }
.box-wrap.contact-wrap .content-area .form-area .row input[type=text] { width: 48%; }
.box-wrap.contact-wrap .content-area .form-area .row>input[type=text]:nth-child(1) { float: left; }
.box-wrap.contact-wrap .content-area .form-area .row>input[type=text]:nth-child(2) { float: right; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box { position: relative; width: 48%; height: 50px; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap { float: left; width: 100%; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box:nth-child(1) { float: left; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box:nth-child(2) { float: right; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box input[type=text] { width: 100%; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box label { position: absolute; top: 17px; font-size: 1.4rem; color: #999; left: 18px; pointer-events: none; transition: all .25s ease; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box label .imp,
.box-wrap.contact-wrap .content-area .form-area .row .text-area .imp { color: #ff0000; }
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box input[type=text]:valid + label,
.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box input[type=text]:focus + label { top: -20px; left: 3px; font-size: 1.2rem; color: #2373ea; }
.box-wrap.contact-wrap .content-area .form-area .row .text-area { position: relative; width: 100%; height: 220px; }
.box-wrap.contact-wrap .content-area .form-area .row .text-area textarea { width: 100%; height: 100%; border: 1px solid #ddd; overflow-y: auto; padding: 18px; transition: border-color .25s ease; font-size: 1.4rem; }
.box-wrap.contact-wrap .content-area .form-area .row .text-area textarea:focus,
.box-wrap.contact-wrap .content-area .form-area .row .text-area textarea:active { border-color: #2373ea; }
.box-wrap.contact-wrap .content-area .form-area .row .text-area label { position: absolute; top: 17px; font-size: 1.4rem; color: #999; left: 18px; pointer-events: none; transition: all .25s ease; }
.box-wrap.contact-wrap .content-area .form-area .row .text-area textarea:valid + label,
.box-wrap.contact-wrap .content-area .form-area .row .text-area textarea:focus + label { top: -20px; left: 3px; font-size: 1.2rem; color: #2373ea; }
.box-wrap.contact-wrap .content-area .form-area .submission-btn .recaptcha { float: left; }
.box-wrap.contact-wrap .content-area .form-area .submission-btn button { float: right; background: #2373ea; border: none; height: 50px; width: 200px; border-radius: 5px; color: #fff; font-size: 1.4rem; font-weight: bold; outline: 0; transition: box-shadow .25s ease,background .25s ease; }
.box-wrap.contact-wrap .content-area .form-area .submission-btn button:hover { box-shadow: 0 5px 15px -5px rgba(0,0,0,0.25); background: #1360D3; }

@media all and (max-width: 1250px)
{
	.box-wrap.contact-wrap .content-area { width: 100%; padding: 0 30px; }
	.box-wrap.contact-wrap .content-area .info-area { width: 33%; }
	.box-wrap.contact-wrap .content-area .form-area { width: 65%; }
}
@media all and (max-width: 780px)
{
	.box-wrap.contact-wrap .content-area .info-area { width: 100%; padding: 25px 20px 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
	.box-wrap.contact-wrap .content-area .info-area .contact-info .info-name { margin-top: 20px; margin-bottom: 4px; }
	.box-wrap.contact-wrap .content-area .form-area { width: 100%; padding: 40px 20px; border-top-right-radius: 0; border-top-left-radius: 0; }
	.box-wrap.contact-wrap .content-area .form-area .submission-btn button { width: 100%; margin-top: 10px; }
	.box-wrap.contact-wrap .content-area .form-area .row .text-box { height: 40px; }
	.box-wrap.contact-wrap .content-area .form-area input[type=text] { height: 40px; padding-left: 10px; }
	.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box label { top: 13px; left: 10px; }
	.box-wrap.contact-wrap .content-area .form-area .row .text-area textarea { padding: 10px; height: 180px; }
	.box-wrap.contact-wrap .content-area .form-area .row .text-area label  { left: 10px; top: 12px; }
	
}
@media all and (max-width: 420px)
{
	.box-wrap.contact-wrap .content-area .form-area .row input[type=text] { width: 100%; }
	.box-wrap.contact-wrap .content-area .form-area .row>input[type=text]:nth-child(1) { margin-bottom: 30px; }
	.box-wrap.contact-wrap .content-area .form-area .row .text-box-wrap .text-box:nth-child(1) { margin-bottom: 30px; }
	.box-wrap.contact-wrap .content-area .form-area .row .text-box { width: 100%; }
	
	.box-wrap.contact-wrap .content-area .form-area .submission-btn .recaptcha { width: 100%; }
	.box-wrap.contact-wrap .content-area .form-area .submission-btn .recaptcha img { width: 100%; }
}
/* 지도 */
.box-wrap.map-wrap { height: 540px; background: #f7f7f7; }