/* main {
  padding-bottom: 120px;
} */

.projec-detail-title .projec-detail-breadcrumb {
   color: #b2b2b2;
   font-size: 18px;
   font-weight: 700;
   line-height: 24px;
   text-align: left;
   margin-bottom: 16px;
}

.projec-detail-breadcrumb .projec-detail-breadcrumb-link {
   color: #b2b2b2;
}

.projec-detail-title .title {
   font-size: 40px;
   font-weight: 700;
   line-height: 60px;
   text-align: left;
   color: #000;
   margin-bottom: 20px;
}
.project-detail-banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
   display: none;
}
.swiper-banner-project-detail {
   /* margin-top: 40px; */
}

.project-detail-banner .swiper-container {
   width: 100%;
   height: 100%;
}
.swiper-banner-project-detail .swiper-slide {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   aspect-ratio: 16/9;
}

.swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.swiper-button-next, .swiper-button-prev{
   z-index: 2;
}
.swiper-button-prev:after,
.swiper-button-next:after {
   content: "";
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
   opacity: 1;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
   bottom: 100px;
}

.swiper-container-horizontal
   > .swiper-pagination-bullets
   .swiper-pagination-bullet {
   background-color: #fff;
}

.project-detail-content {
   position: relative;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   position: relative;
   margin-bottom: 40px;
   margin-top: 30px;
}



.project-detail-desc .title {
   font-size: 24px;
   font-weight: 700;
   line-height: 34px;
   text-align: left;
   margin-bottom: 40px;
   color: #000;
}

.project-detail-desc .desc {
   font-size: 18px;
   font-weight: 400;
   line-height: 27px;
   text-align: left;
   margin-bottom: 40px;
   color: #000;
}

.project-detail-desc p {
   font-size: 18px;
   font-weight: 400;
   line-height: 27px;
   text-align: left;
   margin-bottom: 40px;
   color: #000;
}

.project-detail-desc .img {
   margin-bottom: 40px;
   padding: 40px 0;
}

.project-detail-desc .item {
   display: flex;
   align-items: flex-start;
   padding: 40px 0;
   margin-bottom: 40px;
}

.project-detail-desc .item .img-icon {
   margin-right: 24px;
}

.project-detail-desc .item .item-content {
}

.item .item-content .content {
   font-size: 24px;
   font-weight: 700;
   line-height: 34px;
   text-align: left;
   margin-bottom: 26px;
   color: #000;
}
.item .item-content .sub {
   font-size: 18px;
   font-weight: 700;
   line-height: 24px;
   text-align: left;
   color: #737373;
}

.project-detail-desc .link {
   display: flex;
   align-items: flex-start;
}

.link .text {
   font-size: 18px;
   font-weight: 700;
   line-height: 25px;
   text-align: left;
   color: #000;
}

.link .link-item {
   display: flex;
   align-items: flex-start;
   opacity: 0.4;
}

.link .link-item a {
   margin-left: 24px;
}
/* copy */
.project-detail-infomation {
   /* position: absolute; */
   top: 50px;
   right: 50px;
   z-index: 1;
   background-color: #f2f2f2e3;
   height: 100%;
}
.project-banner-info{
   position: relative;
}
.project-banner-info .box-project-single{
   display: flex;
}
.project-banner-info .box-project-single .box-project-left{
   width: calc(100% - 400px);
}
.project-banner-info .box-project-single .box-project-right{
   width: calc(400px);
}
.project-detail-infomation-sticky {
   padding: 30px;
   /* position: sticky; */
   transition: visibility 0s linear 0s, opacity 0.3s 0s;
}

.project-detail-infomation .title {
   color: #0031a7;
   font-size: 22px;
   font-weight: 700;
   line-height: 32px;
   text-align: left;
   margin-bottom: 20px;
}

