body, html {
  width:100%;
  max-width:100vw;
  height: 100%;
  min-height:550px;
  /*overflow-x:hidden;*/
}

img{
  object-fit: scale-down;
}

.mainContainer{
  width:100%;
  
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
}

.logoDiv,.subcatDiv,.productDiv,.footerDiv{
width:100%;
max-width:3000px;
display:flex;
flex-direction:row;
}

.footerDiv{
  max-width:noset;
}

.headerDiv{
width:100%;
max-width: 1280px;
}

.headerDiv img{
  width:100%;
  }

  .fixedcontent{
    position:fixed;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    width:100%;
    max-width: 1280px;
    height:5%;
    min-height:50px;
    z-index:99999;
    transition: background-color 0.3s;
    padding-top: 6px;
    padding-bottom: 5px;
  }

  .fixedcontent_kc{
    height:7%;
  }


  @media only screen and (min-width: 750px) { 
    .fixedcontent{
      height:5.5%;
      padding: 15px 0 10px 0;
    }
    .fixedcontent_kc{
      height:7%;
    }
  }
  @media only screen and (min-width: 1050px) { 
    .fixedcontent{
      height:7.5%;
    }
    .fixedcontent_kc{
      height:7%;
    }
  }

  .web_title{
font-size: 250%;
display:none;
transition: display 0.5s;
margin-left:50px;
  }

  @media only screen and (min-width: 450px) { 
    .web_title{
      font-size: 130%;
        }
  }

  @media only screen and (min-width: 768px) { 
    .web_title{
      font-size: 140%;
        }
  }

.logoDiv{
height:100%;
width: calc(100% - 0px);
max-width:100%;
justify-content: center;
align-items: center;
position:relative;
/*padding-left:20px;*/
transition: top 0.3s;
}

.logo{
height:80%;
min-height:40px;
display:flex;
justify-content: center;
align-items: center;
position:absolute;
left:4.5%;
transition:opacity 0.5s;
}
.logo_kc{
  height:100%;
}
.logo img{
  max-width:125px;
  height:100%;
  }
  @media only screen and (min-width: 1000px) { 
    .logo img{
      max-width:150px;
      }
  }
  @media only screen and (max-width: 450px) { 
    .logo img{
      max-width:100px;
      }
  }
  @media only screen and (max-width: 500px) { 
    .fixedcontent{
      top:0px;
    }
    .logo{
      height:60%;
      }
      .logo_kc{
        height:100%;
      }
      .logo_nyb{
        height:68%;
      }
    .logo img{
      height:90%;
      }
      .web_title {
        font-size: 100%;
    }
  }

  @media only screen and (max-width: 360px) { 
    .logo{
      min-height:35px;
      }
  }

.footerDiv{
flex-direction:column;
}

.menuDiv{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:10%;
  min-width:76px;
  height:40px;
  max-height:40px;
  position:absolute;
  right:15px;
}

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

@media only screen and (max-width: 750px) { 
  .menuDiv{
    gap:3.5px;
    width:7.5%;
    min-width:48px;
    height:30px;
    max-height:30px;
    right:15px;
  }
  
  .menuDiv img{
    max-height:7.66px;
    max-width:48px;
  }
}
.topBar{
}

.middleBar{
}

.bottomBar{
}

