:root{
  --font-family: "poppins", sans-serif;
  --font-weight: 400;
  --font-style: normal;
}

*{
   font-family: var(--font-family);
   font-weight: var(--font-weight);
}


html{
  scroll-behavior: smooth ! important;
}

body{
  margin:0px ! important;
}

main{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right); 
}

section{
  margin-top:0px ! important; 
}

	
.firstSection{
    
   margin-top:0px ! important; 
}
	

.dDiv{
	width: 100% !important;
	margin-top: 100px !important;
}

	

.dDiv h1{
	padding-top: 70px !important;
	font-weight: bold ! important;
}



#pimg{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
  border-radius: 5px !important;
  transition: all 0.4s ease;
  box-shadow: 1px 2px 2px 2px rgba(250, 196, 47, 0.81); 
  transition: transform .2s rgba(255, 239, 17, 0.65);
}

#pimg:hover{
    box-shadow: 1px 2px 2px 2px rgba(185, 213, 250, 0.81); 
    transition: transform .2s rgba(133, 181, 253, 0.65);
	transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#rImg{
  width: 100% !important;
  height: auto !important;
  object-fit: scale-down;
  aspect-ratio: 16/9;
}


#timg{
  width: 100% !important;
  height: auto !important;
  object-fit: scale-down;
  aspect-ratio: 16/9;
}

.refBtn{
  width: 100% !important;
}

.swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body {
      background: #000;
      color: #000;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .mySwiper2 {
      height: 50%;
      width: 100%;
    }

    .mySwiper {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 80%;
      object-fit: cover;
    }


/*BS thumbnail Section*/


/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  /*background-color: #222;*/
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


.dD2{
  /*background: green !important ;*/

}


h2{
 margin-left:20px ! important;
 margin-top:20px ! important;
}

header{
  font-weight:bold ! important;
}

sup{
  font-size: 3vw !important;
  color: orangered !important;
  font-weight: bold !important;
}

#sum{
  margin-bottom: 20px !important;
  color: red !important;
  font-weight: bold !important;
}

#shareP{
    margin-top:-81px ! important;
    margin-right:12px ! important;
} 

#shareBtn{
    margin-top:0px ! important;
}

#shareBtn:hover{
    cursor: pointer ! important;
}

.addItemBtn{
   margin-top: 5px !important;
   border-radius: 5px !important;
   background: red !important;
}


.addItemBtn:hover{
   background: green !important;
   color: white !important;
   border: 1px solid #f40 !important;
}

.incContainer{
    margin-top:10px ! important;
}

#incDiv{
  margin-top: 0px !important;
}


 /*For Desktop View*/

@media screen and (min-device-width: 1025px){

.dDiv{
	width: 95% !important;
}
   

.dDiv h1{
	padding-top: 60px !important;
    font-size: 1.1vw !important;
}


h2{
  margin-top:40px ! important;
}

sup{
  font-size: 1.2vw !important;
}

.dD1{

}


.dD2{
	margin-top: 0px !important;
	float: inline-end !important;
}



#incDiv{
  margin-top: 30px !important;
}


.chatDiv{
    padding-top:40px ! important;
}

#shareP{
   font-size: 1vw ! important;
   margin-top: -30px !important;
   padding-right:0px ! important;
} 

#shareBtn{
    margin-top:0px ! important;
}

	
#pimg{
  width: 300px !important;
  height: 270px !important;
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
 
}


#pimg:hover{
    box-shadow: 1px 2px 2px 2px rgba(185, 213, 250, 0.81); 
    transition: transform .2s rgba(133, 181, 253, 0.65);
	transform: scale(1.7); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	z-index: 5 !important;
}



#sum{
    margin-top:0px ! important;
    margin-bottom:10px ! important;
}


#remain{
  font-size: 1vw ! important;
}

#chatP{
    font-size: 1.4vw ! important;
    margin-top: -30px !important;
    
}

#telP{
    font-size: 1vw ! important;
    margin-top: -5px !important;
    
}


.addItemBtn{
    float: right ! important;
    width: 50% !important;
    border-radius: 5px !important;
    margin:10px auto ! important;
    margin-top:10px ! important;
}