.project-detail-infomation .infomation-item {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

.infomation-item .list-item {
   display: flex;
   align-items: baseline;
   gap: 10px;
}

.infomation-item .list-item + .list-item {
   margin-top: 24px;
}

.list-item .item-primary {
   font-size: 14px;
   color: #737373;
   font-weight: 700;
   line-height: 24px;
   text-align: left;
}
.list-item .item-secondery {
   font-size: 14px;
   font-weight: 500;
   line-height: 24px;
   text-align: left;
   color: #000;
}
.project-detail-similar {
   padding-top: 40px;
   border-top: 1px solid #d9d9d9;
   padding-bottom: 40px;
}
.project-item-global-list-result.row {
   margin-bottom: 40px;
}
/* copy */
.project-detail-similar .project-detail-similar-title {
   font-size: 48px;
   font-weight: 700;
   line-height: 58px;
   text-align: center;
   color: #000;
   margin-bottom: 40px;
}

.project-detail-similar .all-projects-button {
   padding: 0;
   background: transparent;
   outline: none;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;
   color: #0031a7;
   padding-bottom: 8.5px;
   margin: 0 auto;
}

.all-projects-button .all-projects-text {
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
   color: #0031a7;
   border-bottom: 1px solid transparent;
   transition: all 0.15s ease-in-out;
}

.all-projects-button:hover .all-projects-text {
   border-bottom: 1px solid #0031a7;
}

.all-projects-button .all-projects-icon {
   transition: all 0.15s ease-in-out;
   margin-top: 6px;
}

.all-projects-button:hover .all-projects-icon {
   transform: rotate(45deg);
}

/* Project Item */
.project-item-global-list .project-item-global-list-result {
   margin-top: 20px;
}
.project-item-global-list-result.row {
   margin-left: -20px;
   margin-right: -20px;
}
.project-item-global-list-result .project-item-global-list-result-item {
   /* margin-top: 40px; */
}
.project-item-global-list-result .col-12,
.project-item-global-list-result .col-lg-4 {
   padding-left: 20px;
   padding-right: 20px;
}

.project-item-global-list-result-item {
   width: calc(100% / 3);
   padding: 0 calc(80px / 4);
}
.project-item-global-list-result-item
   .project-item-global-list-result-item-container {
}
.project-item-global-list-result-item-container .project-item-image {
   height: 240px;
    object-fit: cover;
    object-position: center;
/*    mix-blend-mode: luminosity;*/
    transition: all .15s ease-in-out;
}
.project-item-global-list-result-item-container:hover .project-item-image {
   mix-blend-mode: normal;
}
.project-item-global-list-result-item-container .project-item-content {
   height: 160px;
   background-color: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 20px;
   transition: all 0.15s ease-in-out;
}
.project-item-global-list-result-item-container:hover .project-item-content {
   background-color: #f2f2f2;
}
.project-item-content .project-item-content-header {
}
.project-item-content-header .project-item-content-header-title {
   font-weight: 500;
   font-size: 24px;
   line-height: 120%;
   color: #000000;
   margin-bottom: 8px;
   transition: all 0.15s ease-in-out;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   display: -webkit-box;
}
.project-item-global-list-result-item-container:hover
   .project-item-content-header
   .project-item-content-header-title {
   color: #0031a7;
}
.project-item-content-header .project-item-content-header-subtitle {
   font-weight: 400;
   font-size: 18px;
   line-height: 150%;
   color: #000000;
}
.project-item-content .project-item-content-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.project-item-content-footer .project-item-content-footer-text {
   font-size: 18px;
   line-height: 150%;
   color: #a6a6a6;
}
.project-item-global-list-result-item-container
   .project-item-content-footer
   svg {
   margin-top: 6px;
   transition: all 0.15s ease-in-out;
}
.project-item-global-list-result-item-container:hover
   .project-item-content-footer
   svg {
   transform: rotate(45deg);
}

.project-detail-related {
   background-color: #f2f2f2;
   padding-top: 40px;
   padding-bottom: 50px;
}

.project-detail-related-desc {
   font-size: 48px;
   font-weight: 700;
   line-height: 58px;
   text-align: center;
   color: #000;
   margin-bottom: 40px;
}

.project-detail-related-nav {
   border-bottom: 1px solid #d9d9d9;
   display: flex;
   align-items: center;
}

.project-detail-related-nav .project-detail-related-nav-item {
   display: flex;
   align-items: center;
   height: 44px;
   position: relative;
}

/* .project-detail-related-nav .project-detail-related-nav-item + .project-detail-related-nav-item {
  margin-left: 40px;
} */
.project-detail-related-nav-link {
   font-size: 18px;
   font-weight: 500;
   line-height: 24px;
   text-align: left;
   color: #b2b2b2;
   display: flex;
   transition: all 0.2s ease-in-out;
   position: relative;
   height: 100%;
   border: none;
   background-color: transparent;
}

.project-detail-related-nav-item .project-detail-related-nav-link::after,
.project-detail-related-nav-item .project-detail-related-nav-link::before,
.project-detail-related-nav-item .active::after,
.project-detail-related-nav-item .active::before {
   content: "";
   position: absolute;
   bottom: 0px;
   width: 0px;
   height: 3px;
   margin: 5px 0 0;
   transition: all 0.2s ease-in-out;
   transition-duration: 0.35s;
   opacity: 0;
   background-color: #000000;
}

.project-detail-related-nav-item .project-detail-related-nav-link::after {
   right: 50%;
}

.project-detail-related-nav-item .project-detail-related-nav-link::before {
   left: 50%;
}
.project-detail-related-nav-item .active {
   color: #000;
}
.project-detail-related-nav-item .active::after,
.project-detail-related-nav-item .active::before {
   width: 50%;
   opacity: 1;
}

/* .project-detail-related-nav-item:hover .project-detail-related-nav-link::after,
.project-detail-related-nav-item:hover .project-detail-related-nav-link::before {
  width: 50%;
  opacity: 1;
}

.project-detail-related-nav-link:hover {
  color: #000;
} */

.project-detail-related-card {
   margin-bottom: 30px;
}

.project-detail-related-card .mlr--20 {
   margin-left: -20px;
   margin-right: -20px;
}

.project-detail-related-card .plr-20 {
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 24px;
}

.project-detail-related-card .p-20 {
   padding: 20px;
}
.project-detail-related-card .bd-none {
   border: none;
   border-radius: 0px;
}

.project-detail-related-card .bd-radius-0 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}

