@charset "UTF-8";
@import url(html5_reset.css);

html, body {  position: relative;  height: 100%;}
html {background: url(../images/background.gif);}
body {
  background: #787878;
  font-family: 'NanumBarunGothic', 나눔바른고딕, 맑은고딕, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0;
  max-width: 800px;
  margin:0 auto;
  min-width: 320px;
  color:#888888;
  }
img {max-width: 100%;}


input[type="text"], input[type="tel"], input[type="password"], textarea {padding: 1% 4%;border-radius: 5px;border:1px solid #d3d3d3;color: #888;font-size: 1em;height: 23px;}



.fLeft { float: left !important;}
.fRight{ float: right !important;}
.TextL {text-align: left !important;}
.TextC {text-align: center !important;}
.TextR {text-align: right !important;}

.mb0 {margin-bottom: 0 !important;}



#container { overflow: hidden; width: 100%; max-width: 800px; position: relative; min-height: 100%; background: #fff; }

/*header*/
header {padding: 20px 3% 15px;background: #3c3e48;position: relative;overflow: hidden;}
header h1 {float: left;width: 11%;/* width:24%; */margin-right: 3%;}
header h1 img {
}

header form .form {width: 66%;float: left;}
header form .form input[type=text] {width: 91%;}
header form .form p {margin-bottom: 5px;}
header form .form p.phone input[type="text"] {width: 20.6%;}
header form .form p.phone input[type="tel"] {width: 20.6%;}
header form .form p.phone span {display: inline-block;width:6%; text-align: center; }
header form .send {width: 18%;float: right;}
header form .send input {width: 100%;}
header form .send button {
	font-size: 18px;
	border-radius: 4px;
	color: #2a2a2a;
	border:1px solid #dfb725;
	width: 100%;
	height: 100%;
	display: block;
	font-weight: 600;
	line-height: 20px;
	padding: 11px 0;
	cursor: pointer;
	letter-spacing: -1px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd56b+0,f2b900+100 */
background: #ffd56b; /* Old browsers */
background: -moz-linear-gradient(top, #ffd56b 0%, #f2b900 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffd56b 0%,#f2b900 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffd56b 0%,#f2b900 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd56b', endColorstr='#f2b900',GradientType=0 ); /* IE6-9 */
}

header form label {font-size: 12px; color: #fff;}

section > img {display:block;}
section > div {margin-top: 0;z-index: 2;position: relative;}
section > div > ul {margin: 0 ;overflow: hidden;}
section > div > ul li {width: 50%;float: left;display:block;text-align: right;}
section > div > ul li:first-child {text-align: left;}
section > div > ul li a {display: block;line-height: 0;}

/*pc*/
@media screen and (max-width: 320px) {
	header form .form p.phone input[type="text"] {width: 20.05%;}
	header form .form p.phone input[type="tel"] {width: 20.05%;}
	header h1 {width: 15%;}
	header form .form {width: 63%;}
	header form .form input[type=text] {width: 90%;}
	header form .form input[type=tel] {width: 90%;}
}

 @media screen and (min-width: 321px) and (max-width: 599px){
	header form .form p.phone input[type="text"] {width: 20.05%;padding: 0 4%;}
	header form .form p.phone input[type="tel"] {width: 20.05%;padding: 0 4%;}
	header h1 {}
	header form .form {width: 64%;}
	header form .form input[type=text] {w;width: 90%;}
	header form .form input[type=tel] {w;width: 90%;}
	header form .send button {}
}

@media screen and (min-width: 600px) {
	header form .form input[type=text] {width: 90.3%;padding: 2% 4%;}
	header form .form input[type=tel] {width: 90.3%;padding: 2% 4%;}
	header form .send button {padding: 15px 0;font-size: 2em;line-height: 1.5em;}
	footer a { font-size: 12px; letter-spacing: 1px;}
	section > img {display:block;}
	header form .form p {margin-bottom: 10px;}
}