/*  Header style
=================================*/
.u-hero__visual-container {
     position: relative;
     z-index: 1;
     overflow: hidden;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     height: 550px;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -ms-grid-column-span: 2;
     grid-column-end: 5;
     -ms-grid-column: 3;
     grid-column-start: 3;
     -ms-grid-row-span: 1;
     grid-row-end: 2;
     -ms-grid-row: 1;
     grid-row-start: 1;
     -ms-grid-row-align: stretch;
     align-self: stretch;
}

.u-hero__visual-wrap {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     width: 140%;
     min-width: 100%;
     margin-top: -62px;
}

.w-layout-grid {
     display: -ms-grid;
     display: grid;
     grid-auto-columns: 1fr;
     -ms-grid-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
     -ms-grid-rows: auto auto;
     grid-template-rows: auto auto;
     grid-row-gap: 16px;
     grid-column-gap: 16px;
}

.u-hero__visual-grid {
     height: 140%;
     margin-top: 61px;
     margin-right: 14px;
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
     grid-auto-flow: column;
     grid-auto-rows: minmax(auto, 300px);
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     -ms-grid-columns: 1fr;
     grid-template-columns: 1fr;
     -ms-grid-rows: minmax(auto, 300px) minmax(auto, 300px) minmax(auto, 300px) minmax(auto, 300px);
     grid-template-rows: minmax(auto, 300px) minmax(auto, 300px) minmax(auto, 300px) minmax(auto, 300px);
}

.u-hero__visual-grid.center {
     height: 125%;
}

.u-hero__visual-card {
     overflow: hidden;
}

.u-hero__visual-image {
     display: inline-block;
     max-width: 100%;
     width: 1005px;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     -o-object-position: 50% 0%;
     object-position: 50% 0%;
}

.u-hero__visual-grid {
     transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     transform-style: preserve-3d;
     transition: transform 1.2s ease-in-out 1s;
}

.u-hero__visual-grid.scroll:nth-child(1) {
     transform: translate3d(0px, -140px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     transform-style: preserve-3d;
}

.u-hero__visual-grid.scroll:nth-child(2) {
     transform: translate3d(0px, -70px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     transform-style: preserve-3d;
}

.u-hero__visual-grid.scroll:nth-child(3) {
     transform: translate3d(0px, -140px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     transform-style: preserve-3d;
}

.u-hero__visual-grid.scroll:nth-child(4) {
     transform: translate3d(0px, -70px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     transform-style: preserve-3d;
}


.membership-banner.inner-banner .image-block{
     width: 50%;
}
@media (max-width: 992px) {
     .membership-banner h1{
          max-width: 420px;
     }
     .membership-banner.inner-banner .image-block img {
          position: static;
     }
     .u-hero__visual-grid {
          height: 80%;
          grid-column-gap: 6px;
          grid-row-gap: 6px;
     }
     .u-hero__visual-grid.center {
         height: 65%;
     }
     .membership-banner.inner-banner {
         padding: 70px 0;
     }
}
@media (max-width: 767px) {
     .membership-banner.inner-banner .image-block {
         width: 100%;
         position: static;
         margin-top: 40px;
     }
     .membership-banner.inner-banner {
          padding: 40px 0 0;
     }
     .membership-banner h1 {
         max-width: 100%;
     }
     .u-hero__visual-container{
          height: 260px;
          max-width: 440px;
          margin: 0 auto;
     }
     .u-hero__visual-grid {
         height: 180%;
     }
     .u-hero__visual-grid.center {
         height: 150%;
     }
     .membership-banner.inner-banner .image-block img {
          margin-top: 0;
     }
     .u-hero__visual-grid.center:last-child {
         margin-right: 0;
     }
}
@media (max-width: 576px) {
     .u-hero__visual-grid.center {
         height: 120%;
     }
     .u-hero__visual-grid {
         height: 140%;
     }
     .u-hero__visual-grid{
          margin-top: 40px;
     }
     .u-hero__visual-wrap{
          margin-top: -40px;
     }
     .u-hero__visual-grid.scroll:nth-child(3),
     .u-hero__visual-grid.scroll:nth-child(1) {
         transform: translate3d(0px, -50px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     }
     .u-hero__visual-grid.scroll:nth-child(2),
     .u-hero__visual-grid.scroll:nth-child(4) {
         transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     }
}