/* contact */
/*
#contact{ padding: 3% 0;}
#contact .top{text-align: center;}
#contact form{ border-top: 2px solid #ddd; margin: 10px 0; padding: 3% 2%; }
#contact form > div:after{display: block; content: ''; clear: both;}
#contact form > div > *{float: left; }
#contact label{ float: left; display: inline-block; width: 22%; }
#contact input, select, textarea { width:78%}
#contact .number select{ width:20%; margin-right: 1%;}
#contact .number input{ width:57%; }

#contact .help input{ width:78% }
#contact .help > div{ width: 78%; }
#contact .help label{ width:100%; }
#contact .help .required{width:22%; }

#contact .notice{padding-left: 22%;}
#contact .notice label{ width: auto;}
#contact .btn-wrap .btn-border{display: inline-block; width:auto; float: right;}

.btn_close{ position: absolute; top:-40px; right:0; display: block; width: 35px; height: 35px; cursor: pointer; }
.btn_close img{width: 100%; }
*/

section{margin: 0 !important;}
#contact .sub-bannner{ height: 530px; background: url(/resources/img/sub/about/banner-contact2.jpg) 50% 50% no-repeat; background-size: cover; background-attachment:fixed; text-align: center; color:#fff; vertical-align: middle; padding: 5em 0;}
#contact .sub-bannner *{max-width: 616px; width: 100%; margin: auto;}
#contact .text-wrap label{display: none;}

.formWrap{ margin-top: -13em; color: #444; padding-bottom: 3em;}
.formWrap ._container_big{box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.26)}
.formWrap [class$="Wrap"]{float: left; width: 50%; border: 1px solid #ddd;padding: 3em;background: #fff;}
.formWrap .emailWrap{border-right: 0;}

.formWrap [class$="Wrap"] h2.title{ position: relative; text-align: center;margin-bottom: 1.5em; padding-bottom: 1.2em; font-weight: 400;}
.formWrap [class$="Wrap"] h2.title:after{ position: absolute; left:50%; bottom:0; margin-left: -25px; width: 50px; height: 2px; content: '';}
.formWrap .infoWrap .title{color:#175590;}
.formWrap .infoWrap h2.title:after{background-color:#175590;}
.formWrap .emailWrap h2.title{color:#c81d31}
.formWrap .emailWrap h2.title:after{background-color: #0074b6; }

.infoWrap{ margin-right: -1px; }
.infoWrap h3{font-size: 1em; margin-bottom: .2em;}
.infoWrap form [class$="box"]{ float: left; width: 100%; }
.infoWrap form [class$="box"]:nth-child(odd){margin-right:4%;}
.infoWrap input[type="checkbox"]~label{ float: left; width: 50%; display: block; font-size: 15px}

.infoWrap div:last-child{display: table;margin: 0;}
.infoWrap div:last-child > div{display: table-cell;vertical-align: bottom;}
.infoWrap .textarea{width: 100%;margin-right: 4%;}
.infoWrap textarea{margin: 0;}
.infoWrap .btn-wrap{width: 35%;padding-left: 3%; margin: 0;}

.infoWrap .btn-border{color:#175590; border-color: #175590; margin-bottom: 8px;}
.infoWrap .btn-border:hover{color: #fff; background-color: #175590;}
.emailWrap .btn-border{color:#c81d31; border-color: #c81d31;}
.emailWrap .btn-border:hover{color: #fff; background-color: #c81d31;}
.emailWrap .btn-wrap{ margin: 3.6em 0 0 0;}
.emailWrap p{ margin: 3em 0;}

input[type='checkbox']{position: relative; display: none; width: auto !important;}
input[type="checkbox"] + label span { display: inline-block; width: 18px; height:18px; background: #eee; border: 1px solid #aaa; vertical-align: bottom; cursor: pointer; margin-right: 6px; margin-bottom:6px;}
input[type="checkbox"]:checked + label span{ position: relative; }
input[type="checkbox"]:checked + label span:after{position: absolute; top:3px; left:3px; width:10px; height:10px; display: block; content: ''; background: #444;} 


/*
**
**      하단 폼
**
*/
.cont-info{display: table; width: 100%; background: #535353;}
.cont-info > div{ display: table-cell; width: 50%; height: 100%; vertical-align: middle; }
.cont-info .map{overflow: hidden;}
.cont-info #map{height: 46vh;}
.cont-info .info{background:#535353; color: #d2d2d2; padding: 2em 0 2em 10em;}
.cont-info .info h2{color: #fff;}
.cont-info .info p{position: relative; padding-bottom: 1.5em; margin-bottom: 1.5em;}
.cont-info .info p:after{position: absolute; left:0; bottom:0; width: 35px; height: 1px; content: ''; background: #d2d2d2;}
.cont-info .info li{font-size: .9em;}



/* 
** 
**    m e d i a q u e r y 
** 
*/ 
@media (min-width:960px){ /*960이상*/
	.formWrap [class$="Wrap"]{height: 620px;}
}

@media (max-width:960px){
	#contact .sub-bannner{height: 430px;}
	.formWrap [class$="Wrap"]{ float:none; width: 100%; height: auto; padding: 2em;}
    #contact form > div:not(.btn-wrap) > *{float: none; width: 100%}
    #contact form .help .required{width: 100%;}
	#contact .number select{ width:32%;}
    #contact form .number input{float: left; width:67%}
    #contact form .number select{float: left; }
    #contact .notice{padding: 0;}
    #contact form .btn-wrap{width: 100%; margin: 0em;}
    #contact form .btn-wrap label{ width:100%; text-align: left;}
	.infoWrap div:last-child{display: block;}
	.infoWrap div:last-child > div{display: block; width: 100%;}
	#contact form .btn-wrap{margin-top: 2em;}

	.cont-info{ display: block; padding: 3em; padding-bottom: 1em; text-align: center; }
	.cont-info .info{padding:0; padding: 1em;}
	.cont-info .info p{margin-bottom: .8em; padding-bottom: .8em;}
	.cont-info .info p:after{left:50%; height: 1px; width: 20px; margin-left:-10px;}
	.cont-info > div{display: block; width: 100%;}
}


@media (max-width: 767px){ /* iPad */
    #contact form .btn-wrap .btn-border{float: none; margin: 0;}
	#contact .txt-left{ float: none; width:100%; margin: 15px 0;}
    #contact .txt-right{ float: none; width: 100%; padding-left:0;}
    #contact .form .txt-left > p{margin-bottom: 8px;}
	#contact .sub-bannner{background-attachment:initial;}	
}

@media (max-width:480px){  

}