.contact-page .contact-row-1 {
  padding: 50px 0px;
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-1 {
    padding: 40px 16px;
  }
}
.contact-page .contact-row-1 .title-main-page {
  color: #212121;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  margin-bottom: 12px;
}
.contact-page .contact-row-1 .title-sub-page {
  color: #707070;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%; /* 27px */
  margin-bottom: 0px;
}
.contact-page .contact-row-2 {
  margin-bottom: 40px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-2 {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 922px) {
  .contact-page .contact-row-2 .contact-box-1 {
    padding-right: 30px;
  }
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-2 .contact-box-1 {
    padding: 0px;
  }
}
.contact-page .contact-row-2 .contact-box-1 .box-bg {
  border-radius: 5px;
  background: #F6F6F6;
  padding: 40px;
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-2 .contact-box-1 .box-bg {
    background: #F8F8F7;
    padding: 40px 24px;
  }
}
.contact-page .contact-row-2 .contact-box-1 .box-bg .title-sub-2-page {
  color: #AB0921;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 48px */
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-2 .contact-box-1 .box-bg .title-sub-2-page {
    text-align: center;
    margin-bottom: 32px;
  }
}
.contact-page .contact-row-2 .contact-box-1 .box-bg .box-detail {
  display: flex;
  padding: 12px 24px;
  border-radius: 5px;
  background: #EAE9E9;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.contact-page .contact-row-2 .contact-box-1 .box-bg .box-detail:last-child {
  margin-bottom: 0px;
}
.contact-page .contact-row-2 .contact-box-1 .box-bg .box-detail .box-icon img {
  width: 24px;
  height: 24px;
}
.contact-page .contact-row-2 .contact-box-1 .box-bg .box-detail .text-group .label-sub {
  color: #707070;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
  margin-bottom: 0px;
}
.contact-page .contact-row-2 .contact-box-1 .box-bg .box-detail .text-group .text-detail {
  color: #212121;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  margin-bottom: 0px;
}
@media screen and (min-width: 922px) {
  .contact-page .contact-row-2 .contact-box-2 {
    padding-left: 0px;
  }
}
.contact-page .contact-row-2 .contact-box-2 .google-map {
  margin: 40px 0px 40px 10px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-2 .contact-box-2 .google-map {
    margin: 24px 0 0 0;
  }
}
.contact-page .contact-row-2 .contact-box-2 .google-map iframe {
  width: 100%;
  height: 577px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-2 .contact-box-2 .google-map iframe {
    height: 178.642px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-3 .box-main {
    padding: 0;
  }
}
.contact-page .contact-row-3 .box-form {
  padding: 60px 100px;
  overflow: hidden;
  position: relative;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-3 .box-form {
    padding: 40px 24px;
    margin-bottom: 0px;
  }
}
.contact-page .contact-row-3 .box-form .bg-contact {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}
.contact-page .contact-row-3 .box-form .title-sub-3-page {
  color: #AB0921;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 48px */
  margin-bottom: 40px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-3 .box-form .title-sub-3-page {
    text-align: center;
  }
}
.contact-page .contact-row-3 .box-form .contactus input::-moz-placeholder, .contact-page .contact-row-3 .box-form .contactus textarea::-moz-placeholder {
  color: #909090;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.contact-page .contact-row-3 .box-form .contactus input::placeholder, .contact-page .contact-row-3 .box-form .contactus textarea::placeholder {
  color: #909090;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}
.contact-page .contact-row-3 .box-form .contactus .g-recaptcha {
  margin-top: 24px;
  margin-bottom: 44px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-3 .box-form .contactus .g-recaptcha {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-3 .box-form .contactus .form-group:has(#form_email) {
    width: 100% !important;
  }
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-3 .box-form .contactus .form-group:has(#form_phone) {
    width: 100% !important;
  }
}
.contact-page .contact-row-3 .box-form .contactus .form-row-inner {
  padding: 0px 15px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-3 .box-form .contactus .form-row-inner {
    padding: 0px 12px;
  }
}
.contact-page .contact-row-3 .box-form .contactus .form-row-inner:has(#form_email) {
  padding: 0px 8px 0px 15px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-3 .box-form .contactus .form-row-inner:has(#form_email) {
    padding: 0px 12px;
  }
}
.contact-page .contact-row-3 .box-form .contactus .form-row-inner:has(#form_phone) {
  padding: 0px 15px 0px 8px;
}
@media screen and (max-width: 922px) {
  .contact-page .contact-row-3 .box-form .contactus .form-row-inner:has(#form_phone) {
    padding: 0px 12px;
  }
}
.contact-page .contact-row-3 .box-form .contactus .form-row-inner label {
  display: none;
}
@media screen and (max-width: 768px) {
  .contact-page .contact-row-3 .box-form .contactus .contactbtn {
    text-align: center;
  }
}
.contact-page .contact-row-3 .box-form .contactus .contactbtn button {
  color: #F8F8F8;
  height: 42px;
  padding: 0px 32px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  text-transform: uppercase;
  border-radius: 20px;
  background: #AB0921;
}

@media screen and (max-width: 768px) {
  .by-app .container {
    padding: 0px;
  }
}
.by-app .by-app-1 {
  padding: 60px 0px;
}
@media screen and (max-width: 768px) {
  .by-app .by-app-1 {
    padding: 24px 16px;
  }
}
.by-app .by-app-1 .title-page {
  color: #212121;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  text-align: center;
}
@media screen and (max-width: 768px) {
  .by-app .by-app-1 .title-page {
    font-size: 36px;
  }
}
.by-app .box-content {
  border-radius: 5px;
  padding: 40px;
  background: #F6F6F6;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .by-app .box-content {
    padding: 24px 16px;
    margin-bottom: 0px;
  }
}
.by-app .box-content .by-app-2 {
  margin-bottom: 40px;
}
.by-app .box-content .by-app-2:has(.pd-col) {
  margin-left: -24px;
  margin-right: -24px;
}
@media screen and (max-width: 768px) {
  .by-app .box-content .by-app-2 {
    row-gap: 24px;
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 922px) {
  .by-app .box-content .by-app-2 .img-view {
    padding: 0px 20px;
  }
}
.by-app .box-content .by-app-2 img {
  width: 100%;
}
.by-app .box-content .by-app-3 {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .by-app .box-content .by-app-3 {
    margin-bottom: 32px;
  }
}
.by-app .box-content .by-app-3 img {
  width: 100%;
}
.by-app .box-content .by-app-4 .title-product {
  color: #212121;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 48px */
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .by-app .box-content .by-app-4 .title-product {
    font-size: 30px;
  }
}
.by-app .box-content .by-app-5 {
  row-gap: 24px;
}
@media screen and (max-width: 768px) {
  .by-app .box-content .by-app-5 {
    row-gap: 16px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.by-app .box-content .by-app-5 .title-product {
  color: #212121;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%; /* 48px */
}
@media screen and (max-width: 768px) {
  .by-app .box-content .by-app-5 .title-product {
    font-size: 30px;
  }
}
.by-app .box-content .by-app-5 .product-item {
  padding: 0px 12px;
}
@media screen and (max-width: 768px) {
  .by-app .box-content .by-app-5 .product-item {
    padding: 0px 8px;
  }
}
.by-app .box-text {
  margin-bottom: 24px;
}
.by-app .box-text:last-child {
  margin-bottom: 0px;
}
.by-app .box-text .title-text {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%; /* 24px */
}
.by-app .box-text .text-detail {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 0px;
}
.by-app .row-gap-detail {
  row-gap: 40px;
}
@media screen and (max-width: 768px) {
  .by-app .row-gap-detail {
    row-gap: 24px;
  }
}
@media screen and (min-width: 922px) {
  .by-app .pd-col {
    padding: 0px 24px;
  }
}

.product-box {
  border: 2px solid #AB0921;
  background: #FFF;
  transition: all 300ms ease-out;
  height: 100%;
}
.product-box:hover {
  border: 0px solid #fff !important;
}
.product-box .box-img {
  position: relative;
  overflow: hidden;
  padding-top: 100%;
}
.product-box .box-img .img-product {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.product-box .box-name {
  padding: 20px 8px;
}
@media screen and (max-width: 768px) {
  .product-box .box-name {
    padding: 20px 16px;
  }
}
.product-box .box-name .name-product {
  color: #AB0921;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%; /* 27px */
  margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
  .product-box .box-name .name-product {
    font-size: 16px;
  }
}

.project-page {
  padding-top: 60px;
  padding-bottom: 100px;
  background-image: url("/default_image/project-bg.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .project-page {
    padding-top: 24px;
    padding-bottom: 32px;
  }
}
.project-page .header-box {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .project-page .header-box {
    margin-bottom: 24px;
  }
}
.project-page .header-box .title-sub-page {
  color: #707070;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%; /* 27px */
  margin-bottom: 8px;
}
.project-page .header-box .title-main-page {
  color: #AB0921;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  margin-bottom: 0px;
}
.project-page .project-row {
  row-gap: 60px;
}
@media screen and (max-width: 768px) {
  .project-page .project-row {
    row-gap: 32px;
  }
}
.project-page .project-row .box-project {
  padding: 0px 15px;
}
@media screen and (max-width: 768px) {
  .project-page .project-row .box-project {
    padding: 0px 16px;
  }
}
.project-page .project-row .box-project .box-project-sub {
  transition: all 0.5s ease-in-out 0s;
}
.project-page .project-row .box-project .box-project-sub:hover {
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
}
.project-page .project-row .box-project .img-project {
  width: 100%;
  position: relative;
  padding-bottom: 67%;
  overflow: hidden;
}
.project-page .project-row .box-project .img-project img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.project-page .project-row .box-project .project-detail {
  padding: 16px;
  background: #fff;
}
.project-page .project-row .box-project .project-detail .project-name {
  color: #212121;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%; /* 24px */
  margin-bottom: 8px;
}
.project-page .project-row .box-project .project-detail .project-location {
  color: #707070;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 21px */
  margin-bottom: 8px;
}
.project-page .project-row .box-project .project-detail .project-bm {
  color: #AB0921;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 2px;
}
.project-page .project-row .box-project .project-detail .project-bm::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.37391 19.768C9.11177 19.7685 8.85772 19.68 8.65587 19.5177C8.54226 19.4264 8.44836 19.3142 8.37952 19.1875C8.31069 19.0609 8.26829 18.9224 8.25474 18.7798C8.24119 18.6373 8.25676 18.4935 8.30057 18.3569C8.34438 18.2202 8.41555 18.0932 8.51002 17.9832L13.5363 12.1499L8.68953 6.30575C8.59633 6.19443 8.52674 6.06634 8.48474 5.92885C8.44275 5.79135 8.42918 5.64716 8.44482 5.50456C8.46046 5.36196 8.50499 5.22377 8.57587 5.09792C8.64675 4.97207 8.74257 4.86105 8.85782 4.77125C8.9739 4.67217 9.10984 4.59744 9.25711 4.55174C9.40437 4.50605 9.55979 4.49037 9.7136 4.5057C9.86741 4.52103 10.0163 4.56703 10.1509 4.64082C10.2855 4.71461 10.403 4.81459 10.4958 4.93449L15.9148 11.4643C16.0798 11.659 16.17 11.9033 16.17 12.1554C16.17 12.4074 16.0798 12.6517 15.9148 12.8464L10.3051 19.3762C10.1926 19.5079 10.0496 19.6121 9.8878 19.6801C9.726 19.7482 9.54995 19.7783 9.37391 19.768Z' fill='%23AB0921'/%3E%3C/svg%3E");
  content: "";
  display: block;
  width: 24px;
  height: 24px;
}
.project-page .project-row .box-see-more .bm-see-more {
  border-radius: 20px;
  border: 1px solid #AB0921;
  color: #AB0921;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  text-transform: uppercase;
  height: 42px;
  padding: 0px 32px;
  background: rgba(255, 255, 255, 0.1411764706);
  margin: auto;
  display: block;
}

.project-detail {
  padding-top: 46px;
  padding-bottom: 100px;
}
@media screen and (max-width: 992px) {
  .project-detail {
    padding-top: 24px;
    padding-bottom: 40px;
  }
}
.project-detail .box-header {
  margin-bottom: 46px;
}
@media screen and (max-width: 992px) {
  .project-detail .box-header {
    margin-bottom: 24px;
  }
}
.project-detail .box-header .title-main-page {
  color: #212121;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%; /* 36px */
  margin-bottom: 0px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E1E1E1;
}
.project-detail .box-header .title-sub-page {
  color: #707070;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  padding-top: 16px;
  padding-bottom: 16px;
}
.project-detail .box-detail {
  row-gap: 40px;
}
@media screen and (max-width: 992px) {
  .project-detail .box-detail {
    row-gap: 24px;
  }
}
.project-detail .box-detail .text-detail {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
  margin-bottom: 24px;
}
.project-detail .box-detail .text-detail:last-child {
  margin-bottom: 0px;
}
@media screen and (min-width: 992.98px) {
  .project-detail .box-detail .side-detail-2 {
    padding-left: 33px;
  }
}