@charset "utf-8";
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {
  margin: 0;
  padding: 0;
}
fieldset, img {
  border: 0 none;
}
dl, ul, ol, menu, li {
  list-style: none;
}
input, select, textarea, button {
  vertical-align: middle;
}
button {
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
}
body {
  font-family: 'NanumBarunGothic', '돋움', 돋움, sans-serif;
  letter-spacing: 0;
  word-wrap: normal;
  -webkit-text-size-adjust: 100%;
}
html, body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #23293F;
  background-color: #F8F8F8;
}
.bg-survey {
  background-color: #FAF9F6;
}
a {
  color: #2176FF;
  text-decoration: underline;
  font-family: 'NanumBarunGothic', '돋움', 돋움, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}
a:active, a:hover {
  color: #105BD4;
  text-decoration: underline;
  font-weight: 700;
}
a:active {
  background-color: transparent;
}
.fw-bold {
  font-weight: 700 !important;
}
.fw-light {
  font-weight: 300 !important;
}
.color-gold {
  color: #886B25 !important;
}
.color-blue {
  color: #2176FF !important;
}
.color-navy {
  color: #23293F !important;
}
.color-red {
  color: #690028;
}
.color-error {
  color: #FF4040 !important;
}
.border-gold {
  border-bottom-color: #886B25 !important;
}
.border-blue {
  border-bottom-color: #2176FF !important;
}
.border-navy {
  border-bottom-color: #23293F !important;
}
.border-bluegray {
  border-bottom-color: #8E919B !important;
}
.border-mdf {
  border-color: #C0B18F !important;
}
.border-base {
  border-color: #DADEE4 !important;
}
.border-youth-mdf {
  border-color: #8DB7FC !important;
}
.page-title {
  width: 100%;
  border-bottom: 4px solid #DADEE4;
  min-height: 68px;
}
.page-title h1 {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: #23293F;
  margin-bottom: -4px;
  padding: 20px 20px;
  border-bottom: 4px solid transparent;
}
.page-title-survey {
  width: 100%;
  border-bottom: 2px solid #690028;
  min-height: 68px;
}
.page-title-survey h1 {
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: #690028;
  padding: 20px 20px;
  margin-bottom: -4px;
}
.page-title-survey h1 span {
  font-size: 21px;
  font-weight: 300;
}
.survey-question {
  background: url(../images/img-mark.png) 0 0 no-repeat;
  background-size: 24px 24px;
  padding-left: 32px;
  color: #23293F;
}
h1 {
  font-size: 28px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}
h2 {
  font-size: 24px;
  line-height: 24px;
  font-weight: 300;
}
h3 {
  font-size: 21px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}
