/*     product main        */
.backgroundCover{
    z-index: 51;
}
.verti-nav.open{
    position: relative;
    z-index: 52;
    width: 34rem;
    right: 0;
    display: flex;
    float: right;
    cursor: auto ;
    transition: all 1s;
}
.verti-nav{
    position: relative;
    z-index: 52;
    width: 34rem;
    right: -60rem;
    display: flex;
    float: right;
    cursor: auto ;
    transition: all 1s;
}


/*//////////////////////////// switchController    ////////////////////////////////////*/
.switchController{
  z-index: -999999;
  width: 0%;
  height: 0;
  opacity: 0;
}

/*////////////////////  product   BackGround setting   ///////////////////   */
.blueBar{
    background-color: rgb(0 129 204 / 90%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color:black;
    height: 15%;
    width: 3rem;
    z-index: 52;
    left: -1.8rem;
   
}
.greenBarDiv.open{
  position: absolute;
  -ms-transform: skew(-20deg); /* IE 9 */
  -webkit-transform: skew(-20deg); /* Chrome, Safari, Opera */
  transform: skew(-20deg); /* Standard syntax */
  width: 30%;
  overflow: hidden;
  height: 100%;
  right: -11.3rem;
  bottom:0;
  transition: 0.05s;
  z-index: 50;
}
.greenBarDiv{
  position: absolute;
  -ms-transform: skew(-20deg); /* IE 9 */
  -webkit-transform: skew(-20deg); /* Chrome, Safari, Opera */
  transform: skew(-20deg); /* Standard syntax */
  width: 30%;
  overflow: hidden;
  height: 0;
  right: 2rem;
  bottom:0;
  transition: 0.0.5s;
  z-index: 50;
}
.greenBar{
    background-color:  rgb(0 153 68 / 90%);
   
    
    color:black;
    height: 30%;
    width: 3rem;
    bottom:0;
    z-index: 52;
    right:0;
    
}
.productBackground{
    background-color: rgb(240 240 240 / 90%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color:black;
    height: 100%;
    width: 50rem;
    max-width: 50rem;
    -ms-transform: skew(-20deg); /* IE 9 */
    -webkit-transform: skew(-20deg); /* Chrome, Safari, Opera */
    transform: skew(-20deg); /* Standard syntax */
    z-index: 50;
    right:-10rem;
    top: 0;
}

  .productBackground--expanded {
    animation-name: menuAnimation;
    animation-duration: 0.2s;
    animation-timing-function: linear;
  }
  
  .productBackground__contents--expanded {
    animation-name: menuContentsAnimation;
    animation-duration: 0.2s;
    animation-timing-function: linear;
  }
  .productBackground--collapsed {
    animation-name: menuCollapseAnimation;
  }

  .productBackground__contents--collapsed {
    animation-name: menuCollapseContentsAnimation;
  }

  #expand-container {
    overflow: hidden;
  }
  
  #expand-contract {
    height: 0;
    right: -30rem;
    transition: all 0.5s;
  }
  
  #expand-contract.expanded {
    right: -10rem;
    height: 100%;
  }

  .expand-contract-green{
    /*transition: all 0.5s;
    right: 3.2rem;*/
    
   
    
  }
  .expand-contract-green.expanded {
    /*right: -1.3rem;
    transition: all 0.3s;*/
    
  }
/*///////////////    product content setting    //////////////////  */

.productContent{
    position: absolute;
    width: 43rem;
    right: 0;
    height: 100%;
    z-index: 100;
    color: black;
}

.productContent div{ 
    right:1.8rem;       
}
.productContent .productTextDiv{
  right: 0;
}
.productTextDiv{
  width: 100%;
  height: 32rem;
  position: relative;
  top: 27rem;
  overflow: auto;
  overflow-x:hidden;
}
.productText{
    position: absolute;
    width: 30rem;
    font-size: 1.3rem;
    right: 6%;
    left: 1rem;
}

    
.productIcon{
    position: absolute;
    top: 1rem;
    cursor: pointer;
}
.productLink{
    width: 100%;
    position: absolute;
    top: 5rem;
    text-align: right;

}
.productLink div{
    margin-top: 1rem;
    font-size: 1.3rem;
}
.productLink a{
    margin-top: 1rem;
    text-align: right;
    text-decoration:none;
    cursor: pointer;
    color:black;
}
.productLink div  span{
    border-bottom: 1px black solid;
    font-weight: bolder;
    padding: 0 0.5rem 0 0.5rem;
    margin-right: 0.5rem;
}
.productLink div  img{
    padding-bottom: 0.5rem;
    width: 3rem;
}

.productLink a:visited {
    color: black;
  }
  


.productLink  a:hover {
    color: green;
  }


  
  /* product Name and Titile  */
  .productTitleDiv{
    width: 25rem;
    bottom: 5rem;
    z-index: 100;
    font-size: 3rem;
    text-align: left;
    right: 28rem;
    margin: 0;
}
.productTitleDiv p{
    margin: 0;
    padding-left: 2rem;
}