.topBar_anime{
  animation: topBar 0.5s linear 0s 1 normal forwards;
  }
  
  .middleBar_anime{
    animation: middleBar 0.5s linear 0s 1 normal forwards;
  }
  
  .bottomBar_anime{
    animation: bottomBar 0.5s linear 0s 1 normal forwards;
  }

  .topBar_anime_reverse{
    animation: topBar_reverse 0.5s linear 0s 1 normal forwards;
    }
    
    .middleBar_anime_reverse{
      animation: middleBar_reverse 0.5s linear 0s 1 normal forwards;
    }
    
    .bottomBar_anime_reverse{
      animation: bottomBar_reverse 0.5s linear 0s 1 normal forwards;
    }

    body{
      overflow-x:hidden;
    }
    .subcatDiv{
      overflow:auto;
      /*margin-top:5px;
      margin-bottom:5px;
  padding-bottom: 3px;*/
  padding: 7px 0 8px 0;
  /*padding-left:10px;*/
  gap:clamp(0.5125rem, -0.0781rem + 1.25vw, 1.55rem);
  width:auto;
  max-width:100%;
  min-height:clamp(2.125rem, 2.0833rem + 3.3333vw, 2.225rem);
  display:flex;
  justify-content: center;
  z-index:9999;
    }

    @media only screen and (min-width: 680px) { 
      .subcatDiv{
        min-height:clamp(2.125rem, 2.0833rem + 3.3333vw, 3.225rem);
      }
    }

    @media only screen and (min-width: 450px) { 
      .subcatDiv{
        min-height:45px;
    }}
    @media only screen and (max-width: 680px) { 
      .subcatDiv{
        padding: 5px 5px 9px 5px;
      }

    }
    .subcatDiv::-webkit-scrollbar {
      display: none;
      height: clamp(3.125rem, 2.0833rem + 3.3333vw, 5.625rem);
    }
    .subcat{
      background-color:white;
      border:3px solid #f74361;
      border-radius:clamp(0.625rem, 0.4252rem + 0.6831vw, 0.9375rem);
      padding:5px 10px 5px 10px;
      white-space: nowrap;
     height:auto;
     display: flex;
    justify-content: center;
    align-items: center;
    }

    .subcat_kc{
      border:3px solid #b464a8;
    }
    @media only screen and (max-width: 900px) { 
      .subcat{
       height:auto;
      }
    }
    @media only screen and (max-width: 700px) { 
      .subcat{
        border:2px solid #f74361;
      }
      .subcat_kc{
        border:2px solid #b464a8;
      }
    }
    .currentSubCat{
color:white;
background-color:#108d43;
    }
    .currentSubCat_kc{
      color:white;
      background-color:#b464a8;
          }
    @media only screen and (max-width: 468px) { 
      .subcat{
        padding:0px 10px 0px 10px;
      }
    }

    .subcat h2{
      font-size: clamp(1rem, 0.2008rem + 1.5322vw, 1.9rem);
      margin:0px 0;
    }

    .subsubcatDiv{
      display:flex;
      flex-direction: row;
        padding-top:9px;
        padding-bottom:11px;
      gap:20px;
    }
    @media only screen and (max-width: 680px) { 
      .subsubcatDiv{
        padding-bottom:0px;
        padding-top:8px;
      }
    }
    .subsubcat h2{
      font-size: clamp(1rem, 0.6404rem + 1.6438vw, 1.75rem) !important;
    }

    .currentSubSubCat{
border-bottom:5px red solid;
    }


    .productDiv {
      flex-wrap:wrap;
      justify-content: center;
      align-items: flex-start;
      gap:10px;
    }
    .productBox{
      overflow:hidden;
      width:43vw;
      height:calc(43vw * 1.1);
      border: 1px solid #108d43;
      border-radius: 12px;
      position:relative;
    }

    @media only screen and (min-width: 768px) { 
      .productBox{
        width:28vw;
        height:calc(28vw * 1.1);
        border-radius: 12px;
      }
    }

    @media only screen and (min-width: 1080px) { 
     /* .productBox{
        width:23vw;
        height:calc(23vw * 1.1);
        border-radius: 12px;
      }*/
      .subcatDiv{
        padding: 17px 5px 19px 5px;
      }
    }

    @media only screen and (min-width: 1300px) { 
      .productBox{
        width:18vw;
        height:calc(18vw * 1.1);
      }
    }

    .large_product{
      max-width:calc(95% + 10px);
    }

    /*@media only screen and (min-width: 768px) { 
      .large_product{
        max-width:calc(60% + 10px);
      }
    }

    @media only screen and (min-width: 1080px) { 
      .large_product{
        max-width:calc(50% + 10px);
      }
    }

    @media only screen and (min-width: 1300px) { 
      .large_product{
        max-width:calc(40% + 10px);
      }
    }*/


  
  .socialMedia{
    display:flex;
    flex-direction:row;
    align-items: flex-end;
    justify-content: center;
    gap:5px;
    -ms-transform: scale(0.8); /* IE 9 */
    -webkit-transform: scale(0.8); /* Chrome, Safari, Opera */
    transform: scale(0.8);
    transform-origin:top center;

  }
  
  .socialMediaList{
    display:flex;
    flex-direction:row;
    align-items: flex-end;
    justify-content: flex-start;
    gap:10px;
  }

  .socialMediaList a{
color:rgb(86, 86, 86);
  }

  .largeBanner{
    width:100%;
    margin:10px auto;
    max-width: 1280px;
  }

.map_button{
    width:100%;
    margin-bottom:10px;
    max-width: 1280px;
  }

  .banner_ele_large, .banner_ele_small{
    display:none;
    width:100%;
    max-width: 1280px;
  }

  .banner_ele_small{
    width:95%;
  }

  .map_button{
    width:95%;
  }

  .banner_ele_large{
    margin-bottom:20px;
  }

  @media only screen and (min-width: 710px) { 
    .banner_ele_large{
      display:block;
    }
    .map_button{
      display:none;
    }
  }
  @media only screen and (max-width: 709px) { 
    .banner_ele_small{
      display:block;
    }
  }

  .fixedSubcat{
    position:fixed !important;
    width: 100%;
    margin-top: 0;
    padding-bottom: 10px;
    background-color: white;
}

