@charset "UTF-8";

/* 타이틀 */
.title-container .page-title { font-size:64px; font-weight:700; text-align:center; line-height:1; margin-top:175px; }
.title-container .page-desc { font-size:18px; text-align:center; line-height:1; margin-top:44px;}
.title-container .page-desc br { display:none }
.title-container .img-banner { margin:80px auto; display:flex; align-items:center; justify-content:center; }
.title-container .img-banner img {width:90vw; max-width:452px; }

/* 뉴스레터 */
.newsletter-img-banner {
  background-image: url('/assets/app/img/newsletter-banner-pp.png');
  background-repeat: no-repeat;
  background-position: 248px;
  background-color: #C8D6F1;
  width: 100%;
  max-width: 452px;
  height: 200px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-self:center;
  justify-content: center;
  position: relative;
  margin-top:80px;
}
.newsletter-img-banner .text-area { position:absolute;left:48px;}
.newsletter-img-banner .text-area .sup{ font-weight:700;padding-left:4px;}
.newsletter-img-banner .text-area .title{ font-size:60px;font-weight:700;line-height:64px;}
.newsletter-img-banner .text-area .btn-wrap{ margin-top:16px;padding-left:4px;}
.newsletter-img-banner .text-area .btn-wrap a{ background-color: #222;padding: 4px 24px;color: #fff;border-radius: 24px;}

/* 폼 */
.form-container{ margin:120px 0 160px }
.form-container .form-group .group-title { font-size:18px; font-weight:700; letter-spacing:-1px; line-height:1.6; padding:5px 0 14px; border-bottom:1px solid #E1E7EA }
.form-container .form-group + .form-group { margin-top:58px }
.form-container .form-group .group-info { margin-top:24px }
.form-container .form-group .form-element-wrap { display:flex; flex-wrap:wrap; column-gap:32px; justify-content:space-between }
.form-container .form-group .form-element-wrap .form-element { flex:1; flex-basis:48%; padding:24px 0 0 }
.form-container .form-group .form-element-wrap .form-element label { display:inline-block;font-size:16px;margin-bottom:15px;}
.form-container .form-group .form-element-wrap .form-element label.agree-check { display:flex!important;align-items:center!important;margin-bottom:0!important;}
.form-container input, .form-container select, .form-container textarea {
  width: 100%;
  height:50px;
  background-color: #F3F5F9;
  padding: 13px 16px;
  border: 1px solid #E4EAF5;
  border-radius: 4px;
  font-family: 'Spoqa Han Sans', 'Sans-serif';
  font-size: 16px
}
.form-container textarea { resize:vertical; height:unset; font-size:16px; line-height:1.5 }
.form-container input::placeholder {
  color:#AAB3C5;
}
.form-container select:invalid { color: #AAB3C5 }
.form-container select {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:url('/assets/app/img/select-arrow-3.svg') no-repeat center right 18px #EEF0F4;
  padding-right: 40px;
}
.form-container input[type=checkbox] { width:unset; height:unset }
.form-container input:hover, .form-container input:focus,
.form-container select:hover, .form-container select:focus
.form-container textarea:hover, .form-container textarea:focus
{ outline:none; border: 1px solid #BED0FE; }
.form-container .form-group .group-info + .form-element-wrap .form-element { padding-top:16px }
.form-container .form-group .form-element-wrap .info-container { border:1px solid #E4EAF5; border-radius:4px; padding:24px; color:#666666 }
.form-container .form-group .form-element-wrap .info-container ul { margin-top:24px }
.form-container .form-group .form-element-wrap .info-container ul li { margin-top:24px; padding-left: 18px; text-indent: -18px; }
.form-container .btn-area { margin-top:43px; text-align:center; }
.form-container .btn-area button.btn-submit { border-radius:24px; border:none; background-color:#1C64FF; color:#fff; font-size:16px; font-weight:700; padding:12px 60px;cursor:pointer;}

/* reCAPTCHA */
.recaptcha-wrap { display:flex;justify-content:center;margin:24px 0;}

/* ========== 모바일(<=768px) ========== */
@media (max-width:768px){
  .header { display:none }
  .sub-header { display:block }

  .content-section .hero { display:none }
  .content-section .mds-submenu { display:none }
  .content-section .wrap, .content-section .caption {
    width: 100%;
  }
  .title-container .page-title { display:none }
  .title-container .page-desc { font-size:16px; line-height: 1.55;padding:0 16px;}
  .title-container .page-desc br { display:block }
  .title-container .img-banner { margin:40px auto; }

  .newsletter-img-banner { margin-top:40px;width:calc(100vw - 32px);background-position:right;}
  .newsletter-img-banner .text-area { left:32px; }

  /* 폼 */
  .form-container{ margin:32px 0 80px; padding:0 16px }
  .form-container .btn-area button.btn-submit { width:100% }
}