.productName{
    background-color: #0081CC;
    margin: 0;
}
.productName >p{
  font-weight: bold;
}
.productTitle{
    
    background-color: #009944;
    margin: 0;
    font-size: 1rem;
}
.jcit{
    text-align: right;
    padding-left: 3rem;
}
/*    ***************      AR css  ************     */
.ProductAR{
  bottom: 5rem;
  right: 19rem;
  width: 10rem;
  z-index: 150;
  cursor: pointer;
}
.close-button{
  position: absolute;
  border:0;
  background: 0;
  top: 0;
  right: 0;
  font-size: 2rem;

}
.qrcode_image{
  width: 100%;
  position: relative;
}
/* ////////////////////////RwD Start here //////////////////// */



@media (min-width: 1920px) and (min-height: 1080) {
  .productTextDiv {
    height: 17rem;
  }
  
}

@media (max-width: 1450px) and (max-height: 910px) {
  .productTextDiv {
    height: 17rem;
  }
  
}
@media (max-width: 1281px) and (max-height: 720px) {
  .productTextDiv {
    height: 10rem;
  }
  .productText{
    font-size: 1.1rem;
  }
}

@media (max-width: 1280px) and (max-height: 720px){
  .productLink div {
    font-size: 1rem;
  }
  .productTextDiv {
    height: 8rem;
    top: 17rem;
  }
  .productText{
    font-size: 1rem;
  }
  .productLink div img {
  width: 2rem;
  }
  .productTitleDiv{
    bottom: 3rem;
    right: 21rem;
  }
  .ProductAR{
    bottom: 3rem;
    right: 8rem;
  }
  .qrcodeImage{
    width: 6rem;
  }
  .greenBarDiv.open{
    right: -7.3rem;
  }
}
@media (max-height: 960px){
  .productTextDiv {
    height: 16rem;
    top: 20rem;
  }
}
@media (max-height: 720px){
  .productLink div {
    font-size: 1rem;
  }
  .productTextDiv {
    height: 8rem;
    top: 17rem;
  }
  .productText{
    font-size: 1rem;
  }
  .productLink div img {
  width: 2rem;
  }
  .productTitleDiv{
    bottom: 3rem;
    right: 21rem;
  }
  .ProductAR{
    bottom: 3rem;
    right: 8rem;
  }
  .qrcodeImage{
    width: 6rem;
  }
  .greenBarDiv.open{
    right: -7.3rem;
  }
}
@media (max-width: 1024px){
  .productLink div {
    font-size: 1rem;
  }
  .productTextDiv {
    height: 8rem;
    top: 17rem;
  }
  .productText{
    font-size: 1rem;
  }
  .productLink div img {
  width: 2rem;
  }
  .productTitleDiv{
    bottom: 3rem;
    right: 21rem;
  }
  .ProductAR{
    bottom: 3rem;
    right: 8rem;
  }
  .qrcodeImage{
    width: 6rem;
  }
}


@media (max-width: 768px){
  .verti-nav.mobile.open {
    position: absolute;
    z-index: 155;
    width: 100%;
    right: 0;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    
  }
  .verti-nav.mobile {
    position: absolute;
    z-index: -15;
    width: 100%;
    right: 0;
    opacity: 0;
    transition: 0.5s;
    
  }
  .productContent{
    width: 100%;
  }

  .productTitleDiv {
    width: 15rem;
    bottom: 0;
    font-size: 1.5rem;
    margin: 0;
    left: 0;
    padding: 0;
  }
  .jcit{
   
    padding-left: 1rem;
  }
  .productTextDiv{
    height: 31vh;
    top: 16rem;
    left: 0;
    
  }
  .productText{
    width: 100%;
    right: 0;
    font-size: 1rem;
    padding: 0 1.5rem 0 1.5rem;
  }
  .ProductAR {
    bottom: 0;
    right: 0;
    width: 28vw;
    z-index: 150;
    cursor: pointer;
  }
  .qrcodeImage{
    width: 4rem;
  }
  .productLink div img{
    width: 2rem;
  }


  /*  background content  */
  .productBackground{
    width: 100%;
    max-width: 100%;
    -ms-transform:none ; 
    -webkit-transform:none ;
    transform: none;
   
  }
  #expand-contract.mobile.fadeOut {
    height: 100%;
    right: 0;
    z-index: -10;
    opacity: 0;
    transition: 0.5s;
    }
  #expand-contract.mobile.expanded.fadeIn {
    height: 100%;
    right: 0;
    z-index: 150;
    opacity: 1;
    transition: opacity 0.5s ease-out;
  }
  .blueBar {
    -ms-transform: skew(-20deg); 
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
  }
  .greenBar{
    z-index: 152;
    right: 0;
  }
  .expand-contract-green.expanded {
    transition: 0.2s ease-out;
    
    
    /*transition: all 0.8s;
    height: 30%;*/
    /* height: 0; */
  }
  .expand-contract-green {
    
    transition:  0.2s ease-in;
    /* height: 0; */
}
  .greenBarDiv.open{
    z-index: 152;
    right: -10.3rem;
  }
  .greenBarDiv{
    z-index: 152;
    right: 0;
  }
}
@media (max-width: 450px) and (max-height: 731px){
  .greenBarDiv.open{
    right: -8.3rem;
  }
}
@media (max-width: 450px) and (max-height: 672px){
  .greenBarDiv.open{
    right: -8.3rem;
  }
}