.offerBtn {
  transition: all 0.3s;
}

.offerBtn:hover {
  transform: translateY(5%);
}
.offerBtn--close {
    transform: translateY(-100%);
    opacity: 0;
}
.offerBtnAni{
    transform-origin: center center;
    transition: all 0.5s;
}
.offerPrice--close{
    opacity: 0;
}
.offerPrice--open{
    opacity: 1;
}
.price_first{
    top: 0;
}
.offer01 .price_final{
    -webkit-mask: url("../images/thing_55b.png") no-repeat center center;
    mask: url("../images/thing_55b.png") no-repeat center center;
    mask: url("../images/thing_55b.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.offer02 .price_final{
    -webkit-mask: url("../images/thing_58b.png") no-repeat center center;
    mask: url("../images/thing_58b.png") no-repeat center center;
    mask: url("../images/thing_58b.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.offer01-1 {
  top: 11.6%;
  left: 3%;
  width: 94.1%;
}
.offer01-2 {
    top: 15.5%;
    left: 0%;
    width: 100%;
    -webkit-mask: url("../images/thing_53.png") no-repeat center center;
    mask: url("../images/thing_53.png") no-repeat center center;
    mask: url("../images/thing_53.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.offer01-3 {
    top: 50.4%;
    left: 58%;
    width: 32.6%;
}
.offer01-4 {
    top: 62%;
    left: 8.1%;
    width: 96.8%;
}
.offer01-5 {
    top: 74%;
    left: 2.45%;
    width: 95.1%;
    overflow: hidden;
    height: 7%;
}
.offer02-1 {
  top: 10.2%;
  left: 3%;
  width: 94.1%;
}
.offer02-2 {
    top: 16%;
    left: 0.5%;
    width: 100%;
    -webkit-mask: url("../images/thing_56-1.png") no-repeat center center;
    mask: url("../images/thing_56-1.png") no-repeat center center;
    mask: url("../images/thing_56-1.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.offer02-2 img{
    opacity: 0;
}
.offer02-3 {
    top: 50.4%;
    left: 58%;
    width: 32.6%;
}
.offer02-4 {
    top: 62%;
    left: 8.1%;
    width: 96.8%;
}
.offer02-5 {
    top: 74%;
    left: 2.45%;
    width: 95.1%;
    overflow: hidden;
    height: 7%;
}
.offer03-1 {
    top: 11.5%;
    left: 1%;
    width: 63%;
    -webkit-mask: url("../images/thing_59.png") no-repeat center center;
    mask: url("../images/thing_59.png") no-repeat center center;
    mask: url("../images/thing_59.webp") no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.offer03-2 {
    top: 19.5%;
    left: 60%;
    width: 35%;
}
.offer03-3 {
    top: 70%;
    left: 2.5%;
    width: 95.1%;
}
.offer04-1 {
    top: 64%;
    left: 40.5%;
    width: 41.4%;
}
/* Flip Card Animation */
.flip-container {
  perspective: 1000px; /* 增加 3D 效果的景深 */
  transform-style: preserve-3d;
}

.flip-container .flip-front,
.flip-container .flip-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden; /* 隱藏元素的背面 */
  transition: transform 0.6s; /* 翻轉動畫時間 */
  transform-style: preserve-3d;
  cursor: pointer;
}

/* 背面圖片預先翻轉 180 度 */
.flip-container .flip-back {
  transform: rotateX(180deg);
}

/* 當容器被點擊 (加上 is-flipped class) 時，翻轉正面和背面 */
.flip-container.is-flipped .flip-front {
  transform: rotateX(180deg);
}

.flip-container.is-flipped .flip-back {
  transform: rotateX(360deg); /* 或 rotateY(0deg) */
}