.contact-page {
padding-top: 80px;
}
.contact-title-txt {
text-align: center;
}
.common-sub-ttl {
font-size: 45px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.5px;
margin: 18px 0;
}
.contact-sub-ttl {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.5px;
}
.contact-info {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin-top: 61px;
padding: 11px 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-info-blk {
padding: 24px 0;
width: 26%;
display: flex;
align-items: center;
position: relative;
}
.contact-info-blk .ph-txt {
width: 80%;
font-weight: 600;
}
.contact-info-blk:not(:first-child)::after {
position: absolute;
content: "";
width: 1px;
height: 108px;
background-color: #D9D9D9;
left: -60px;
}
.contact-form {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 104px;
}
.contact-form .form-container {
width: 600px;
margin-top: 55px;
margin-left: 55px;
}
.nf-form-fields-required {
display: none;
}
.contact-form img {
width: 570px;
margin-top: 49px;
}
.contact-icon {
margin-right: 9px;
}
.us {
font-size: 14px;
}
.data {
font-size: 16px;
line-height: 1.6;
}
.nf-form-content .label-above .nf-field-label {
margin-bottom: 5px !important;
}
.nf-form-content input:not([type=button]), .nf-form-content textarea  {
background: var(--txt-color) !important;
border: 1px solid var(--stroke-soft-200) !important;
border-radius: 10px !important;
color: var(--txt-color2) !important;
transition: all .5s;
}
.nf-form-content input:not([type=button]):focus, .nf-form-content textarea:focus {
background: var(--neutral-100) !important;
}
.nf-field-container {
margin-bottom: 6px !important;
}
.nf-form-content .ninja-forms-field {
font-family: "Proxima Nova", sans-serif;
font-size: 14px !important;
padding: 6px 12px !important;
}
.nf-form-content input.ninja-forms-field {
height: 40px !important;
}
.nf-form-content textarea.ninja-forms-field {
height: 228px !important;
border-radius: 10px !important;
resize: none;
}
.contact-form .form-container .nf-form-content input[type=submit] {
width: 100%;
background: var(--primary-color) !important;
border-radius: 10px;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--txt-color) !important;
margin-top: 19px;
letter-spacing: -0.5px;
padding: 18px 0 35px !important;
cursor: pointer;
}
.contact-form .form-container .nf-form-content input[type=submit]:hover {
background: var(--teal-dark) !important;
}
.contact-form .form-container .nf-form-content label {
font-size: 14px;
font-weight: 600;
}
.nf-error.field-wrap .nf-field-element:after {
display: none;
} @media only screen and (min-width: 768px) and (max-width: 1280px) {
.contact-page {
padding-top: 6.25vw;
}
.common-sub-ttl {
font-size: 3.516vw;
letter-spacing: -0.195vw;
}
.contact-sub-ttl {
font-size: 1.328vw;
letter-spacing: -0.039vw;
}
.contact-info {
margin-top: 4.766vw;
padding: 0.859vw 0;
}
.contact-info-blk {
padding: 1.875vw 0;
}
.contact-info-blk:not(:first-child)::after {
width: 0.078vw;
height: 8.438vw;
left: -4.688vw;
}
.contact-form {
margin-bottom: 8.125vw;
}
.contact-form .form-container {
width: 46.875vw;
margin-top: 4.297vw;
margin-left: 4.297vw;
}
.contact-form img {
width: 44.531vw;
margin-top: 3.828vw;
}
.contact-icon {
margin-right: 0.703vw;
}
.us {
font-size: 1.094vw;
}
.data {
font-size: 1.25vw;
}
.nf-form-content .label-above .nf-field-label {
margin-bottom: 0.391vw !important;
}
.nf-form-content input:not([type=button]) {
border-radius: 0.391vw !important;
}
.nf-field-container {
margin-bottom: 0.703vw !important;
}
.nf-form-content .ninja-forms-field {
font-size: 1.094vw !important;
padding: 0.469vw 0.938vw !important;
}
.nf-form-content input.ninja-forms-field {
height: 3.125vw !important;
}
.nf-form-content textarea.ninja-forms-field {
height: 17.813vw !important;
}
.contact-form .form-container .nf-form-content input[type=submit] {
border-radius: 0.781vw;
font-size: 1.406vw !important;
margin-top: 1.25vw;
letter-spacing: -0.039vw;
padding: 1.406vw 0 2.734vw !important;
}
.contact-form .form-container .nf-form-content label {
font-size: 1.094vw;
font-weight: 600;
}
} @media only screen and (max-width:767.9px) {
.contact-page {
padding-top: 0vw;
}
.contact-title-txt {
text-align: center;
}
.common-sub-ttl {
font-size: 6.133vw;
letter-spacing: -0.133vw;
}
.contact-sub-ttl {
font-size: 3.467vw;
letter-spacing: -0.133vw
}
.contact-info {
border-top: 0.267vw solid var(--border-color);
border-bottom: 0.267vw solid var(--border-color);
margin-top: 5.333vw;
padding: 2.933vw 5.333vw;
flex-direction: column;
}
.contact-info-blk {
padding: 6.4vw 0;
width: 100%;
}
.contact-info-blk:not(:first-child)::after {
content: unset;
}
.contact-form {
margin-top: 2.667vw;
flex-wrap: wrap;
margin-bottom: 17.333vw;
}
.contact-form .form-container {
width: 160vw;
margin-top: 14.667vw;
margin-left: 0vw;
}
.contact-form .form-container .nf-form-content input[type=submit] {
border-radius: 2.667vw;
font-size: 3.733vw !important;
margin-top: 4.267vw;
letter-spacing: -0.133vw;
padding: 2.667vw 0 8vw !important;
}
.contact-form img {
width: 152vw;
margin-top: 2.667vw;
}
.contact-icon {
margin-right: 2.4vw;
}
.us {
font-size: 3.733vw;
}
.data {
font-size: 4.267vw;
line-height: 1.6;
}
.nf-form-content .ninja-forms-field {
font-size: 3.733vw !important;
padding: 1.6vw 3.2vw !important;
}
.contact-form .form-container .nf-form-content label {
font-size: 3.733vw;
}
.nf-form-content .label-above .nf-field-label {
margin-bottom: 1.333vw !important;
}
.nf-form-content input:not([type=button]) {
border-radius: 1.333vw !important;
color: var(--txt-color2) !important;
}
.nf-field-container {
margin-bottom: 2.4vw !important;
}
.nf-form-content input.ninja-forms-field {
height: 10.667vw !important;
}
.nf-form-content textarea.ninja-forms-field {
height: 60.8vw !important;
border-radius: 1.333vw !important;
}
}