@import url("global.css");
.sec_intro {
  background: #F3F3F3;
  padding: 0 0 60px;
  position: relative; }
  .sec_intro::before {
    content: "";
    width: 100%;
    height: 100px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0; }
  .sec_intro .wrapper {
    flex-direction: row-reverse;
    align-items: flex-end;
    position: relative;
    z-index: 2; }
    .sec_intro .wrapper .text_area {
      flex: 1;
      padding-left: 40px;
      padding-bottom: 40px; }
      .sec_intro .wrapper .text_area .lead {
        margin-bottom: 10px;
        font-size: clamp(17px, 2.3vw, 22px);
        font-weight: 500; }
    .sec_intro .wrapper .img_area {
      width: 50%; }

.sec_form {
  background: #fff; }

.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_file {
  border: 1px solid #C1C1C1;
  background-color: #C1C1C1; }

table.inputform input[type="text"],
table.inputform input[type="tel"],
table.inputform input[type="email"],
table.inputform textarea {
  border: 1px solid #F3F3F3;
  background-color: #F3F3F3; }
table.inputform select {
  border: 1px solid #F3F3F3;
  background-color: #F3F3F3; }

form#mailformpro label::before,
form#mailformpro label.mfp_not_checked::before {
  border: #000 1px solid; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1600px)

------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .sec_intro::before {
    height: 70px; }
  .sec_intro .wrapper .text_area .lead br {
    display: none; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .sec_intro {
    padding: 0 0 30px; }
    .sec_intro::before {
      height: 40px; }
    .sec_intro .wrapper .text_area {
      padding-left: 20px;
      padding-bottom: 10px; }
    .sec_intro .wrapper .img_area {
      width: 45%; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sec_intro {
    padding: 30px 0 0; }
    .sec_intro::before {
      height: 60px;
      top: auto;
      bottom: 0; }
    .sec_intro .wrapper .text_area {
      padding-left: 0;
      padding-bottom: 30px; }
      .sec_intro .wrapper .text_area .lead {
        margin-bottom: 15px; }
    .sec_intro .wrapper .img_area {
      width: 85%;
      margin: 0 auto; } }