.project-detail-related-card .dp-none {
   display: none;
}

.project-detail-related-card .explore-button {
   padding: 0;
   background: transparent;
   outline: none;
   border: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;
   color: #000;
   width: 100%;
}

.project-detail-related-card .explore-button .explore-text {
   font-weight: 700;
   font-size: 18px;
   line-height: 24px;
   color: #000;
   border-bottom: 1px solid transparent;
   transition: all 0.15s ease-in-out;
   text-align: left;
}

.project-detail-related .explore-button .explore-icon {
   transition: all 0.15s ease-in-out;
   margin-top: 4px;
}

.project-detail-related-card .card:hover .card-body {
   background-color: #ccc;
}

.project-detail-related-card .card:hover .explore-icon {
   transform: rotate(45deg);
}

.project-detail-related .view-more-button {
   padding: 0;
   background: transparent;
   outline: none;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;
   color: #0031a7;
   margin: 0 auto;
}

.project-detail-related .view-more-button .view-more-text {
   font-weight: 500;
   font-size: 18px;
   line-height: 24px;
   color: #0031a7;
   border-bottom: 1px solid transparent;
   transition: all 0.15s ease-in-out;
   text-align: left;
}

.project-detail-related .view-more-button:hover .view-more-text {
   border-bottom: 1px solid #0031a7;
}

.project-detail-related .view-more-button .view-more-icon {
   transition: all 0.15s ease-in-out;
   margin-top: 4px;
}

.project-detail-related .view-more-button:hover .view-more-icon {
   transform: rotate(90deg);
}

@media screen and (min-width : 1024px ) and (max-width : 1366px) and (orientation: landscape){
   .project-item-global-list-result-item-container .project-item-image{
      mix-blend-mode: unset;
   }
}


@media screen and (min-width: 1281px) {
   .swiper-slide img {
      
   }
}

@media screen and (max-width: 1080px) {
   .project-banner-info .box-project-single .box-project-left{
      width: 100%;
   }
   .project-banner-info .box-project-single{
      display: block;
   }
   .swiper-banner-project-detail {
      padding: 67px 0px 0px 0px;
   }
   .pagi-custom {
      display: none;
   }
   .btn-custom {
      display: none;
   }

   .project-detail-content {
      align-items: flex-start;
      flex-direction: column;
      margin-right: -20px;
      margin-left: -20px;
   }
   .project-detail-infomation {
      order: 1;
      width: 100%;
      margin: 0 auto;
      position: unset;
   }
   .project-detail-infomation-sticky {
      width: 100%;
   }
   .project-detail-infomation-sticky {
      padding: 40px 20px;
   }
   .swiper-slide img {
      height: 560px;
   }
   .project-detail-desc {
      max-width: 100%;
      order: 2;
      padding: 20px;
      margin-right: 0px;
   }
   .project-detail-desc .img {
      width: 100%;
      height: 465px;
   }
   .project-detail-related {
      padding-bottom: 80px;
   }
   .project-item-global-list-result-item-container .project-item-image {
      mix-blend-mode: normal;
      width: 100%;
      height: 270px;
      object-fit: cover;
   }
   .project-item-global-list-result-item {
      width: calc(100% / 2);
   }
   .project-item-global-list-result-item:nth-last-child(1) {
      display: none;
   }
   .project-item-global-list-result-item-container .project-item-content {
      background-color: #f2f2f2;
   }
}

@media screen and (max-width: 992px) {
   .project-detail-infomation {
      position: unset;
   }
   .project-detail-content {
      flex-direction: column-reverse;
   }
   .project-detail-infomation {
      width: 100%;
      max-width: 100%;
   }
   .project-detail-infomation-sticky {
      width: 100%;
      max-width: 100%;
      margin-top: 30px;
   }
   .project-detail-desc {
      width: 100%;
      max-width: 100%;
   }
   .project-item-global-list-result-item-container .project-item-image {
      /* height: 400px; */
      width: 100%;
      mix-blend-mode: normal;
   }
}

