@charset "UTF-8";
/* ================================
   기본 브레이크포인트 (Base Breakpoints)
   ================================ */
.contact-page {
  padding-top: 100px;
}
.contact-page .section1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(380px, calc(6.25vw + 18.75rem), 420px);
}
@media screen and (max-width: 1279px) {
  .contact-page .section1 {
    height: clamp(340px, calc(7.8431372549vw + 17.4803921569rem), 380px);
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section1 {
    height: clamp(300px, calc(8.9285714286vw + 16.9642857143rem), 340px);
  }
}
.contact-page .section1 .container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 1480px;
  padding: 0 40px;
}
@media screen and (max-width: 1279px) {
  .contact-page .section1 .container {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section1 .container {
    padding: 0 20px;
  }
}
.contact-page .section1 .section-title {
  font-weight: 700;
  font-size: clamp(50px, calc(1.25vw + 2.125rem), 58px);
  color: #000;
  letter-spacing: -0.02em;
  text-align: left;
}
@media screen and (max-width: 1279px) {
  .contact-page .section1 .section-title {
    font-size: clamp(44px, calc(1.1764705882vw + 2.1845588235rem), 50px);
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section1 .section-title {
    font-size: clamp(38px, calc(1.3392857143vw + 2.1071428571rem), 44px);
  }
}
.contact-page .section2 {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 40px clamp(180px, calc(3.125vw + 8.75rem), 200px);
}
.contact-page .section2 .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  gap: 40px;
}
@media screen and (max-width: 1024px) {
  .contact-page .section2 .container {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.contact-page .section2 .contact-text-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(26px, calc(0.625vw + 1.125rem), 30px);
}
.contact-page .section2 .contact-text-box .section-title {
  font-weight: 700;
  font-size: clamp(42px, calc(0.9375vw + 1.875rem), 48px);
  color: #111;
  line-height: 1.12em;
  letter-spacing: -0.01em;
  text-align: left;
}
.contact-page .section2 .contact-text-box .section-description {
  font-weight: 500;
  font-size: clamp(18px, calc(0.3125vw + 0.875rem), 20px);
  color: #111;
  line-height: 1.6em;
  letter-spacing: -0.02em;
  text-align: left;
}
.contact-page .section2 .contact-form-box {
  width: 100%;
  max-width: clamp(600px, calc(14.84375vw + 25.625rem), 695px);
}
@media screen and (max-width: 1024px) {
  .contact-page .section2 .contact-form-box {
    max-width: 100%;
  }
}
.contact-page .section2 .contact-form-box #contact-page-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(26px, calc(0.625vw + 1.125rem), 30px);
  width: 100%;
}
.contact-page .section2 .contact-form-box .form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(12px, calc(0.3125vw + 0.5rem), 14px);
  width: 100%;
}
.contact-page .section2 .contact-form-box .form-group > label {
  font-weight: 600;
  font-size: 18px;
  color: #000;
  line-height: 1.22em;
  letter-spacing: -0.03em;
  text-align: left;
}
@media screen and (max-width: 1279px) {
  .contact-page .section2 .contact-form-box .form-group > label {
    font-size: 17px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section2 .contact-form-box .form-group > label {
    font-size: 16px;
  }
}
.contact-page .section2 .contact-form-box .form-group > label .required {
  color: #D21F1F;
}
.contact-page .section2 .contact-form-box input[type=text], .contact-page .section2 .contact-form-box input[type=tel] {
  width: 100%;
  padding: clamp(16px, calc(0.15625vw + 0.875rem), 17px) clamp(15px, calc(0.15625vw + 0.8125rem), 16px);
  border: 1px solid #D7D7D7;
  background-color: #fff;
  font-weight: 500;
  font-size: 16px;
  color: #111;
  line-height: 1.375em;
  letter-spacing: -0.02em;
}
.contact-page .section2 .contact-form-box input[type=text]:focus, .contact-page .section2 .contact-form-box input[type=tel]:focus {
  outline: none;
  border: 1px solid #15523C;
}
.contact-page .section2 .contact-form-box input[type=text]::placeholder, .contact-page .section2 .contact-form-box input[type=tel]::placeholder {
  color: #999;
}
@media screen and (max-width: 1279px) {
  .contact-page .section2 .contact-form-box input[type=text], .contact-page .section2 .contact-form-box input[type=tel] {
    padding: clamp(14px, calc(0.1960784314vw + 0.7807598039rem), 15px) clamp(13px, calc(0.1960784314vw + 0.7182598039rem), 14px);
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section2 .contact-form-box input[type=text], .contact-page .section2 .contact-form-box input[type=tel] {
    padding: clamp(12px, calc(0.2232142857vw + 0.7053571429rem), 13px) clamp(11px, calc(0.2232142857vw + 0.6428571429rem), 12px);
    font-size: 14px;
  }
}
.contact-page .section2 .contact-form-box input[type=radio], .contact-page .section2 .contact-form-box input[type=checkbox] {
  display: none !important;
}
.contact-page .section2 .contact-form-box .radio-group, .contact-page .section2 .contact-form-box .checkbox-group {
  display: grid;
  gap: 9px;
  width: 100%;
}
.contact-page .section2 .contact-form-box .radio-group.two-columns, .contact-page .section2 .contact-form-box .checkbox-group.two-columns {
  grid-template-columns: repeat(2, 1fr);
}
.contact-page .section2 .contact-form-box .radio-group.three-columns, .contact-page .section2 .contact-form-box .checkbox-group.three-columns {
  grid-template-columns: repeat(3, 1fr);
}
.contact-page .section2 .contact-form-box .radio-group.four-columns, .contact-page .section2 .contact-form-box .checkbox-group.four-columns {
  grid-template-columns: repeat(4, 1fr);
}
.contact-page .section2 .contact-form-box .radio-group.five-columns, .contact-page .section2 .contact-form-box .checkbox-group.five-columns {
  grid-template-columns: repeat(5, 1fr);
}
@media screen and (max-width: 768px) {
  .contact-page .section2 .contact-form-box .radio-group.four-columns, .contact-page .section2 .contact-form-box .radio-group.five-columns, .contact-page .section2 .contact-form-box .checkbox-group.four-columns, .contact-page .section2 .contact-form-box .checkbox-group.five-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .contact-page .section2 .contact-form-box .radio-group.three-columns, .contact-page .section2 .contact-form-box .radio-group.four-columns, .contact-page .section2 .contact-form-box .radio-group.five-columns, .contact-page .section2 .contact-form-box .checkbox-group.three-columns, .contact-page .section2 .contact-form-box .checkbox-group.four-columns, .contact-page .section2 .contact-form-box .checkbox-group.five-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contact-page .section2 .contact-form-box .radio-box, .contact-page .section2 .contact-form-box .checkbox-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(16px, calc(0.15625vw + 0.875rem), 17px) clamp(15px, calc(0.15625vw + 0.8125rem), 16px);
  border: 1px solid #D7D7D7;
  background-color: #fff;
  font-weight: 500;
  font-size: 16px;
  color: #999;
  line-height: 1.375em;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.contact-page .section2 .contact-form-box .radio-box .border-line, .contact-page .section2 .contact-form-box .checkbox-box .border-line {
  position: absolute;
  background-color: #15523C;
  z-index: 10;
}
.contact-page .section2 .contact-form-box .radio-box .border-line.top, .contact-page .section2 .contact-form-box .checkbox-box .border-line.top {
  top: -1px;
  left: -1px;
  width: 0%;
  height: 1px;
}
.contact-page .section2 .contact-form-box .radio-box .border-line.right, .contact-page .section2 .contact-form-box .checkbox-box .border-line.right {
  top: -1px;
  right: -1px;
  width: 1px;
  height: 0%;
}
.contact-page .section2 .contact-form-box .radio-box .border-line.bottom, .contact-page .section2 .contact-form-box .checkbox-box .border-line.bottom {
  bottom: -1px;
  right: -1px;
  width: 0%;
  height: 1px;
}
.contact-page .section2 .contact-form-box .radio-box .border-line.left, .contact-page .section2 .contact-form-box .checkbox-box .border-line.left {
  bottom: -1px;
  left: -1px;
  width: 1px;
  height: 0%;
}
.contact-page .section2 .contact-form-box .radio-box > span:not(.border-line), .contact-page .section2 .contact-form-box .checkbox-box > span:not(.border-line) {
  position: relative;
  z-index: 2;
}
.contact-page .section2 .contact-form-box .radio-box.checked, .contact-page .section2 .contact-form-box .checkbox-box.checked {
  color: #15523C;
}
.contact-page .section2 .contact-form-box .radio-box.checked .border-line.top, .contact-page .section2 .contact-form-box .checkbox-box.checked .border-line.top {
  animation: borderTopAnimation 0.6s ease-out forwards;
}
.contact-page .section2 .contact-form-box .radio-box.checked .border-line.right, .contact-page .section2 .contact-form-box .checkbox-box.checked .border-line.right {
  animation: borderRightAnimation 0.6s ease-out forwards;
}
.contact-page .section2 .contact-form-box .radio-box.checked .border-line.bottom, .contact-page .section2 .contact-form-box .checkbox-box.checked .border-line.bottom {
  animation: borderBottomAnimation 0.6s ease-out forwards;
}
.contact-page .section2 .contact-form-box .radio-box.checked .border-line.left, .contact-page .section2 .contact-form-box .checkbox-box.checked .border-line.left {
  animation: borderLeftAnimation 0.6s ease-out forwards;
}
@media screen and (max-width: 1279px) {
  .contact-page .section2 .contact-form-box .radio-box, .contact-page .section2 .contact-form-box .checkbox-box {
    padding: clamp(14px, calc(0.1960784314vw + 0.7807598039rem), 15px) clamp(13px, calc(0.1960784314vw + 0.7182598039rem), 14px);
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section2 .contact-form-box .radio-box, .contact-page .section2 .contact-form-box .checkbox-box {
    padding: clamp(12px, calc(0.2232142857vw + 0.7053571429rem), 13px) clamp(11px, calc(0.2232142857vw + 0.6428571429rem), 12px);
    font-size: 14px;
  }
}
.contact-page .section2 .submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: clamp(60px, calc(0.625vw + 3.25rem), 64px);
  border: 1px solid #15523C;
  border-radius: 6px;
  background-color: #fff;
  color: #15523C;
  font-weight: 600;
  font-size: 18px;
  line-height: 0;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: all ease 0.3s;
}
@media screen and (max-width: 1279px) {
  .contact-page .section2 .submit-btn {
    height: clamp(56px, calc(0.7843137255vw + 3.1230392157rem), 60px);
    font-size: 17px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .section2 .submit-btn {
    height: clamp(50px, calc(1.3392857143vw + 2.8571428571rem), 56px);
    font-size: 16px;
  }
}
.contact-page .section2 .submit-btn:hover {
  background-color: #15523C;
}
.contact-page .section2 .submit-btn:hover > * {
  filter: brightness(0) invert(1);
}

@keyframes borderTopAnimation {
  from {
    width: 0%;
  }
  to {
    width: calc(100% + 2px);
  }
}
@keyframes borderRightAnimation {
  from {
    height: 0%;
  }
  to {
    height: calc(100% + 2px);
  }
}
@keyframes borderBottomAnimation {
  from {
    width: 0%;
  }
  to {
    width: calc(100% + 2px);
  }
}
@keyframes borderLeftAnimation {
  from {
    height: 0%;
  }
  to {
    height: calc(100% + 2px);
  }
}