body { background-image: var(--bg-type-img2); transition: background-image 0.4s; }


input, button {margin:0; padding:0; font-family: Pretendard, Zodiak, sans-serif;}

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

.wd100 {width:100%;}

.dn {display:none;}

/* placeholder */
input[type="text"]::-webkit-input-placeholder {color:#888 !important;}
input[type="text"]::-moz-placeholder {color:#888 !important;}
input[type="text"]:-ms-input-placeholder {color:#888 !important;} /* IE11 needs the !important flag */​
textarea::-webkit-input-placeholder {
    color: #888 !important;
}
textarea:-moz-placeholder { /* Firefox 18- */
    color: #888 !important;  
}
textarea::-moz-placeholder {  /* Firefox 19+ */
    color: #888 !important;  
}
textarea:-ms-input-placeholder {
    color: #888 !important;  
}
textarea::placeholder {
    color: #888 !important;  
}

/* checkbox */
form input[type="checkbox"] {display:none;}
form input[type="checkbox"] + label {position:relative; padding-left:28px; /*vertical-align:middle;*/ cursor:pointer;}
form input[type="checkbox"] + label:before {
	position:absolute; left:0; top:50%; transform:translateY(-50%); transition: background 0.4s;
	display:inline-block; width:24px; height:24px; content:"";
	background:url('../images/icon_check.svg') no-repeat center center;
    background-size:24px auto;
}
form input[type="checkbox"]:checked + label:before {
    background:url('../images/icon_check_on.svg') no-repeat center center;
    background-size:24px auto;
}

@media all and (max-width:800px) {
	form input[type="checkbox"] + label {padding-left:22px;}
	form input[type="checkbox"] + label:before {width:18px; height:18px; background-size:18px 18px;}
	form input[type="checkbox"]:checked + label:before {background-size:18px 18px;}
}​ 


select::-ms-expand {display:none;}
select {
    -webkit-appearance:menulist;
    box-sizing:border-box;
    align-items:center;
    white-space:pre;
    -webkit-rtl-ordering:logical;
    color: black;
    background-color:white;
    cursor:default;
    border-width:1px;
    border-style:solid;
    border-color:initial;
    border-image:initial;
}
select::-ms-expand {display:none;}
select.select {
    font-family: Pretendard, Zodiak, sans-serif;
    clear:both;
    border:solid 1px #ddd; outline-style:none; vertical-align:middle;
    padding:0 2.34vw 0 0.78vw; height:90%; line-height:2; box-sizing:border-box;
    color:#4e4e4e; font-size:1.5vw; border-radius:0;
    background:#fff url('../images/chevron-down.svg') no-repeat right 0.8vw top 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    background-size:1.25vw auto;
}


@media all and (max-width:799px) {
	select.select {
        padding:0 5.62vw 0 1.87vw; height:6.87vw; line-height:6.87vw; font-size:2.8vw;
        background:#fff url('../images/chevron-down.svg') no-repeat right 10px center;
        background-size:3vw auto;
	}
}

.filebox {
	height:6.2vw; line-height:6.2vw; padding-left:2.08vw; 
	background:url('../images/upload-01.svg') no-repeat left center;
	background-size:1.25vw auto;
}	
.filebox .upload-name {
	width:calc(100% - 2.2vw); height:90%; line-height:90%;
	font-size:1.5vw; color:#222;
	background:#fff;
	border:0; outline-style:none;
}									
.filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
.filebox label {
	display:inline-block;
	width:1.82vw;
	height:1.82vw; line-height:1.82vw; padding:0; font-size:0;
	font-size:0;
	vertical-align:middle;
	cursor:pointer;
	text-align:center;
	background:url('../images/contact_add.svg') no-repeat center;
	background-size:1.25vw 1.25vw;

}

@media all and (max-width:799px) {
	.filebox {
		height:12.5vw; line-height:12.5vw; padding-left: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:"";}

.fl {float:left;}
.fr {float:right;}


/* 팝업 레이어 */
#popup {display:none; background:#fff; border:solid 2px #000;}
#popup .button.b-close {display:inline-block; width: 100%; height:40px;background-color: #f2f2f2;border-bottom:1px solid #eee;padding:12px 15px 0;}
#popup .button.b-close span {display:inline-block; cursor:pointer; padding:0 15px 0 0; position:absolute; right:0;}
@media all and (max-width: 799px) { 
    #popup {width:96%;}
}


.content { position: relative; z-index: 4; }

select.select {border:0;}
.contact-1 {position: relative;z-index: 3; padding:10.41vw 0 7.8vw; background:var(--contact-bg); transition: background 0.4s;}
.contact-1 > form {width:80%; margin:0 auto;}
.contact-1 h2 {font-size:4vw; color:var(--sub-txt-color); font-weight:800; line-height:1.15; }
.contact-1 h2 span {font-weight:200;}
.contact-1 .frm-tbl {margin-top:3.64vw;}
.contact-1 .frm-tbl > div {border:solid 1px var(--input-border); transition: border 0.4s; background:#fff;}
.contact-1 .frm-tbl > div li {height:6.2vw; line-height:6.2vw; padding:0 2.0vw; font-size:1.5vw; color:#222;}
.contact-1 .frm-tbl > div li span {color:#888; font-weight:400;}
.contact-1 .frm-tbl > div input[type=text],
.contact-1 .frm-tbl > div textarea {height:90%; line-height:90%; font-size:1.5vw; color:#222;}
.contact-1 .frm-tbl > div .textarea {/*height:24.8vw;*/ height: 31vw; line-height:inherit; padding:2.0vw; background:#fcfcfc;}
.contact-1 .frm-tbl > div .textarea textarea {background:#fcfcfc; resize:none;}
.contact-1 .frm-tbl > div li + li {border-top:solid 1px #ccc;}
.contact-1 .frm-tbl > div.tbl-left {float:left; width:49%;}

.contact-1 .frm-tbl > div.tbl-right {float:right; width:49%;}
.contact-1 .frm-tbl > div.tbl-right li span {color:#222;}
.contact-1 .frm-tbl > div.tbl-right li span:last-child {padding-left:2.0vw;}

.contact-1 .prv {margin-top:2.08vw;}
.contact-1 .prv > div {height:6.2vw; line-height:6.2vw; padding:0 2.0vw; font-size:1.04vw; color:#222; border:solid 1px var(--input-border); transition: border 0.4s; background:#fff;}
.contact-1 .prv > div span,
.contact-1 .prv > div span a {display:inline-block; font-size:1.3vw;}
.contact-1 .prv > div span:first-child a {
    padding-right:2.2vw; color:#222;
    background:url('../images/arrow-narrow-right.svg') no-repeat right 5px center;
    background-size:1.25vw;
}
.contact-1 .prv > div span:last-child {float:right; color:#777;}
.contact-1 .button {margin-top:3.2vw; text-align:center;}
.contact-1 .button .btn {
    display:inline-block; border:0; outline-style:none; background:#232323; border: 1px solid #f5f5f5; color:#fff;
    font-size:1.8vw; font-weight:700; width:20vw; height:6vw; cursor:pointer; transition: border 0.4s;
}


.contact-2 {background:var(--bg-color);background-image: var(--bg-type-img2); transition: background-image 0.4s;}
.contact-2 > div {position:relative; padding:7.8vw 0 7.8vw; width:80%; margin:0 auto;}
.contact-2 img {position:absolute; top:7.8vw; right:0; width:18.75vw; height:18.75vw;}
.contact-2 h2 {font-size:4vw; color: var(--sub-txt-color); font-weight:200; line-height:1.15; }
.contact-2 h2 span {font-weight:800;}

.contact-2 .info {margin-top:5.208vw;}
.contact-2 .info ul li {display:inline-block; margin-bottom:1.5625vw;}
.contact-2 .info ul li a {text-decoration:none;}
.contact-2 .info ul li a, .contact-2 .info ul li span {display:inline-block; font-size:2.083vw; color:var(--sub-txt-color); font-weight:600;}
.contact-2 .info ul li:first-child {display:block;}
.contact-2 .info ul li:last-child {margin-left:1.5625vw;}

.contact-2 p {margin-top:5.208vw; font-size:1.66vw; color:var(--sub-txt-color); line-height:1.7;}
.contact-2 p span {font-weight:600;}

.contact-3 {position:relative; margin:0 auto; padding-top:30%; width:100%;}
.contact-3 .map {position:absolute; top:0; left:0; width:100%; height:100%;}

@media all and (max-width: 639px) {
    .contact-1 > form, .contact-2 > div {width:90%;}
}

@media all and (min-width:640px) and (max-width: 1279px) {
    .contact-1 > form, .contact-2 > div {width:80%;}
}

@media all and (min-width: 1920px) {
    .contact-1 > form {width:62.5%;}
    .contact-2 > div {width:62.5%;}
    /* .contact-2 .info ul li a, .contact-2 .info ul li span {text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;} */
}

@media all and (min-width: 1920px) and (orientation: landscape) {
    select.select { background-size:24px auto; }
}

@media all and (max-width: 1919px) {
    .contact-3 {padding-top:40%;}
}

/* @media all and (max-width: 1200px) {
    .contact-1 {padding:16.66vw 3.57vw 12.5vw;}
    .contact-1 > form {width:85%;}
    .contact-2 > div {width:85%; padding:12.5vw 3.57vw 12.5vw;}
    .contact-2 img {top:12.5vw; right:3.57vw;}
    .contact-3 {padding-top:50%;}
}  */

@media all and (max-width: 799px) { 
    .contact-1 {padding:25vw 5vw 18.75vw;}
    .contact-1 h2 {font-size:7.5vw; word-break: keep-all;}
    .contact-1 .frm-tbl {margin-top:8.75vw;}
    .contact-1 .frm-tbl > div.tbl-left {width:100%;}
    .contact-1 .frm-tbl > div.tbl-right {width:100%; margin-top:5vw;}
    /* .contact-1 .frm-tbl > div li, .contact-1 .frm-tbl > div input[type=text], .contact-1 .frm-tbl > div textarea {background-color: #333;} */
    .contact-1 .frm-tbl > div li {height:12.5vw; line-height:12.5vw; padding:1px 5vw; font-size:2.9vw;}
    .contact-1 .frm-tbl > div.tbl-right li span:last-child {padding-left:5vw;}
    .contact-1 .frm-tbl > div input[type=text], .contact-1 .frm-tbl > div textarea {font-size:2.9vw;}
    .contact-1 .frm-tbl > div .textarea {height:50vw; padding:5vw;}
    .contact-1 .prv {margin-top:5vw;}
    .contact-1 .prv > div {height:12.5vw; line-height:12.5vw; padding:0 5vw; font-size:2.5vw;}
    .contact-1 .prv > div span a,
    .contact-1 .prv > div span {font-size:2.6vw;}
    .contact-1 .prv > div span:first-child a {
        padding-right:4vw;
        background:url('../images/arrow-narrow-right.svg') no-repeat right 3px center;
        background-size:3vw;
    }
    .contact-1 .button {margin-top:5vw;}
    .contact-1 .button .btn {width:35vw; height:10vw; font-size:2.75vw;}
    .contact-2 > div {padding:18.75vw 5vw 18.75vw;}
    .contact-2 img {top:18.75vw; right:8vw; display: none;}
    .contact-2 h2 {font-size:7.5vw;}
    .contact-2 .info {margin-top:12.5vw;}
    .contact-2 .info ul li {display:block; margin-bottom:3.75vw;}
    .contact-2 .info ul li a,
    .contact-2 .info ul li span {font-size:5vw;}
    .contact-2 .info ul li:last-child {margin-left:0;}
    .contact-2 p {margin-top:12.5vw; font-size:4vw;}
    .contact-3 {padding-top:80%;}
}   

@media all and (min-width: 1280px) {
    select.select { font-size: 22px; }
    .filebox .upload-name { font-size: 22px; }
    .filebox {
        height:89px; line-height:89px; padding-left:30px; 
        background-size:18px auto;
    }	
    .filebox .upload-name { width:calc(100% - 32px); height:90%; line-height:90%; font-size:22px;}									
    .filebox label {
        width:26px;
        height:26px;
        background-size:18px 18px;
    }

    .contact-1 {padding:150px 0 112px;}
    .contact-1 h2 {font-size:58px; line-height:1.15; }
    .contact-1 .frm-tbl {margin-top:52px;}
    .contact-1 .frm-tbl > div li {height:89px; line-height:89px; padding:0 29px; font-size:22px;}
    .contact-1 .frm-tbl > div input[type=text],
    .contact-1 .frm-tbl > div textarea {height:90%; line-height:90%; font-size:22px;}
    .contact-1 .frm-tbl > div .textarea {/*height:357px;*/ height:445px; line-height:inherit; padding:29px;}
    .contact-1 .frm-tbl > div.tbl-left {float:left; width:49%;}

    .contact-1 .frm-tbl > div.tbl-right {float:right; width:49%;}
    .contact-1 .frm-tbl > div.tbl-right li span:last-child {padding-left:29px;}

    .contact-1 .prv {margin-top:30px;}
    .contact-1 .prv > div {height:89px; line-height:89px; padding:0 29px; font-size:15px;}
    .contact-1 .prv > div span,
    .contact-1 .prv > div span a {display:inline-block; font-size:19px;}
    .contact-1 .prv > div span:first-child a {
        padding-right:32px;
        background-size:18px;
    }
    .contact-1 .button {margin-top:46px;}
    .contact-1 .button .btn {font-size:26px; font-weight:700; width:288px; height:86px;}

    .contact-2 > div {padding:112px 0 112px;}
    .contact-2 img {position:absolute; top:112px; right:0; width:270px; height:270px;}
    .contact-2 h2 {font-size:58px; font-weight:200; line-height:1.15; }
    .contact-2 .info {margin-top:75px;}
    .contact-2 .info ul li {display:inline-block; margin-bottom:23px;}
    .contact-2 .info ul li a {text-decoration:none;}
    .contact-2 .info ul li a,
    .contact-2 .info ul li span {display:inline-block; font-size:30px; font-weight:600;}
    .contact-2 .info ul li:last-child {margin-left:23px;}
    .contact-2 p {margin-top:75px; font-size:24px; line-height:1.7;}
}