/*按鈕 CSS*/
.counter-btn:before{
  content: "";
/*   border: 1px solid black; */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 0%;
  padding-top: 0%;
  border-radius: 50%;
/*   background-color: rgba(232, 40, 53, 0.48); */
  position: absolute;
  transition: all 0.2s;
}
.btn-pink:before{
  background-color: rgba(232, 40, 53, 0.48);
}
.btn-blue:before{
  background-color: rgba(19, 93, 243, 0.48);
}
.counter-btn {
      /*width: 100px;
    height: 100px;*/
      width: 10%;
      padding-top:10%;
/*     border: 1px solid #FF8C94; */
    border-radius: 50%;
    position: relative;
/*     background-color: #FF8C94; */
    box-shadow: 5px 5px 5px rgba(60, 58, 58, 0.47);
    transition-duration: 0.2s;
    overflow: hidden;
}
.btn-pink {
   border: 1px solid #FF8C94;
   background-color: #FF8C94;
   position: absolute;
   z-index: 50;
    top: 32%;
    left: 5%;
}
.btn-blue {
   border: 1px solid #608fee;
   background-color: #608fee;
    position: absolute;
   z-index: 50;
   top: 32%;
   right: 5%;
}
.counter-btn > i {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:180%;
}
.counter-btn:hover {
  cursor: pointer;
}
.counter-btn:hover:before{
  width: 120%;
  padding-top: 120%;
}
.counter-btn:active{
    box-shadow: 1px 1px 1px rgba(60, 58, 58, 0.47);
}

/* Select amount*/
select[name="amount"]:active, select[name="amount"]:focus{
    border: 1px solid #FF8C94;
}

/**/
.content-frame-riceyello{
    background-color: #FFD3B5;
    text-align: center;
    font-size: 16px;
    color: white;
    padding: 40% 0px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    line-height: 30px;
    text-align: justify;
}
.context-frame-inner {
    width: 100%;        
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.content-title-h1 {
    text-align: center;
}
.content-cloud-words {
    line-height: 28px;
    width: 80%;
    position: absolute;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);      
    text-align: justify; 
}
.piece-img-size {
    width: 80%;
}

.presale-cart-btn{
    color: #fff;
    background-color: #FF8C94;
    box-shadow: 5px 5px 5px #808080;
}
.presale-cart-btn:hover {
    background-color: #fff;
    color: #FF8C94;
    border: 1px solid #FF8C94;
    box-shadow: 0px 0px 0px #808080;
    transition: all 0.2s;
}
.unsell-cart-btn{
    color: #fff;
    background-color: #7a7878;
    transition-duration: 0.5s;
        font-size: 1.3333em;
        letter-spacing: 1px;
        padding: 12px 70px;
        border-radius: 10px;
        display: inline-block;
        font-weight: bold;
        text-align: center;
        margin: 10px 10px 10px 10px;
    box-shadow: 5px 5px 5px #808080;
    cursor: not-allowed;
}

.fruit-hr {
    margin-top: 20px;
}
.mobile-m-t-2per {
    margin-top: 2%;
}
.counter-number{
    position: absolute;
    top: 56%;   
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
}
.counter-number-love{
    color: #FF8C94;
    left: 1%;
}
.counter-number-like{
    color: #608fee;
    right: 2%;
}
/* mobile & web Custom Show in 992px
    **/
.mobileShow__bg-cloud{
    display: block;
    height: 550px;
}
.webShow__bg-cloud{
    display: none;
}
@media (min-width: 320px){
    .content-frame-riceyello{
        padding: 10% 0px;
    }
}
@media (min-width: 375px){
    .content-frame-riceyello{
        padding: 12% 0px;
    }
}
@media (min-width: 500px){
    .counter-number-love{
    left: 4%;
    }
    .counter-number-like{
        right: 5%;
    }
     .content-frame-riceyello{
        padding: 2% 0px;
    }
     .mobileShow__bg-cloud{
         height: 650px;
         width: 100%;
     }

}
@media (min-width: 768px){
    .content-cloud-words{
        width: 100%;
        padding: 0px 12%;
    }

    .counter-btn > i {
        font-size: 300%;
    }
    .context-frame-inner {
    width: 100%;
    }
    .btn-pink {
       top: 40%;
       /*left: 10%;*/
    }
    .btn-blue {
       top: 40%;
       /*right: 10%;*/
    }
    .counter-number{
    position: absolute;
    top: 65%;   
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
    }   
    .counter-number-love{
        color: #FF8C94;
        left: 5%;
    }
    .counter-number-like{
        color: #608fee;
        right: 5%;
    }
    .step-font-set {
        color: #6b6b6b;
        font-size: 1em;
    }
    .content-frame-riceyello{
        padding: 4% 0px;
    }

    .mobileShow__bg-cloud{
         display: none;
     }
     .webShow__bg-cloud{
         display: block;
        max-width: 152%;
         margin-left: -29%;
     }
}

@media (min-width: 769px){
    .content-margin{
        padding: 20px 12%;
    }

}
 @media (min-width: 992px){

     .content-cloud-words {
         width: 80%;
     }
    .content-margin{
        padding: 20px 9%;
    }
    .webShow__bg-cloud{
        max-width: 125%;
    margin-left: -16%;
}
    }

@media (min-width: 1130px){
    .webShow__bg-cloud{
        max-width: 125%;
        margin-left: -14%;
    }
}
 @media (min-width: 1200px){
     .webShow__bg-cloud{
        max-width: 100%;
         margin-left: initial;
     }
 }
 @media (min-width: 1240px){
         .counter-number-love{
        color: #FF8C94;
        left: 7%;
    }
    .counter-number-like{
        color: #608fee;
        right: 7%;
    }
    .content-margin{
        padding: 20px 1%;
    }
     .webShow__bg-cloud{
        margin-left: auto;
        margin-right: auto;
     }
}
 @media (min-width: 1500px){
     .context-frame-inner {
        width: 80%;
    }
}