@charset "utf-8";

h1 {position: fixed; left: 5%; top: 30px; z-index: 1000; width:260px; height: auto;}
.box {padding:170px 0; width: 100%;}

@media screen and (max-width : 1023px ){
	h1 {left: 6%; top: 4%; width: 50%}
}

@media screen and (max-width : 768px ){
	 h1 {left: 4%; top: 3%; width:65%; }
	.box {padding:120px 0; width: 100%;}
}

.none {display:none}

#mainArea {width: 100%; min-height: calc(100% - 80px);}

.box2 {width: 90%; margin: 0 auto; overflow: hidden;}
.box2 h2 img {height:4.5vw; width: auto; position: fixed;} 

.formCont {width: 55%; float: right;}
.form1 {color: #FFF; font-size: 14px; width: 100%; line-height: 1.6;}
.form2 {margin-bottom: 10px}
.form3 {margin-bottom: 20px;}
.form3:nth-last-of-type(1) {margin-bottom: 20px;}
.form3 input {width: calc(100% - 20px); min-height: 32px; padding: 5px 10px; border-radius: 2px; border: none; font-size: 14px;}
.form3 textarea {width: calc(100% - 20px); padding: 10px; border-radius: 2px; border: none; vertical-align: bottom; font-size: 14px;}

#mainArea .form4 {margin:40px 0 10px; padding-top: 20px; border-top:1px solid #444}
#mainArea .form5 {margin-bottom: 20px;}
.btn {color: #FFF; width: 100%; height: 52px; border: none;  text-align: center; border-radius: 26px; background-color: #444; font-size: 14px; margin: 20px auto 0px;}
.btn:hover {color: #000; transition: all 0.5s; background-color: #FFF; cursor: pointer}
.back {text-align: center; margin-top: 40px;}
.back:hover {opacity:0.7; transition: all 0.5s;}

@media screen and (max-width : 1023px ){
	.box2 {width: 88%;}
}

@media screen and (max-width : 768px ){
	input[type="submit"] {-webkit-appearance: none;}
	
	#mainArea {min-height:calc(100% - 40px);}
	
	.box2 {width: 92%;}
	.box2 h2 img {height:12vw; position: relative;} 
	
	.formCont {width: 100%; float:none;}
	.form1 {margin-top: 15vw;}

}