@media only screen and (max-width: 450px) { 
  .fixedSubcat{
    padding-top:5px;
    padding-bottom: 5px;
}
}

.Left_subcatDiv{
  width:96%;
}
@media only screen and (max-width: 2500px) { 
  .Left_subcatDiv{
    justify-content: flex-start;
  }
}

.productBox img{
  width:100%;
  max-width:100%;
  max-height:100%;
  background-color: white;
}

.floorBox{
  width:17%;height:20px;
  max-width:40px;
  position:absolute;
  right:0;
  top:0;
  border-bottom-left-radius:5px;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:500;
 }
 .floorBox h6{
  transform: scale(0.8);
  transform-origin: center center;
 }
 @media screen and (min-width: 1080px) and (max-width: 1253px){

  .floorBox{
    width:17%;
    border-bottom-left-radius:5px;
   }

   .floorBox h6{
    font-size: clamp(0.75rem, 0.5444rem + 1.3158vw, 1.0625rem);
   }
  }

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

    .floorBox{
      width:17%;
      border-bottom-left-radius:5px;
     }

     .floorBox h6{
      font-size: clamp(0.75rem, 0.5444rem + 1.3158vw, 1.0625rem);
     }
      }

      @media screen and (min-width: 790px){
        .floorBox{
         height:25px;
        }
       }

  @media screen and (max-width: 640px){
       .floorBox{
        height:20px;
       }
      }


        /*start*/
        .largeProductBox{
          width:calc(86vw + 10px) !important;
          height: calc(43.6vw * 1.1) ;
          border-radius:10px !important;
          display: flex;
          justify-content: center;
          align-items: center;
        }




        @media only screen and (min-width: 768px){
            /*start*/
        .largeProductBox{
          width:calc(56vw + 10px) !important;
          height: calc(28.3vw * 1.1) ;
          border-radius:15px !important;
        }
        }
        
 

        @media only screen and (min-width: 1300px){
          /*start*/
        .largeProductBox{
        width:calc(28vw + 10px) !important;
        height: calc(14.16vw * 1.1) ;
        border-radius:15px !important;
        }
        }

        /*start*/
        .bannerProductBox{
          border:none;
          width:95% !important;
          border-radius:5px !important;
        }
        
        @media only screen and (min-width: 768px){
            /*start*/
        .bannerProductBox{
          width:95% !important;
          border-radius:5px !important;
        }
        }
        
        @media only screen and (min-width: 1080px){
          /*start*/
        .bannerProductBox{
        width:95% !important;
        border-radius:5px !important;
        max-width:1080px;
        }
        }

        .super_fix{
          position: fixed;
    bottom: 20px;
    left: 0;
    z-index: 9999;
    width:100% !important;
    border-radius:initial !important;
    border:none !important;
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
    max-width:initial !important;
        }

        .super_fix img{
          max-width:1080px !important;
        }

        @media only screen and (min-width: 1080px){
          /*start*/
          .super_fix{
      justify-content: center;
      align-items: flex-end;
          }
        }




        @media only screen and (min-width: 1300px) { 
.fixedcontent{
  max-width:3000px;
}


.headerDiv{

max-width:3000px;
/*
height:500px;
overflow:hidden;
*/
}

#headerImg{
  object-fit:initial;
 /* position: absolute;*/
    z-index: 0;
}

        }

        @media only screen and (min-width: 1300px) { 
          .productBox{
          width:14vw;
          height:calc(14vw * 1.1);
          }
                  }

                  @media only screen and (max-height: 500px) { 
                    .fixedcontent{
                      height:14%;
                      padding:10px 0 0 0;
                    }
                    .web_title {
                      font-size: 180%;
                  }
                  .productBox {
                    width: 21vw;
                    height:calc(21vw * 1.1);
                }
                  }


                  .product_container{
                    width:100%;
                    display:flex;
                    flex-direction: row;
                    flex-wrap:wrap;
                    justify-content: center;
                    align-items: center;
                    gap:1.5vw;
                    padding:0vw 0;
                    }