.p14 {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  font-weight: 400;
  margin-bottom: 0.875rem;
}
.p16 {
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  padding: 0 24px;
}
.p21 {
  font-size: 1.3125rem;
  line-height: 2rem;
  font-weight: 400;
  padding: 0 24px;
}
ol, ul {
  margin-top: 0;
  padding-left: 2rem;
}
ul li {
  list-style-type: disc;
}
table ul li, table td, table th {
  white-space: nowrap !important;
}
.btn {
  border-radius: 4px;
  position: relative;
  min-width: 220px;
}
.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: none !important;
}
.btn-fill {
  color: #F8F8F8;
  background-color: #23293F;
  border-color: #23293F;
  font-weight: 400;
}
.btn-fill:hover, .btn-fill:focus, .btn-fill.focus {
  color: #F8F8F8;
  background-color: #181D2F;
  border-color: #181D2F;
  font-weight: 700;
}
.btn-fill-gold {
  color: #F8F8F8;
  background-color: #886B25;
  border-color: #886B25;
  font-weight: 400;
}
.btn-fill-gold:hover, .btn-fill-gold:focus, .btn-fill-gold.focus {
  color: #F8F8F8;
  background-color: #705514;
  border-color: #705514;
  font-weight: 700;
}
.btn-fill-blue {
  color: #F8F8F8;
  background-color: #2176FF;
  border-color: #2176FF;
  font-weight: 400;
}
.btn-fill-blue:hover, .btn-fill-blue:focus, .btn-fill-blue.focus {
  color: #F8F8F8;
  background-color: #105BD4;
  border-color: #105BD4;
  font-weight: 700;
}
.btn-fill-survey {
  color: #F8F8F8;
  background-color: #690028;
  border-color: #690028;
  font-weight: 400;
}
.btn-fill-survey:hover, .btn-fill-survey:focus, .btn-fill-survey.focus {
  color: #F8F8F8;
  background-color: #570021;
  border-color: #570021;
  font-weight: 700;
}
.btn-outlined {
  color: #23293F;
  border-color: #8E919B;
  font-weight: 400;
}
.btn-outlined:hover, .btn-outlined:focus, .btn-outlined.focus {
  color: #23293F;
  border-color: #23293F;
  font-weight: 700;
}
.w-680 {
  width: 680px !important;
}
.w-500 {
  width: 500px !important;
}
.w-340 {
  width: 340px !important;
}
.w-200 {
  width: 200px !important;
}
.w-90 {
  width: 90px !important;
}
header {
  width: 100%;
  margin-top: 40px;
}
header .container {
  max-width: 1200px !important;
  padding-left: 0;
  padding-right: 0;
}
.slogan-large {
  width: 100%;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 28px;
  font-weight: 700;
  color: #23293F;
  text-align: center;
  padding: 0.875rem 0;
}
.info-wrap {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 40px 80px;
  min-height: 210px ;
}
.code-wrap {
  background-color: #EEEADE ;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: #690028;
}
.select-wrap {
  min-height: 260px;
  background-color: #FFFFFF;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top: 4px solid transparent;
  text-align: center;
  padding: 40px 50px;
  margin: 0 30px;
}
.terms-wrap {
  background-color: #FAF9F6;
  padding: 40px;
  border-radius: 8px;
  text-align: left;
  margin-bottom: 0.875rem;
}
.terms-wrap ul li {
  font-size: 0.875rem;
}
.login-wrap {
  width: 700px;
  margin: auto;
  background: #ffffff;
  border-top: 1px solid #8E919B;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 50px 150px;
}
.notice-box {
  background-color: #EEEADE;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 0 24px;
}
.login-wrap .btn {
  display: block;
  width: 100%;
  padding: 1rem;
}
.error-message {
  font-size: 12px;
  line-height: 18px;
  color: #705514;
  text-align: left;
  margin-top: 8px;
}
.col-form-label {
  font-weight: 700;
}
.input-group-text {
  min-width: 100px;
  border-radius: 0;
  background-color: #23293F;
  border-color: #23293F;
  color: #F8F8F8;
  font-size: 0.875rem;
}
.form-control {
  font-size: 0.875rem;
  color: #23293F;
  background: #ffffff;
  border: 1px solid #DADEE4;
  border-radius: 0;
}
.form-control:focus {
  border-color: #23293F;
  box-shadow: none !important;
}
.form-control[readonly] {
  background-color: transparent;
  border-color: transparent;
}
.form-control::-webkit-input-placeholder {
  color: #8E919B;
}
.form-control::-moz-placeholder {
  color: #8E919B;
}
.form-control:-ms-input-placeholder {
  color: #8E919B;
}
.form-control::-ms-input-placeholder {
  color: #8E919B;
}
.form-control::placeholder {
  color: #8E919B;
}
input[type="radio"]{
  background-color: #FFFF;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  width: 21px;
  height: 21px;
  border: 1px solid #23293F;
  border-radius: 50%;
  outline: none;
}
input[type="radio"]:checked{
  background: radial-gradient( #23293F 50%, rgba(0, 0, 0, 0) 51%);
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid #23293F;
  border-radius: 50%;
  outline: none;
}
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;
  width: 20px;
  height: 20px;
  border: 1px solid #23293F;
}
input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 0;
margin-top: -10px;
font-size: 1rem;
line-height: 1;
width: 20px;
height: 20px;
color: #F8F8F8;
background-color: #23293F;
text-align: center;
}
.table {
  color: #23293F;
}
.table thead th {
  color: #F8F8F8;
  background-color: #23293F;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
}
.table tbody th {
  background-color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
}
.table tbody th, .table tbody td {
  border-bottom: 1px solid #8E919B;
  white-space: normal;
}
.table th, .table td {
  vertical-align: middle;
}
.table th {
  text-align: center;
}
.table td {
  font-size: 0.875rem;
  line-height: 1.5;
}
.table th, .table td .btn {
  white-space: nowrap;
}
.modal-header {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: 20px 24px;
}
.modal-body {
  font-size: .875rem;
  padding: 40px;
  min-height: 160px;
}
.modal-footer {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding: 20px 24px;
  -webkit-box-pack: justify!important;
  -ms-flex-pack: justify!important;
  justify-content: space-between!important;
}
.modal-footer button {
  min-width: 160px;
}
h5.modal-title {
  color: #23293F;
  font-weight: 700;
}
.menu {
  display: grid;
  grid-template-columns: 220px 4fr;
  grid-column-gap: 0;
  text-align: center;
}
#intro .container {
  padding: 0;
}
.grid-frame {
  display: grid;
  grid-template-columns: 40.875rem 1fr;
  grid-column-gap: 0;
}
.grid-frame2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0;
}
.grid-frame a,
.grid-frame2 a {
  color: #F8F8F8;
  text-decoration: none;
}
.grid-frame a:hover, .grid-frame a:focus,
.grid-frame2 a:hover, .grid-frame2 a:focus {
  color: #DADEE4;
}
.section-mdf {
  height: 550px;
  background: #886B25;
  vertical-align: middle;
  text-align: left;
  padding: 28px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  position: relative;
  white-space: nowrap !important;
}
.section-youth-mdf {
  background: #2176FF;
  vertical-align: top;
  text-align: center;
  padding: 28px;
  height: 290px;
  border-top-right-radius: 8px;
  white-space: nowrap !important;
  position: relative;
}
.section-diagnosis {
  background: #23293F;
  text-align: center;
  padding: 28px;
  height: 260px;
  white-space: nowrap !important;
  position: relative;
}
.section-counseling {
  background: #8E919B;
  text-align: right;
  padding: 28px;
  height: 260px;
  border-bottom-right-radius: 8px;
  white-space: nowrap !important;
  position: relative;
}
.section-mdf div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.section-diagnosis div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section-counseling div {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
}
.rowspan {
  grid-row: span 2;
}
.colspan {
  grid-column: span 2;
}
footer .container {
  max-width: 1200px !important;
  margin-top: 80px;
  padding: 0;
}
.text-copyright {
  border-top: 1px solid #8E919B;
  color: #23293F;
  font-size: 0.75rem;
  font-weight: 300;
  padding: 40px 40px;
  text-align: center;
}
section {
  display: flex;
  flex-flow: row wrap;
}
section > div {
  flex: 1;
  padding: 0.5rem;
  min-height: 240px;
}
section.money-power > div {
  min-height: 120px;
}
section > div input[type=radio] {
  display: none;
}
section > div input[type=radio] label {
  cursor: pointer;
}
section > div label {
  height: 100%;
  display: block;
  background: #EFEADC;
  border: 4px solid #D5C8A0;
  border-radius: 8px;
  position: relative;
  color: #705514;
}
section > div label h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  width: 100%;
  padding: 2rem;
  text-align: center;
}
section > div input[type=radio]:checked + label {
  border: 4px solid #690028;
  background: #D5C8A0;
  color: #690028;
}

