html,
body {
  width: 100vw;
  overflow: hidden; /* for GSAP transform-based movement */
  margin: 0;
}

.header-wrp{
  display: none;
}

/* HORIZONAL SCROLL*/

.gallery {
  overflow: hidden;
  height: 100vh;
  position: relative;
}


.gallery-wrap {
  display: flex;
  width: max-content; /* prevents shrinking */
  height: 100%;
  will-change: transform;
  /* backface-visibility: hidden; */
}



.container{
display: flex;
flex-direction: row;
flex-shrink: 0;

height:100vh;
background-color: rgb(255, 255, 255);

}

.img-wrap {
overflow: hidden;
position: relative;
margin: 0;
flex-shrink: 0;
will-change: transform;
}

.img-wrap img {
  will-change: transform;
  transform: translateZ(0); 
}
/* force GPU rendering */


/*IMAGE GALLERY SETTING*/
.container img {
overflow: hidden;
}

.vertical-img {
height: 100%;
width: 100%;
object-fit: contain;
display:block;
}
  
.horizontal-img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* image 3 PARALAX*/
.img1{
  object-position: 60% bottom;
}
.img3 {
bottom: 0;
left: 0%;
width: 130%;
position: absolute;
}

.img6 {
bottom: 0;
left: 15%;
width: 140%;
object-position: left bottom;
position: absolute;
}

.img8 {
bottom: 0;
left: 50%;
width: 120%;
object-position: left 30%;
position: absolute;
}

.img9 {
  object-position: 40% center;
  position: absolute;
}


/* 1 */
.img1-wrp {
height: 100vh;
width: 60vw;
margin-left: 0;

top: 0;
z-index: 1;

}

/* 2 */
.img2-wrp, .img7-wrp{

height: 50vh;
width: 20vw;
margin-left: 15vw;

top: 25vh;
z-index: 1;

display: flex;
justify-content: center;
}

/* 3 */

.img3-wrp {

height: 70vh;
width: 60vw;
margin-left: 15vw;

top: 15vh;
z-index: 1;

display: flex;
align-items: center;
}

/* 4 */
.img4-wrp{

height: 65vh;
width: 30vw;
margin-left: 15vw;

top: 5vh;
z-index: 1;

display: flex;
justify-content: center;
}

/* 5 */
.img5-wrp {

height: 60vh;
width: 25vw;
margin-left: 15vw;


top: 35vh;
z-index: 1;

display: flex;
justify-content: center;
}

/*6*/

.img6-wrp{
height: 70vh;
width: 60vw;
margin-left: 15vw;

top: 15vh;
z-index: 1;

display: flex;
align-items: center;


}

/*8*/
.img8-wrp{
height: 80vh;
width: 60vw;
margin-left: 15vw;

top: 10vh;
z-index: 1;

display: flex;
align-items: center;

}
/*9*/
.img9-wrp{
height: 60vh;
width: 25vw;
margin-left: 15vw;

top: 5vh;
z-index: 1;

display: flex;
justify-content: center;
}

/*10*/
.img10-wrp {

height: 60vh;
width: 25vw;
margin-left: 15vw;
margin-right: 15vw;


top: 30vh;
z-index: 1;

display: flex;
justify-content: center;
}


/* AN BAO FOOTER*/

.an-bao-footer {
position: fixed;
height: 20vh;
width: 100vw;
z-index: 100;
bottom: 0;
left: 0;
display: flex;
align-items: center;
mix-blend-mode: difference;

opacity: 0;
}

.an-bao-text {
font-family: "Nuances Condensed Light Italic", sans-serif;
font-size: 11rem; 
padding-left: 3.5rem;
width: 100%;
color: rgb(255, 255, 255);
mix-blend-mode: difference;
}

@media screen and (max-width: 1024px){
  html,
  body {
    width: 100vw;
    overflow-y: scroll!important; /* for native scrolling */
    margin: 0;
  }

.an-bao-footer{
  display: none;
}

/*IMAGE POSITION*/

.gallery{
  width: 100vw;
  height: auto;
  margin: 0%;
  padding: 1rem 2rem 2rem 2rem;
}

.gallery-wrap{
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0%;
  
}

.container{
flex-direction: column;
align-items: center;
height: auto;
gap: 5rem;

}


.container > *{
  margin: 0;
  padding: 0;
  top: 0;
  transform: none;
}


}

/*MOBILE*/
@media screen and (max-width: 766px){
  .page{
    padding-top: 3rem;
  }
  .container > .img-wrap:last-child {
    margin-bottom: 3rem;
  }
    
  .container img{
  object-fit: cover;
  }

  .img1-wrp {
  height: 60vh;
  width: 80vw;
  }

  .img2-wrp {
    height: 30vh;
    width: 40vw;
  }

  .img3-wrp {
    height: 30vh;
    width: 80vw;
    top: 0;
  }

  .img4-wrp {
    height: 60vh;
    width: 80vw;
    left:0 ;
  }

  .img5-wrp {
    height: 60vh;
    width: 80vw;
  }
  .img6-wrp {
    height: 30vh;
    width: 80vw;
  }

  .img7-wrp {
    height: 30vh;
    width: 40vw;
  }

  .img8-wrp {
    height: 30vh;
    width: 80vw;
  }

  .img9-wrp {
    height: 60vh;
    width: 80vw;
  }

  .img10-wrp {
    height: 60vh;
    width: 80vw;
  }

  .img1{
    object-position: 60% bottom;
  }

  .img3{
    object-position: 60% bottom;
  }
  .img6{
    left: 0!important;
    object-position: 130% bottom;
    height: 100%;
  }

  .img8{
    left:0;
    object-position: 50% bottom;
  }
}

/* IPAD PORTRAIT*/
@media screen and (min-width: 767px) and (max-width: 1024px){
  .page{
    padding-top: 5rem;
  }
  
  .container > .img-wrap:last-child {
    margin-bottom: 7rem;
  }
  
  .img-wrap{
    width: 80vw;
  }

  .container img{
    object-fit: cover;
  }

  .img1-wrp {
    height: 80vh;
  }

  .img2-wrp,.img7-wrp{
    width: 40vw;
    height:auto;
  }

  .img3-wrp, .img6-wrp,.img8-wrp   {
    height: 40vh;
  }

  .img4-wrp, .img5-wrp,.img9-wrp, .img10-wrp  {
    left:0 ;
    height: auto!important;
  }

  .img1{
    width: 120%;
    object-position: 80% bottom;
  }

  .img2, .img4, .img5, .img7{
    width: 100%;
  }
  
  .img6{
    left: 0;
    width: 120%!important;
    object-position: 90% bottom!important;
  }

  .img8{
    left:0;
    width: 100%;
  }

  
} 

/* IPAD LANDSCAPE*/
@media screen and (min-width: 1025px) and (max-width: 1400px){
  .img3-wrp{
    height: 60vh;
    top:20vh;
  }
  .img6-wrp{
    height: 60vh;
    width: 70vw;
    top:20vh;
  }

  .img8-wrp{
    height: 70vh;
    width: 70vw;
    top:15vh;
  }
}