:root {
  --contentPadding: 60px;
}
@media screen and (max-width: 1440px) {
  :root {
    --contentPadding: 40px;
  }
}
@media screen and (max-width: 1000px) {
  :root {
    --contentPadding: 30px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --contentPadding: 30px;
  }
}

.contact {
  --padding: 50px;
}
@media screen and (max-width: 1000px) {
  .contact {
    --padding: 40px;
  }
}
@media screen and (max-width: 767px) {
  .contact {
    --padding: 30px;
  }
}
.contact .title {
  font-weight: bold;
  font-size: 2.625rem;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.2;
}
@media screen and (max-width: 1000px) {
  .contact .title {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .contact .title {
    font-size: 1.375rem;
  }
}
.contact .formBox {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0;
}
.contact .formBox .title {
  text-align: center;
}
.contact .formBox .description {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 30px;
}
.contact .infoBox {
  max-width: 1680px;
  margin: 0 0 0 auto;
  display: flex;
  padding: 0;
  border-top: #DDDDDD 1px solid;
}
@media screen and (max-width: 767px) {
  .contact .infoBox {
    flex-direction: column;
  }
}
.contact .infoBox .pic {
  width: 60%;
}
@media screen and (max-width: 1000px) {
  .contact .infoBox .pic {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .contact .infoBox .pic {
    width: 100%;
  }
}
.contact .infoBox .info {
  padding: 30px 30px 30px var(--contentPadding);
}
@media screen and (min-width: 768px) {
  .contact .infoBox .info {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (min-width: 1001px) {
  .contact .infoBox .info {
    width: 40%;
  }
}
.contact .infoBox .info .title {
  text-align: left;
}
.contact .infoBox ul {
  max-width: 370px;
}
.contact .infoBox ul li {
  font-size: 1.25rem;
}
.contact .infoBox ul li + li {
  margin-top: 10px;
}
@media screen and (max-width: 1000px) {
  .contact .infoBox ul li + li {
    margin-top: 20px;
  }
}
.contact .infoBox ul li .label {
  color: #F39627;
  font-weight: bold;
  width: 75px;
  flex-shrink: 0;
}
.contact .formBox .info {
  color: #111111;
  font-size: 1.3125rem;
  margin-bottom: 5%;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  .contact .formBox .info {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 767px) {
  .contact .formBox .info {
    font-size: 1rem;
  }
}
.contact .pageBtnBox {
  padding: 0;
  border: none;
}

.okPage .mainBox {
  padding: 5% 0;
}
.okPage .txt .title {
  max-width: 570px;
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
  color: #000;
  font-size: 2.625rem;
  font-weight: 900;
  margin-bottom: 4%;
}
@media screen and (max-width: 1000px) {
  .okPage .txt .title {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .okPage .txt .title {
    font-size: 1.375rem;
  }
}
.okPage .txt .subTitle {
  max-width: 570px;
  margin: 0 auto;
  line-height: 1.2;
  text-align: center;
  color: #F39627;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 4%;
}
@media screen and (max-width: 1000px) {
  .okPage .txt .subTitle {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .okPage .txt .subTitle {
    font-size: 1.25rem;
  }
}
.okPage .txt .description {
  text-align: center;
  color: #333333;
  font-size: 1.3125rem;
  font-weight: 300;
}
@media screen and (max-width: 1000px) {
  .okPage .txt .description {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 767px) {
  .okPage .txt .description {
    font-size: 1rem;
  }
}/*# sourceMappingURL=contact.css.map */