@media screen and (max-width: 768px) {
   .project-detail-content {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
   }
   .project-detail-desc {
      max-width: 100%;
      order: 2;
      padding: 40px 20px;
      margin-right: 0px;
   }
   .project-detail-desc .title {
      font-size: 18px;
      line-height: 25px;
   }
   .project-detail-desc .desc {
      font-size: 16px;
   }

   .project-detail-desc .link {
      justify-content: space-between;
   }
   .project-detail-infomation {
      order: 1;
      width: 100%;
      margin: 0 auto;
      position: unset;
   }
   .project-detail-infomation-sticky {
      width: 100%;
   }
   .project-item-global-list-result-item-container .project-item-image {
      width: 100%;
      mix-blend-mode: normal;
   }
}

@media screen and (max-width: 576px) {
   /* main {
    padding-bottom: 40px;
  } */

   .project-detail-related {
      padding-bottom: 40px;
   }

   .project-detail-related-card {
      margin-bottom: 20px;
   }
   .project-detail-related-card img {
      height: 180px;
      object-fit: cover;
      object-position: center;
   }
   .project-detail-related-desc {
      font-size: 32px;
      line-height: 38px;
   }
   .project-detail-container {
      max-width: 100%px;
      margin: 0 auto;
   }
   .projec-detail-title {
      /* padding: 0px 20px; */
   }

   .projec-detail-title .title {
      font-size: 32px;
      line-height: 38px;
   }
   .swiper-banner-project-detail {
      padding: 40px 0px 0px 0px;
   }
   .swiper-slide img {
      height: 320px;
   }
   .swiper-button-next,
   .swiper-button-prev {
      margin-top: 0;
   }
   .project-detail-container .project-detail-content {
      margin-left: -20px;
      margin-right: -20px;
      margin-bottom: 40px;
   }

   .project-detail-content .project-detail-desc {
      padding: 20px;
   }
   .project-detail-desc .mb-80 {
      margin-bottom: 80px;
   }

   .project-detail-desc .img {
      padding: 0;
      height: 240px;
      object-fit: cover;
      margin-bottom: 80px;
      width: 100%;
   }

   .project-detail-infomation {
      order: 1;
      padding: 0;
      width: 100%;
   }
   .project-detail-infomation .title {
      font-size: 24px;
      line-height: 32px;
   }
   .project-detail-infomation-sticky {
      padding: 40px 20px;
   }
   .swiper-container-horizontal > .swiper-pagination-bullets {
      bottom: 20px;
   }
   .project-detail-similar {
      padding-top: 40px;
   }
   .project-detail-similar .project-detail-similar-title {
      font-size: 32px;
      line-height: 38px;
   }
   .project-item-global-list-result.row {
      margin-bottom: 40px;
   }
}

/* Project Item */
@media screen and (max-width: 992px) {
   .project-item-global-list .project-item-global-list-result {
      margin-top: 0;
   }
   .project-item-global-list-result-item-container .project-item-content {
      height: unset;
      background-color: #f2f2f2;
   }
   .project-item-content-header .project-item-content-header-title {
      line-height: 140%;
   }
   .project-item-content-header .project-item-content-header-subtitle,
   .project-item-content-footer .project-item-content-footer-text {
      font-size: 16px;
   }
   .project-item-global-list-result .project-item-global-list-result-item{
      margin-top: 30px;
   }
}

@media screen and (max-width: 576px) {
   .project-item-global-list-result-item-container .project-item-image {
      height: 200px;
      mix-blend-mode: normal;
   }
   .project-item-global-list-result .project-item-global-list-result-item {
      width: 100%;
   }
   .project-item-global-list-result-item:nth-last-child(1) {
      display: block;
   }
}

@media screen and (min-width: 769px) and (max-width: 1080px) {
   .swiper-banner-project-detail {
      padding-top: 48px;
   }
   .swiper-slide img {
      height: 530px;
   }
   .project-detail-infomation-sticky {
      padding: 40px;
   }
   .project-detail-desc {
      padding: 60px 40px 0px;
   }
   .project-detail-desc .item .item-content {
      margin-left: 24px;
   }
   .item .item-content .content {
      width: 577px;
      max-width: 100%;
   }
   .project-detail-desc .item .img-icon {
      margin: unset;
   }
   .project-detail-content {
      margin-bottom: 60px;
   }
   .project-detail-similar {
      padding: 60px 20px 80px 20px;
   }
   .project-detail-related {
      padding-top: 60px;
      padding-left: 20px;
      padding-right: 20px;
   }
   .project-detail-related-desc {
      margin-bottom: 50px;
   }
}