@charset "utf-8";
html {
  color: #000;
  background: #fff;
  overflow-y: scroll;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
html * {
  outline: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
  font-family: sans-serif;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
}
input,
select,
textarea {
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
abbr,
acronym {
  border: 0;
  font-variant: normal;
}
del {
  text-decoration: line-through;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: 500;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 500;
}
q:before,
q:after {
  content: "";
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
a:hover {
  text-decoration: underline;
}
ins,
a {
  text-decoration: none;
}

.qrcode {
  height: 250px;
  width: 250px;
  background-color: #fff;
  border: 5px solid #00000000;
}

.qrcode canvas {
  width: 100%;
  height: 100%;
}

.floatingBox,
.bottomBox {
  z-index: 99;
}

.figureBox {
  height: 83vh !important;
  width: 35vw !important;
  background-size: contain;
  z-index: 9999; 
}

.kf{
  position: fixed;
  top: 55%;
  right: 20px;
  animation: kf 2s infinite;
  z-index: 999; 
}
.kf img{
  width: 70px;
}

.mask_content_qr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.391);  /* 背景为半透明黑色 */
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  z-index: 1000;
}

.redBox {
  background: rgba(255, 255, 255, 0);  /* 透明背景 */
  padding: 30px;
  border-radius: 8px;
  width: 90%;  /* 可以根据需要调整宽度 */
  max-width: 300px;  /* 最大宽度，避免在大屏幕上过大 */
}

.qrcode_close {
    width: 30px;
    height: 200px;
    margin-top: -110px;  
    margin-left: 110px;  
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    z-index: 9999;
}

#pc-qrcode {
  position: fixed;
  top: 30px;
  left: 60px;
  z-index: 9999;
}

.qrcodeBox {
  width: 200px;
  height: 200px;
  background: #ffffff00;
  padding: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

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

.additional-image-box {
  width: 500px;
  height: 140px;
  padding: 8px;
  box-shadow: 8px rgba(0, 0, 0, 0.2);
  position: relative; /* 伪元素定位需要 */
}

.additional-image-box::before {
  content: "";
  position: absolute; /* 绝对定位 */
  display: block;
  width: 120%;       /* 宽度可调整 */
  height: 100%;
  background-image: url('../img/tx.png');
  background-size: cover;
  background-position: center;
  left: -6%;        /* 向左偏移10%（可根据需求调整） */
  /* 或 right: -10%;  向右偏移 */
  z-index: 9999;     /* 确保层级 */
}

.hb-swiper-slide {
        width: 100%;
        height: 100%;
        padding: 20vh 12px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        flex-flow: column;
    }

    @keyframes scroll-up {
        0% {
          transform: translateY(0); /* 开始位置 */
        }
        100% {
          transform: translateY(-50%); /* 向上滚动一半内容高度 */
        }
      }

      @keyframes swing-animation {
        15%, 45% {
          transform: rotate(3deg);
          transform-origin: 50% 100%; /* 从底部摆动 */
        }
        30% {
          transform: rotate(-3deg);
          transform-origin: 50% 100%;
        }
        60%, 100% {
          transform: rotate(0deg);
          transform-origin: 50% 100%;
        }
      }
      
      .hbimg {
        animation: swing-animation 1.5s infinite ease-in-out;
      }    

      .swiper-slide >img:nth-child(1) {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        margin-top: -80px; 
    }