@media (max-width: 992px) {
  header .container, footer .container, .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .slogan-large {
    font-size: 23px;
  }
  .rowspan {
    grid-row: span 1;
  }
  .login-wrap {
    width: 100%;
    padding: 50px;
  }
  .info-wrap {
    padding: 40px;
  }
  #intro .container {
    padding: 0 1rem;
  }
  .grid-frame {
    grid-template-columns: 1fr;
  }
  .grid-frame2 {
    grid-template-columns: 1fr;
  }
  .grid-frame2 .colspan {
    grid-column: span 1;
  }
  .section-mdf {
    height: 220px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 8px;
  }
  .section-youth-mdf {
    height: 220px;
    border-top-right-radius: 0;
    position: relative;
  }
  .section-diagnosis {
    position: relative;
    height: 170px;
  }
  .section-counseling {
    height: 170px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: relative;
  }
  .section-mdf div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .section-youth-mdf div, .section-diagnosis div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .section-counseling div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 28px;
  }
  .mt-5, .my-5 {
    margin-top: 3rem!important;
  }
  .notice-box {
    padding: 27px 16px 27px 0;
    margin: 0;
    font-size: 90%;
  }
  .page-title {
    font-size: 21px;
  }
  .p16 {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    padding: 0 16px;
  }
  .p21 {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 16px;
  }
  section {
    display: flex;
    flex-flow: column wrap;
  }
  section > div {
    min-height: auto;
  }
  section > div label {
    min-height: 110px;
    margin-bottom: 0;
  }
  section > div label h2 {
    font-size: 18px;
    line-height: 27px;
    padding: 1rem;
  }
  section.money-power {
    display: flex;
    flex-flow: row wrap;
  }
  section.money-power > div label {
    min-height: 40px!important;
  }
  .select-wrap {
    padding: 20px 30px;
    margin: 0;
}
}