/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  /*padding-bottom: 3rem;*/
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 1rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}


/* My Code
-------------------------------------------------------
 */
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

#toTop {
  position: fixed;
  right: 1rem;
  bottom: -5rem;
  opacity:0;
  animation: toTop linear forwards;
}

@keyframes toTop {
  to {
    opacity: 1;
    bottom:1rem;
  }
}

.page-item.active .page-link {
  background-color: darkred !important;
  border-color: darkred !important;
  color: white !important;
  border-radius: 8px;
}

.page-link {
  color: darkred !important;
}

.modal-content-search{
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.btn-custom {
  background-color: #ff5722;
  color: white;
  border: none;
  width: 100PX;
  /* max-width: 300px; */
  /* padding: 10px; */
  /* border-radius: 25px; */
  /* font-size: 1.2rem; */
  -webkit-border-radius: 50%;
  margin-top: 71px;
  height: 100px;
  margin-right: 65px;
}

.btn-custom:active, .btn-custom:focus {
  box-shadow: none;
}

.gift-explosion {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: #ff5722;
  animation: explode 1s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .btn-custom {
    font-size: 1rem;
    padding: 8px;
  }
}

.btnClose{
  background-color: white;
  -webkit-border-radius: 50%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.modal-content-get-hb {
  /*background: url('../img/gethb.png') no-repeat center center;*/
  background-size: contain; /* 调整为 contain 确保整个图片显示 */
  border: none;
  color: white;
  text-align: center;
  padding: 20px;
  height: 700px; /* 固定高度确保布局稳定 */
  max-width: 100%;
  margin: auto;
}

.modal-content-get-open-hb {
  /*background: url('../img/p-3.png') no-repeat center center;*/
  background-size: contain; /* 调整为 contain 确保整个图片显示 */
  border: none;
  color: white;
  text-align: center;
  padding: 20px;
  height: 700px; /* 固定高度确保布局稳定 */
  max-width: 100%;
  margin: auto;
}

.modal-get-hb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 190px;
  /*height: 100%; !* 确保按钮居中 *!*/
  margin: auto;
  right: 7%;
}

.qianghb{
  cursor: pointer;
  display: block;
  position: absolute;
  width: 70px;
  height: 70px;
  left: 29%;
  top: 46%;
}

@media (min-width: 1024px) {
  .qianghb{
    cursor: pointer;
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    left: 24%;
    top: 49%;
  }
}

/*.btnClickHB{*/
  /*width: 30%;*/
  /*margin-right: 3px;*/
  /*!*background: url('../img/searchBtn.png') no-repeat center center;*!*/
  /*background: url("<?php echo $body['btn_img'] ?>") no-repeat center center;*/
  /*background-size: 100% 100%;*/
/*}*/

.btnAutoHB{
  color: #FEF8EC;
  font-weight: bold;
  border: solid 2px whitesmoke;
  background-image: linear-gradient(to bottom left, red, yellow);
}

.btnAutoHB:hover{
  color: #FEF8EC;
}

/*#Inpuuname{*/
  /*width: 100px;*/
  /*background: url('../img/Inputuname.png') no-repeat center center;*/
  /*background-size: 100% 100%;*/
/*}*/

.hd {
  font-size: 30px;
  font-weight: bold;
  color: white;
  /*background-color: darkred;*/
  border-radius: 8px;
  padding: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.animated{
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.animated.shake {
  animation-name: shake;
}

.time_box {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  /*border-radius: 8px;*/
}

.time {
  position: relative;
  height: 35px;
  width: 35px;
  perspective: 50px;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform: translate3d(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tText{
  font-size: 20px;
  color: white;
}

.count {
  background: white;
  color: darkred;
  display: block;
  font-size: 20px;
  line-height: 35px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

.top,
.bottom {
  position: absolute;
  top: 0;
  width: 100%;
}

.top {
  height: 50%;
  line-height: 35px;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

.bottom {
  line-height: 0;
  height: 50%;
  top: 50%;
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

@keyframes flipTop {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}

@keyframes flipBottom {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

.flipTop {
  animation-name: flipTop;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  z-index: 1;
}

.flipBottom {
  animation-name: flipBottom;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
  z-index: 1;
}

a{
  text-decoration: none !important;
}