@charset "utf-8";

/* ===========================
	입력
=========================== */
input[type='text'],
input[type='number'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'],
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='time'],
input[type='week'],
input[type='file'],
input[type='password'],
textarea {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 20px;
  color: #222;
  font-size: 15px;
  line-height: 1.4;
  background-color: transparent;
  box-sizing: border-box;
  z-index: 0;
}

input[type='file'] {
  line-height: 32px;
}

textarea {
  width: 100%;
  height: 400px;
  padding: 16px 20px;
}

/* Readonly */
input[type='text']:read-only,
input[type='number']:read-only,
input[type='email']:read-only,
input[type='tel']:read-only,
input[type='url']:read-only,
input[type='password']:read-only,
textarea:read-only {
}

/* Disabled */
input[type='text']:disabled,
input[type='number']:disabled,
input[type='email']:disabled,
input[type='tel']:disabled,
input[type='url']:disabled,
input[type='password']:disabled,
select:disabled,
textarea:disabled {
  /* color: #d4d4d8 !important;
  background-color: #f4f4f4 !important;
  border-color: #f4f4f4 !important;
  opacity: 1; */
}

.form-group {}
.form-fild {display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 30px; text-align: left;}
.form-fild input,
.form-fild textarea {padding: 0;}
.form-fild > li {flex: 0 0 calc(50% - 8px);}
.form-fild > li.full {flex: 0 0 100%;}
.form-fild .form-check-box {overflow: hidden; position: relative; width: 18px; height: 18px; border: 1px solid #222222; border-radius: 3px; cursor: pointer; vertical-align: middle;}
.form-fild .form-check-box:checked:after {content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 1px; background: #000; transform: translate(-50%, -50%);}
.form-fild .form-input,
.form-fild .form-textarea {overflow: hidden; padding: 10px 20px; border: 1px solid #D9D9D9; border-radius: 4px; height: 52px; background: #fff;}
.form-fild .form-input inout,.form-fild .form-textarea textarea {font-size: 15px; line-height: 1.4;}
.form-fild .form-label {display: inline-block; font-weight: 500; font-size: 15px; line-height: 1.4; color: #222222; vertical-align: top;}
.form-fild .form-group .form-label {margin-bottom: 6px;}
.form-fild .form-textarea {height: 70px;}
.form-fild .form-textarea textarea {height: 100%;}
.form-fild .form-text {display: inline-block; font-weight: 700; font-size: 15px; line-height: 1.4; color: #222222; vertical-align: middle;}
.form-fild .form-text + .form-text {margin-left: 8px;}
.form-fild [class*=icon-logo].form-text {vertical-align: top;}
.form-fild .icon-works,
.form-fild .icon-things {line-height: 100%;}
.form-fild .select-area {display: flex; gap: 30px;}
.form-fild .select-area .select-label {position: relative; padding-left: 26px;}
.form-fild .select-area .select-label .form-check-box {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

.form-fild .select-area .link-item {font-size: 15px;}
.form-fild .select-area + .select-area {margin-top: 16px;}
.form-fild .select-area.select-all {padding: 10px 0; background: #F7F7F7;}
.form-fild .select-wrap {padding-top: 20px;}
.sqa-group .btn-area {padding-top: 30px;}
/* 에러 상태 */
.form-fild .form-input.error,
.form-fild .form-textarea.error {
  border-color: #e74c3c;
}
.form-fild .error-message {
  display: none;
  margin-top: 5px;
  color: #e74c3c;
  font-size: 12px;
  line-height: 1.4;
}
.form-fild .required {
  color: #e74c3c;
}
/* PC */
@media screen and (min-width: 1321px){
  .form-fild .select-area .select-label {line-height: 25px;}
}
/* MOBILE */
@media screen and (max-width: 767px){
  .form-fild > li {flex: 0 0 100%;}
  .sqa-group .form-fild .select-area {
    display: block;
  }
  .sqa-group .form-fild .select-area .select-label {
    display: block;
  }
}


/* ========================================
   footer 뉴스레터 버전
======================================== */
.newsletter-form-fild {display: flex; flex-wrap: wrap; gap: 6px;}
.newsletter-form-fild input::placeholder,
.newsletter-form-fild input::-moz-placeholder,
.newsletter-form-fild input:-ms-input-placeholder,
.newsletter-form-fild input:-moz-placeholder ,
.newsletter-form-fild textarea::placeholder,
.newsletter-form-fild textarea::-moz-placeholder,
.newsletter-form-fild textarea:-ms-input-placeholder,
.newsletter-form-fild textarea:-moz-placeholder {color: #888;}
.newsletter-form-fild input,
.newsletter-form-fild textarea {padding: 0; color: #fff;}
.newsletter-form-fild > li {flex: 0 0 calc(50% - 3px);}
.newsletter-form-fild > li.full {flex: 0 0 100%;}
.newsletter-form-fild > li.full .fild {width: 100%; padding-right: 123px;}
.newsletter-form-box {display: flex; align-items: center; gap: 20px; height: 52px; padding: 10px 10px 10px 20px; background: #222222; border: 1px solid #1E1E1E; border-radius: 4px; box-sizing: border-box;}
.newsletter-form-box .tit {flex: none; font-size: 15px; color: #FFFFFF; line-height: 1.4; text-transform: uppercase;}
.newsletter-form-group {position: relative;  margin-top: 30px;}
.newsletter-form-group .btn-area .btn-submit {position: absolute; right: 10px; bottom: 10px;}
/* MOBILE */
@media screen and (max-width: 1023px){
  .newsletter-form-fild > li {flex: 0 0 100%;}
  .newsletter-form-group {margin-top: 50px;}
  .newsletter-form-group .btn-area {margin-top: 6px;}
  .newsletter-form-group .btn-area .btn-submit {position: static;}
}