.productBox{
  position:relative;
  border:3px solid #108d43;
  border-radius:15px;
  }
  .floor{
    width:20%;
    height:22px;
    position:absolute;
    top:-2px;
    right:-1px;
    border-top-right-radius: 14px;
    border-bottom-left-radius: 5px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    margin:0;
  }

  .largeProductBox .floor{
    width:10%;
  }
  
  .floor_gf{
    background-color:#ff3366;
  }
  .floor_1f{
    background-color:#ff3333;
  }
  .floor_2f{
    background-color:#ff6633;
  }
  .floor_3f{
    background-color:#ff9933;
  }
  .floor_4f{
    background-color:#cccc33;
  }
  .floor_5f{
    background-color:#99cc33;
  }
  .floor_6f{
    background-color:#66cccc;
  }
  .floor_7f{
    background-color:#009933;
  }
  .floor_8f{
    background-color:#3366ff;
  }
  .floor_9f{
    background-color:#993399;
  }

  .floor_11f{
    background-color:#994c33;
  }
  
  .estoreBanner{
    width:95%;
    max-width:3000px;
    text-align: center;
    font-size:14px;
  }
  @media screen and (max-width: 768px){
    .floor{
      border-top-right-radius: 9px;
      border-bottom-left-radius: 5px;
    }
    
    }

    @media screen and (max-width: 500px){
      .floor{
       transform:scale(0.75);
       transform-origin: top right;
       width:22%;
       height:18px;
       right:-3px;
       top:0px;
       right:0px;
      }

      .largeProductBox .floor{
        width:11%;
        height:18px;
      }
      }

     /* mobile */
 @media screen and (max-width: 500px){
/* product container*/
.product_container{
  padding:1vw 0;
  }

  .estoreBanner{
    width:100%;
  }
 } 

 @media screen and (min-width: 1500px){
  .product_container{
    max-width:1500px;
    margin:0 auto;
    }}

    .lazyImg{
      max-width:18vw;
      max-height: calc(18vw * 1.1);
  
    }

    .longImg{
      max-width:calc(36vw + 10px);
      max-height: calc(18vw * 1.1);
    }

    @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);
      }
    
      .longImg{
        max-width:calc(44vw + 10px);
        max-height: calc(22vw * 1.1);
      }
    
    }


 @media screen and (max-width: 768px){
  /* make the subCat smaller than 12px when window < 400px */
  .lazyImg{
    max-width:30vw;
    max-height: calc(30vw * 1.1);
    }

    .longImg{
      max-width:calc(60vw + 10px);
      max-height: calc(30vw * 1.1);
    }
  
    .productBox{

      border-radius:10px;
      }}


    @media screen and (max-width: 500px){
      /* make the subCat smaller than 12px when window < 400px */
      .lazyImg{
       max-width:44vw;
        max-height: calc(44vw * 1.1);
      }

      .longImg{
        max-width:calc(88vw + 10px);
        max-height: calc(44vw * 1.1);
      }
    
      .subcat h2{
        font-size:12px;
      }

      .productDiv {
        gap: 5px;
    }

    .productBox {
      width: 44vw;
      height: calc(44vw* 1.1);
  }

  .largeProductBox{
    width: calc(44vw * 2 + 5);
    height: calc(43.6vw * 1.1);
  }
    }

      @media screen and (min-width: 1500px){
    
      .lazyImg{
        max-width:calc(1500px / 6);
        max-height: calc(1500px / 6 * 1.1);
      }
    
      .longImg{
        max-width:calc(1500px / 3 + 10px);
        max-height: calc(1500px / 6 * 1.1);
      }
  
    }

    .BannerProductBox{
      width:100% !important;
      height:auto !important;
      border:none !important;
      padding: 20px;
    }
    
    .BannerProductBox img{
      width:100% !important;
      max-width:1000px;
      height:initial !important;
    }

    @media only screen and (max-width: 1300px){
      .BannerProductBox{
        width:calc(90vw + 10px) !important;
      }
      .BannerProductBox img{
        width:100% !important;
      }
    }

    .wine_notice{
      width: 100%;
    font-size: 10px;
    transform: scale(0.7);
    transform-origin: 50% 50%;
    text-align: center;
    line-height: 1.5;
    }


    @media only screen and (min-width: 750px){
      .wine_notice{
        width: 100%;
      font-size: 12px;
      transform: scale(0.9);
      text-align: center;
      white-space: nowrap;
      }
    }

    .image1{
      background-image: url(../jpg/product/toy/[6F][large]kid_toys-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 101% auto;
    }

    .image2{
      background-image: url(../jpg/product/toy/[6F][large]kid_toys-06.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 101% auto;
    }

    .image3{
      background-image: url(../jpg/product/toy/[6F][large]kid_toys-25.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 101% auto;
    }

    .image4{
      background-image: url(../jpg/product/toy/[6F][large]kid_toys-34.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 101% auto;
    }