@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap);
@charset "UTF-8";
/**
* 團購頁面
*/
.badge {
  font-size: 1.6vw;
  border-radius: 100px;
}

/* 12/22 許願板更新 */
.price-group {
  
  /* 2023 3/9更新---start */
  /* 2023 3/9更新---end */
}
.price-group .board {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.price-group .board .hope {
  height: 8rem;
  overflow: hidden;
  overflow-y: auto;
  width: 90%;
  margin: 0 auto 0;
}
.price-group .board .board-text {
  margin-left: 10px;
  width: 48%;
}
.price-group .board .board-text p {
  height: auto;
}
.price-group .product {
  width: 100%;
  margin: 0 auto 0%;
}
.price-group .dirtybuble {
  width: 20%;
}
.price-group .front-title a {
  width: 24%;
}
.price-group .front-title a:nth-of-type(1), .price-group .front-title a:nth-of-type(2) {
  width: 24%;
}

.price-group .buttons{
  display: flex;
  margin: 0 auto;
  justify-content: center;
  text-align: center;
  width: 45%;
}

.price-group .buttons a{
  margin: 0 7px;
  cursor: pointer;
}

.price-group .note{
  padding: 1%;
  font-size: 1.3em;
  color: #333333;
  font-weight: bold;
}

.price-group .note2{
  font-size: 1.2em;
  color: #eb7f00;
  padding-bottom: 10%;
}


/* 2023 3/9更新---start */
.price .login {
  width: 100%;
}

.price .text{
  margin: 2% auto 2%;
}

/* 2023 3/23更新 */
#group-container .background {
  background-image: none;
  padding-bottom: 33%;
}
#group-container .background .title {
  left: 6%;
  top: 10%;
}
#group-container .background .timerarea {
  top: 73%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.special-box {
  margin: 0 auto 0;
}

.rightbtn {
  display: none !important;
}

section .title {
  width: 85%;
  margin: 5% auto 0;
}

.price-group .front-title {
  max-width: 900px;
  
}

.price-group .front-title a {
  margin-bottom: 2%;
  cursor: pointer;
}

.price{
  margin: 2% auto;
  width: 70%;
}

#group-container .background2{
  max-width: 100%;
  background-position: 0 0;
  background-attachment: unset;
  top: 0;
  z-index: -1;
  background-repeat: repeat-y;
}

body{
  background-color: #f2ede7;
}

@media only screen and (max-width: 1700px) {
  #group-container .background .timerarea {
    top: 71%;
  }
}
@media only screen and (max-width: 1600px) {
  .special-box {
    margin: 0 auto 0;
  }

  #group-container .background {
    padding-bottom: 38%;
  }
  #group-container .background .title {
    width: 70%;
    top: 5%;
    left: 11%;
  }
  #group-container .background .timerarea {
    top: 68%;
  }
}
@media only screen and (max-width: 1145px) {
  .price-group .dirtybuble {
    left: -45%;
  }
}
/* 2023 3/9更新---end */
@media only screen and (max-width: 992px) {
  /* 12/22 許願板更新 */
  .price-group .board .board-text {
    width: 100%;
    margin-bottom: 5%;
  }
  .price-group .board .board-text p {
    line-height: 4em;
  }
  .price-group .board .board-text .texts {
    top: 20%;
  }

  .special-box {
    margin: 0 auto 0;
  }

  .board .texts {
    top: 28%;
  }

  .badge {
    font-size: 1.8vw;
  }

  #group-container .background {
    padding-bottom: 48%;
  }
  #group-container .background .title {
    width: 80%;
    left: 11%;
    top: 15%;
  }
  #group-container .background .timerarea {
    left: -2%;
    top: 72%;
  }
}
@media only screen and (max-width: 768px) {
  .board .texts {
    top: 22%;
  }

  .badge {
    font-size: 2.6vw;
  }
}
@media only screen and (min-width: 577px) and (max-width: 600px) {
  #group-container .background {
    padding-bottom: 47%;
  }
  #group-container .background .title {
    left: 5%;
  }

  .badge {
    font-size: 2.5vw;
  }
}
@media only screen and (max-width: 576px) {
  .price-group .board .board-text p {
    line-height: normal;
  }
  .price-group .front-title a {
    width: 24%;
    margin: 4px 5px;
  }
  .price{
    width: 90%;
  }

  #group-container .background {
    padding-bottom: 58%;
  }
  #group-container .background .title {
    width: 89%;
    left: 5%;
    top: 27%;

  }
  #group-container .background .timerarea {
    left: -5%;
    top: 80%;
  }

  .board4 .texts {
    top: 8%;
  }

  .price-group .note{
    font-size: .9em;
  }
  
  .price-group .note2{
    font-size: .8em;
  }

  .price-group .buttons{
    width: 100%;
    padding: 5px;
  }

  div#gotop {
    left: -67%;
    top: 84%;
}
}
@media only screen and (max-width: 376px) {
  div#gotop {
    left: -73%;
  }

  .price-group .board .hope {
    height: 7.6rem;
  }
}
@media only screen and (max-width: 360px) {
  .price-group .board .hope {
    height: 7rem;
  }

  .badge {
    font-size: 2vw;
  }
}
@media only screen and (max-width: 320px) {
  .price-group .board .hope {
    height: 6rem;
  }

  .special-box {
    margin: 0 auto 0;
  }

  #group-container .background {
    padding-bottom: 59%;
  }
  #group-container .background .timerarea {
    top: 63%;
  }

  .badge {
    font-size: 1.3vw;
  }

  .board-box4 .texts {
    top: 5%;
  }
}