.header{
  width:90vw;
  position:fixed;
  gap:200px;
  top:0;
  height:10vw;
  max-height:90px;
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
  padding:20px 5vw;
  background-color:rgb(255, 255, 255);
  z-index:3000;
}
@media screen and (min-width: 1080px){
  .header{
    width:calc(100vw - 50px);
    padding:20px 0px 20px 50px;
  }
 } 
.header_logo{
  width:30vw;
  max-width:250px;
}

.catalog_title_box{
  width:calc(55vw - 48px);
  display:flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

@media screen and (min-width: 700px){
  .catalog_title_box{
    width:100%;
    position:fixed;
  }
 } 

.header a{
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:3100;
}

.header h2{
  font-size: clamp(1rem, 0.5909rem + 1.8182vw, 2.5rem);
}


/*menu button*/
.menuIcon{
  display:flex;
  justify-content: center;
  align-items: center;
}

.menuIcon{
  width:5vw;
  max-width:60px;
}

.menuIcon img{
  max-height: 10px;
  max-width: 76px;
}

/* banner */
.banner{
  width:100%;
  height:auto;
  /*margin-top to left some space for the header, because the header is fixed in position*/
  margin-top:130px;
  overflow:hidden;
  display:flex;
  justify-content: center;
}

banner_man_lady{
  background-color:#FF3333;
}



.banner_nyh{
  background-color:#F69352;
  }

.banner_ls{
background-color:#57a5a1;
}
.banner_kc{
  background-color:#692eab;
}
.banner_super{
  background-color:#e1cda0;
}
.banner_pg{
  background-color:#103130;
}
.banner img{
  width:90%;
  max-width:565px;
  height:auto;
  margin-top: 10px;
  margin-bottom: 15px;
  
  transform: scale(1.1);
}

/* subCat */
.subCat{
  width:95vw;
  padding:0 2.5vw;
  gap:15px;
  margin:0 auto;
  background-color:#856E50;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  overflow-x: scroll !important;
  position:sticky;
  z-index:4200;
}



.subCat a{
  display:flex;
  justify-content:center;
  align-items:center;
}

.subCat h2{
  color:white;
  font-size: clamp(1rem, 0.7866rem + 0.9756vw, 1.75rem);
  white-space:nowrap;
}

.subCat h2:hover{
  color:#fcff54;
}

/* product container*/
.product_container{
width:100%;
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: center;
align-items: center;
gap:1vw;
padding:2vw 0;
}

.product_container_noborder{
  width:100%;
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  gap:1vw;
  padding:2vw 0;
  border:0px;
  }


  .lazyImg{
    max-width:18vw;
    max-height: calc(18vw * 1.1);
    border:1px solid grey;
    border-radius:15px;
  }
  
  .kc_height{
    max-height:calc(18vw * 1.25)
  }
  .super_height{
    max-height:calc(18vw * 1.1)
  }
  
  .largeProduct{
    max-width:32vw !important;
    border-radius:15px !important;
    object-fit:scale-down;
  }



.bannerProduct{
  border: none !important;
max-width:96.5% !important;
max-width:800px !important;
height:auto !important;
max-height:40vh!important;
object-fit:scale-down;
}
@media screen and (min-width: 850px){
  .bannerProduct{
    margin: 0 calc(50vw - 400px);
  }
}
.no_border{
  border:0px;
}

/* Footer*/
.footer{
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  margin-top:2vw;
  gap:1vh;
}

.footer h3{
  color:rgb(102, 102, 102);
  font-size: clamp(0.75rem, 0.3971rem + 1.1765vw, 1.1rem);
  margin:0;
  white-space: nowrap;
}

/* map Logo Container*/
.mapLogoContainer{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap:10px;
}

.mapLogoContainer a{
  width:20vw;
  max-width:100px;
}

.mapLogoContainer img{
width:100%;
}

/* copyright */
.copyright{
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.copyright h6{
  color:rgb(102, 102, 102);
  margin: 1vh 0 0.5vh 0;
}



@media screen and (max-width: 1080px){
  .header{
    width:92vw;
    padding:2vw 4vw;
  }
  .subCat{
    width:auto;
    padding:0px 10px;
    gap:20px;
  }
  .banner{
    /*margin-top to left some space for the header, because the header is fixed in position*/
    margin-top:14vw;
  }
 } 
 /*Tablet*/
 @media screen and (max-width: 1800px){
.header{
  gap:10px;
}
 } 

 /*Tablet*/
 @media screen and (max-width: 1280px){
  /* make the subCat smaller than 12px when window < 400px */
  .lazyImg{
    max-width:22vw;
    max-height: calc(22vw * 1.1);
  }
  .kc_height{
    max-height:calc(22vw * 1.25)
  }
  .super_height{
    max-height:calc(22vw * 1.1)
  }
  .largeProduct{
    max-width: calc(22vw * 2 + 1.5vw) !important;
}
.bannerProduct{
  max-width:93.5% !important;
  max-height:40vh !important;
  }
 } 


 @media screen and (max-width:1900px)and (min-width:900px){
 /* make the subCat smaller than 12px when window < 400px */
 .lifeStyle_subCat{
  justify-content:flex-start;
}
  }


 @media screen and (max-width: 838px){
  /* make the subCat smaller than 12px when window < 400px */
  .lazyImg{
    max-width:30vw;
    max-height: calc(30vw * 1.1);
    border-radius:15px;
  }
  .kc_height{
    max-height:calc(30vw * 1.25)
  }
  .super_height{
    max-height:calc(30vw * 1.1)
  }
    .largeProduct{
      max-width: calc(30vw * 2 + 1.5vw) !important;
}
.bannerProduct{
  max-width:95% !important;
  max-height:40vh !important;
  }
.subCat{
  gap:15px;
}
.lifeStyle_subCat{
  gap:10px;
}
  .copyright{
    transform:scale(0.85);
    transform-origin: center center;
    white-space: nowrap;
  }
 } 

 @media screen and (max-width: 538px){
  .copyright{
    transform:scale(0.6);
    transform-origin: center center;
    white-space: nowrap;
  }
 } 

 /* mobile */
 @media screen and (max-width: 450px){
  /* make the subCat smaller than 12px when window < 400px */
  .lazyImg{
   max-width:45vw;
    max-height: calc(45vw * 1.1);
  }
  .kc_height{
    max-height:calc(45vw * 1.25)
  }
  .super_height{
    max-height:calc(45vw * 1.1)
  }
    .largeProduct{
   max-width: calc(45vw * 2 + 1.5vw) !important;
}
.bannerProduct{
  max-width:92% !important;
  max-height:40vh !important;
  }
  .copyright{
    transform:scale(0.7);
    transform-origin: center center;
    white-space: nowrap;
  }
  .footer{
    transform:scale(0.95);
    transform-origin: center bottom;
  }
    /* make the subCat smaller than 12px when window < 400px */
    .subCat h2{
      transform:scale(0.95);
      transform-origin: center center;
      white-space: nowrap;
    }
 } 

 @media screen and (max-width: 360px){
  .footer{
    transform:scale(0.8);
    transform-origin: center bottom;
  }
 } 

 .wholeContainer{
  padding-bottom:20px;
 }

 .subSub{
  width: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  font-weight:bolder;
  /*padding-top:10px;
  padding-bottom:10px;*/
  background-color:white;
  position:sticky;
  z-index:4000;
  white-space: nowrap;
  overflow:auto;
}

@media only screen and (max-width: 850px) {
  .subSub{
   /* padding-top:5px;
    padding-bottom:5px;*/
  }
} 

@media only screen and (max-width: 860px) {
  .subSub{
    justify-content: center;
  }



  .subCat{
    justify-content: center;
  }
  .subCat_super{
    justify-content: flex-start;
  }

  .lifeStyle_subCat{
    justify-content:flex-start;
  }
} 
@media only screen and (max-width: 550px) {
  .subSub_life{
    justify-content: flex-start;
  }
  
} 
@media only screen and (max-width: 400px) {
  .subCat_kc{
    justify-content: flex-start;
  }
  
} 

.subSub h3{
  margin:15px 0 10px 10px;
  font-size:clamp(0.75rem, 0.3971rem + 1.1765vw, 1.5rem);
}

@media only screen and (max-width: 850px) {
  .subSub h3{
    font-size:16px;
  }
} 


@media screen and (min-width: 1500px){
  .product_container{
    max-width:1500px;
    margin:0 auto;
    }
.lazyImg{
  max-width:calc(1500px / 6.5);
  max-height: calc(1500px * 1.1 / 7);
}

.kc_height{
  max-height:calc(1500px / 6 * 1.25)
}
.super_height{
  max-height:calc(1500px / 6 * 1.1)
}

.largeProduct{
  max-width:calc(1500px / 6 * 2) !important;
  border-radius:15px !important;
  object-fit:scale-down;
}
}

#subCatId::-webkit-scrollbar {
  -webkit-appearance:none;
  height:7px !important;
}

#subCatId::-webkit-scrollbar-track {
  height: 7px !important;
}

#subCatId::-webkit-scrollbar-thumb {
  background: #888 !important; 
  border-radius: 10px !important;
}


.subCatArrow{
    /* background-color: #929292c2; */
    position: absolute;
    top: -2px;
    height: 20%;
    color: white;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 12px;
    color: white;
}

.membership_footer{
  width: 90%;
  margin: 10px 5% 0px 5%;
  display:flex;
  justify-content: center;
  align-items: center;
}

.membership_footer img{
  width: 100%;
  max-width:1000px;
  margin:0 auto;
}

.estoreBanner{
  width:95%;
  max-width:3000px;
  text-align: center;
  font-size:14px;
}

@media screen and (max-width: 500px){

  
    .estoreBanner{
      width:100%;
    }
   }