.btn-danger, .modaBtn{
  font-size:1vw ! important;   
}


}
	

	
/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {

.dDiv{
	width: 100% !important;
	margin-top: 100px !important;
}


.dDiv h1{
	margin-top: 30px !important;
    font-size: 1.7vw !important;
}

.dD2{
   width: 320px !important;
}


h2{
  font-size: 2vw ! important;
}

#myPname{
    font-size:1.3vw ! important;
}

#myPs{
 font-size:1.2vw ! important;
}

sup{
  font-size:1.4vw !important;
}

#pimg{
  width: 100% !important;
  height: 120px !important;
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
 
}

#rImg{
  width: 100% !important;
  height: auto  !important;
  aspect-ratio: 10/8 !important;
  object-fit: contain !important;  
}


#sum{
    margin-top:0px ! important;
    margin-bottom:10px ! important;
}

.addItemBtn{
    width:100% ! important;
    margin:10px auto ! important;
    margin-top:10px ! important;
}

#sold{
  font-size: 1.1vw ! important;  
}

#remain{
  font-size: 1.1vw ! important;
}


#chatP{
    font-size: 1.4vw ! important;
    margin-top: 90px !important;
    
}

#telP{
    font-size: 1.6vw ! important;
    margin-top: 5px !important;
    
}



.addItemBtn{
    float: right ! important;
    width: 70% !important;
    font-size:1.4vw ! important;
    border-radius: 5px !important;
    margin:10px auto ! important;
    margin-top:30px ! important;
}

.btn-danger, .modaBtn{
  font-size:1.1vw ! important;   
}



}
	
	

/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
	

.dDiv{
	width: 100% !important;
	margin-top: 90px !important;
}


.dDiv h1{
	margin-top: 30px !important;
    font-size: 2vw !important;
}

.dD2{
   width: 320px !important;
}

#desc-tab, #feat-tab, #policy-tab{
  font-size: 2vw !important;  
}


h2{
  font-size: 2.2vw ! important;
}

#myPname{
    font-size:1.3vw ! important;
}

#myPs{
 font-size:1.4vw ! important;
}

sup{
  font-size:1.4vw !important;
}

#pimg{
  width: 100% !important;
  height: 120px !important;
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
 
}

#rImg{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 10/8 !important;
  object-fit: contain !important;  
}


#sum{
    margin-top:0px ! important;
    margin-bottom:10px ! important;
}

.addItemBtn{
    width:100% ! important;
    margin:10px auto ! important;
    margin-top:10px ! important;
}

#sold{
  font-size: 1.1vw ! important;  
}

#remain{
  font-size: 1.7vw ! important;
}


#chatP{
    font-size: 1.8vw ! important;
    margin-top: 90px !important;
    
}

#telP{
    font-size: 1.8vw ! important;
    margin-top: 5px !important;
    
}



.addItemBtn{
    float: right ! important;
    width: 100% !important;
    font-size:1.4vw ! important;
    border-radius: 5px !important;
    margin:10px auto ! important;
    margin-top:30px ! important;
}

.btn-danger, .modaBtn{
  font-size:2.2vw ! important;   
}



}
		

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

.dDiv{
	width: 100% !important;
	margin-top: 100px !important;
}


.dDiv h1{
	margin-top: 0px !important;
    font-size: 4vw !important;
}

.dD2{
   width: 320px !important;
}


#myPname{
    font-size:3.2vw ! important;
}

#myPs{
 font-size:3.1vw ! important;
}

.modal-title{
   font-size:3.8vw !important;
}

sup{
  font-size:3.8 !important;
}

#pimg{
  width: 100% !important;
  height: 240px !important;
  aspect-ratio: 16/9 !important;
  object-fit: contain !important;
 
}

#rImg{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 10/8 !important;
  object-fit: contain !important;  
}

#sum{
    margin-top:0px ! important;
    margin-bottom:10px ! important;
}

.addItemBtn{
    width:100% ! important;
    margin:10px auto ! important;
    margin-top:10px ! important;
}

.btn-danger, .modaBtn{
  font-size:3.2vw ! important;   
}

#sold{
  font-size: 3vw ! important;  
}

#remain{
  font-size: 3vw ! important;
}

#chatP{
    font-size: 4vw ! important;
    margin-top: 12px !important;
    
}

#telP{
    font-size: 4vw ! important;
    margin-top: -5px !important;
    
}

#shareP{
   font-size: 4vw ! important;
   margin-top: -26px !important;
   padding-right:0px ! important;
} 

#shareBtn{
   
}


#incDiv{
  margin-top: 5px !important;
}


}