html {overflow-y:scroll}
body {margin:0;padding:0;font-size:14px; font-family:"Noto Sans KR", dotum; font-weight:300; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
img {width:100%; display:block;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ol, ul, nav ul {margin:0;padding:0;list-style:none}
button {cursor:pointer}
input, button { margin:0; padding:0; }
label {font-size: 1.0rem;}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
table { border-spacing: 0; border-collapse: collapse; background-color: transparent; }

a { color: #5A738E; text-decoration: none; }
a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: 0 !important; }
a:hover, a:focus { text-decoration: none; }
*, *:before, *:after { box-sizing: border-box; }
select { background-color: white; -webkit-appearance: menulist; align-items: center; white-space: pre; border-width: 1px; border-style: solid; }
input[type="checkbox" i] { margin: 3px 3px 3px 4px; }
input[type="radio" i] { margin: 3px 3px 0px 5px; }
input[type="image"] { cursor: pointer; }

.txt {font-size:1.05rem; line-height: 160%; font-weight: normal; text-align: justify; word-break: break-all; padding:5% 5% 8% 5%}

.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }
.txt-underline { position: relative; }
.txt-underline:after { content: ''; width: 100%; height: 1px; display: block; position: absolute; margin-top: 5px; border-bottom: 1px solid #f00; }


.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color:#007aff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
textarea.form-control { height: auto; resize:none; }
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group[class*="col-"] {
  float: none;
  padding-right: 0;
  padding-left: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.input-group { position: relative; display: inline-block; vertical-align: middle; }
.input-group-justified { display: table; width: 100%; table-layout: fixed; border-collapse: separate; }
.input-group-justified>.input-group { display: table-cell; float: none; width: 1%; padding: 0 2px; }
.input-group-justified>.input-group:first-child>.form-control { margin-left: -2px; }
.input-group-justified>.input-group:last-child>.form-control { margin-left: 2px; }

.btn { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

#container { background-color: #FFFFFF; }
#container, #company { margin-right: auto; margin-left: auto; }

.imgBox { position:relative; }
.imgBox img, .ADBox img, .banner img { display:block; max-width: 100%; height: auto; }
.imgCenter img { margin-left: auto; margin-right: auto; }
.formBox { position:relative; padding:20px 20px; z-index: 999; }
.formBox table { width: 100%; max-width: 100%; table-layout: fixed; }
.formBox table > tbody > tr > th, .formBox table > tbody > tr > td { padding:6px 0; }
.formBox table > tbody > tr > th { width: 15%; padding-right:10px; text-align:left; white-space: nowrap; letter-spacing: -1px; color:#333; }
.formBox table > tbody > tr > td label { display:inline-block; min-width:18%; }
.formBox input[type='text'], .formBox input[type='number'], .formBox select { padding:4px 6px; max-width:100%; }
.formBox input, .formBox textarea {}
.formBox textarea { width:100%; padding:4px 6px; resize:none; }
.formBox .th-name { width:20%; }
.formBox .in-phone { width:93%; }
.formBox .in-age { width:50% }

.formBox {background-color:#efefef;}
.form-header h4 {font-size:1.0rem; font-weight: bold; color:#333; margin-bottom:10px;}

.dbbox1, .dbbox2, .dbbox3 {margin:1% 3% 3% 3%}
.dbbox1, .dbbox2, .dbbox3 {color:#333;}
.dbbox1 ul, .dbbox2 ul, .dbbox3 ul {display: flex; align-items: center; justify-content: space-between}
.dbbox1 ul li {width: 25%}
.dbbox2 ul li {width: 20%}
.dbbox3 ul li {width: 50%}

.form-header { margin: 0 -10px; padding: 10px; }
.form-header input[type='radio'], .form-header input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0}
.form-header input[type='radio']+ label, .form-header input[type="checkbox"] + label {  width:90%; height:30px; line-height:30px; border-radius:5px; text-align: center; background-color:#cecece; margin-bottom:10px; margin-left:10%; display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.form-header input[type='radio']:checked+ label, .form-header input[type="checkbox"]:checked + label {  width:90%; height:30px; line-height:30px; text-align: center; background-color:#007aff; color:#fff; display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
/* .form-header input[type='radio']+ label:before, .form-header input[type="checkbox"] + label:before{
	content: ' '; display: none; width: 16px; height: 16px;  line-height: 16px; margin: -2px 8px 4px 0; text-align: center; vertical-align: middle; background: #cecece;}
.form-header input[type='radio']:checked + label:before, .form-header input[type="checkbox"]:checked + label:before{
	content: '\2714'; display:inline-block; color: #fff; background: #455cc1; } */
	
.form-header img { display:block; max-width: 100%; height: auto; margin: 0 auto; }
.form-body { /* margin: 0 -10px; */ padding: 20px 5px; width:100%; }
.form-footer { /* margin: 0 -10px; */ padding: 20px; }
.form-body-notice { text-align: center; }
.form-body p { margin: 15px 0; text-align: center; }
.txtBox { position: relative; padding: 4%; text-align: justify; overflow: hidden; }
.txtBox p { font-size: 1.3em; color: #444; line-height: 150%; font-weight: 500; letter-spacing: -0.05em; margin-bottom: 5%; }
.txtBox p.title { font-size: 2em; font-weight: 700; color: #333; }
.txtBox p:last-child { margin-bottom: 0%; }
.agreement{ display:none; padding:10px; margin:0 0 20px 0;border:1px solid #C2C2C2;border-radius:5px;text-align:left;background-color:#fff;}
.agreement h3{margin:0;line-height:25px;padding:0;color:#444;font-size:10pt;}
.agreement ol li{margin:0;padding:0;line-height:19px;font-size:9pt;color:#444;}
.btn-agree { text-align:center; margin-bottom:10px;}
.btn-agree a, .btn-agree a:hover { color:#aaa;}
.btn-agree a { display:inline-block; }
.btn-agree span {color:#333;}
.btn-submit input{ display:inline-block; max-width: 100%; height: auto; }
.btn-submit img { display:inline-block; max-width: 100%; height: auto; }
.btn-submit { text-align:center; margin:25px auto 10px; }
footer.footer { padding: 3%; font-size: 14px; text-align: center; color: #aaa; }
footer p.cp-title { font-size: 1.7rem; }

@media (min-width: 732px) {
	#container, #company { width: 731px; }
	.formBox { padding:20px 40px; }
}
@media (max-width: 731px) {
	#container, #company { width: 100%; }
	label {font-size: 1.0rem;}
}

@media (min-width: 420px) {
	.formBox table > tbody > tr > th { width: 15%; padding-right:10px; text-align:left; white-space: nowrap; }
}