.contactSec{background-color: var(--clr_smWhite);}
.contactSec .secComTitBox{margin-bottom: 40px;}
.contactForm{
  display: flex; flex-direction: column; row-gap: 20px;
}
.contactForm__cont--tit{ font-weight: 700; color: var(--clr_black_mn); margin-bottom: 6px;}
.contactForm__cont input[type="text"],
.contactForm__cont--txtArea,
.contactForm__cont--agreeChk{
  background-color: #fff; 
  border: unset; border: var(--mix_brdr_btrDkr); border-radius: 9px;
  box-sizing: border-box; width: 100%;
  font-weight: 400; color: var(--clr_black_mn);
}
.contactForm__cont input[type="text"]{height: 46px;}
.contactForm__cont input[type="text"]::placeholder,
.contactForm__cont--txtArea textarea::placeholder{color: #ccc; font-weight: 400;}

.contactForm__cont--txtArea{
  height: auto; min-height: 100px;
  border-radius: 9px; box-sizing: border-box;
  flex: 1;
}
.contactForm__cont--txtArea textarea{
  width: 100%; height: 100%; border: unset; outline: unset;
  box-sizing: border-box; resize: none;
  font-size: inherit; font-weight: inherit; color: inherit;
}
.contactForm__cont--txtArea textarea::-webkit-scrollbar{width: 2px;}
.contactForm__cont--txtArea textarea::-webkit-scrollbar-track {
  background: var(--mix_clr_dkr);
}
.contactForm__cont--txtArea textarea::-webkit-scrollbar-thumb {
  background-color: var(--clr_black_ex);
}
@-moz-document url-prefix() {
  /* firefox 브라우져 css 별도 적용 */
  .contactForm__cont--txtArea textarea{
    scrollbar-color: rgba(0, 0, 0, 0.5) transparent; /* 스크롤바 색상 (thumb, track) */
    scrollbar-width: thin; /* 스크롤바 너비 (auto, thin, none) */
  }
}
.contactForm__contWrap{display: grid; grid-template-columns: repeat(1, 1fr); gap:20px;}
.contactForm__contWrap .contactForm__cont {width: 100%; display: flex; flex-direction: column;}
.contactForm__cont--agreeChk{padding: unset !important; border-radius: 9px;}

.agreeChk__chk{
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: var(--mix_brdr_btrDkr);
  position: relative;
}
.agreeChk__chk--label{ cursor: pointer ; height: 100%; line-height: 17px;}
.agreeChk__chk--label span{color: var(--clr_blue);}

.agreeChk__chk--input{display: none;}

.agreeChk__chk--input + .agreeChk__chk--label{
  cursor: pointer;
  position: absolute; top: 50%;
  transform: translateY(-50%);
  background-image: url(/assets/img/com/agreeChk.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.agreeChk__chk--input:checked + .agreeChk__chk--label::after{
  content:'';
  background-image: url(/assets/img/com/agreeChk.svg);
  filter: brightness(0) saturate(100%) invert(35%) sepia(61%) saturate(5483%) hue-rotate(201deg) brightness(109%) contrast(103%);
  position: absolute; left: 0; top:0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.agreeChk__info{color: var(--clr_black_ex);}
.agreeChk__info--txt{margin-bottom: 20px;}
.agreeChk__info--txt a{text-decoration: underline;}
.agreeChk__info--dtl .dtl--bold{font-weight: 700;}

/* 첨부파일 */
.contactForm__file label.upload-file{max-width: unset;}


/* ----------- 모바일용 스타일 ----------- */
@media (max-width: 768px) {
  .contactForm__cont--tit{font-size: 14px;  line-height: 24px;}

  .contactForm__cont input[type="text"],
  .contactForm__cont--txtArea,
  .contactForm__cont--agreeChk{padding: 10px; font-size: 12px;}

  .contactForm__cont input[type="text"]::placeholder,
  .contactForm__cont--txtArea textarea::placeholder{font-size: 12px;}

  .contactForm__cont input[type="text"]{height: 38px;}
  .contactForm__cont input[type="text"]::placeholder{text-indent: unset;}

  .contactForm__file label.upload-file{height: 38px;}
  .contactForm__file label.upload-file p{font-size: 12px; padding: 0 10px; line-height: 36px;}

  .contactForm__cont--txtArea,
  .contactForm__cont--txtArea textarea{padding: 5px;}

  .agreeChk__chk, .agreeChk__info{padding: 10px;}

  .agreeChk__info{line-height: 18px;}

  .agreeChk__chk--label{line-height: 14px; margin-top: 1px;}
  .agreeChk__chk--input + .agreeChk__chk--label{
    width: 18px; height: 18px;
    top: calc(50% - 1px); right: 10px;
  }
  .agreeChk__chk--input:checked + .agreeChk__chk--label::after{width: 18px; height: 18px;}
}  


/* ----------- 태블릿용 스타일 ----------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .contactForm__cont--tit{font-size: 16px;  line-height: 28px;}

  .contactForm__cont input[type="text"],
  .contactForm__cont--txtArea,
  .contactForm__cont--agreeChk{padding: 0 14px; font-size: 14px;}

  .contactForm__cont input[type="text"]::placeholder,
  .contactForm__cont--txtArea textarea::placeholder{font-size: 14px;}

  .contactForm__cont--txtArea,
  .contactForm__cont--txtArea textarea{padding: 7px;}
  .contactForm__cont--txtArea{min-height: 150px;}

  .contactForm__file label.upload-file p{font-size: 14px; padding: 0 14px;}

  .agreeChk__chk, .agreeChk__info{padding: 14px; } 

  .agreeChk__info{line-height: 20px;} 

  .agreeChk__chk--input + .agreeChk__chk--label{width: 22px; height: 22px; right: 14px;}
  .agreeChk__chk--input:checked + .agreeChk__chk--label::after{width: 22px; height: 22px;}
}


/* ---------- 데스크탑용 스타일 ---------- */
@media (min-width: 1024px) {
  .contactForm__cont--tit{font-size: 18px;  line-height: 34px;}

  .contactForm__cont input[type="text"],
  .contactForm__cont--txtArea,
  .contactForm__cont--agreeChk{padding: 0 20px; font-size: 16px;}

  .contactForm__cont input[type="text"]::placeholder,
  .contactForm__cont--txtArea textarea::placeholder{font-size: 16px;}

  .contactForm__cont--txtArea,
  .contactForm__cont--txtArea textarea{padding: 10px;}

  .contactForm__cont--txtArea,
  .contactForm__cont--agreeChk{border-radius: 18px;}

  .contactForm__file label.upload-file p{font-size: 16px; padding: 0 20px;}

  .contactForm__contWrap{grid-template-columns: repeat(2, 1fr); gap: 24px;}

  .agreeChk__chk, .agreeChk__info{padding: 16px 20px;}

  .agreeChk__info{line-height: 23px;}

  .agreeChk__chk--input + .agreeChk__chk--label{width: 24px; height: 24px; right: 20px;}
  .agreeChk__chk--input:checked + .agreeChk__chk--label::after{width: 24px; height: 24px;}
}