.project-detail .banner-content{ padding-bottom: 20px !important}
.project-detail .banner-image{ padding: 0 15px 15px 15px; max-height: none !important}
.project-detail .project-image{ height:0px; padding-top: 100% }
.project-detail .project-image img{ height: 100%; width: 100%; object-fit: cover; position: absolute; top:0; left: 0}

.project-image-footer{ height: 60px;background: #000000b0;position: absolute;bottom: 0; left:0; right:0; margin:auto;z-index: 100;  display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 0 20px}
.project-image-count{  font-size: 22px; font-weight: 100}

.project-image-nav{ display: flex; width: 85px;justify-content: space-between;  }
.project-image-arrow { height: 35px; width: 35px;  line-height: 35px;  text-decoration: underline;  flex-shrink: 0;    text-align: right;  order: 10; cursor: pointer}
.project-image-arrow:before{display: block;  position: absolute;  content: "";  width: 26px;  height: 26px;  top: 0;  bottom: 0;  right: 0;  margin: auto;  background-image: url(sprite-icons.svg#arrow);  background-repeat: no-repeat;  background-position: center;  background-size: 13px;  transition: all 0.3s;}
.project-image-arrow:after{    display: block;  position: absolute;  content: "";  width: 26px;  height: 26px;  border: 1px solid var(--color-gray-strong);  border-radius: 3px;  transform: rotate(45deg);  top: 0;  bottom: 0;  right: 0;  margin: auto;  transition: all 0.3s;}
.project-image-prev.project-image-arrow:before{ transform: rotate(180deg)}

.project-image-prev.project-image-arrow:after{ transform: rotate(-45deg)}
.project-image-prev.project-image-arrow:hover:after{ transform: rotate(-135deg)}
.project-image-next.project-image-arrow:hover:after{ transform: rotate(135deg)}
.project-detail .project-image{ cursor: zoom-in}

@media only screen and (min-width: 768px) {
    /**/
    .project-detail .page-banner .banner-inner{ display: flex; flex-direction: column; max-width: 768px; margin: auto  }
    .project-detail .page-banner .banner-inner > div{ width: 100%}
     .project-detail .page-banner .banner-image{ max-height: unset}
}

@media only screen and (min-width:1024px) {
    .banner-item-title{ }

    .project-detail .page-banner .banner-inner{ flex-direction: row; max-width: 1320px;}
    .project-detail .page-banner .banner-inner > div{ width: 50%}
    .project-detail .page-banner .banner-content{ }
    .project-detail .page-banner .project-swiper{ height: 100%}
    .project-detail .banner-image{ padding: 0 }
    .project-detail .project-image{ height:100%; padding: 0;}
    .project-detail .project-image img{ }


}