/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js??clonedRuleSet-3.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[3]!./src/components/home/small-banner/index.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.cmp__small-banner {
  width: 100%;
  height: calc(var(--rpx, 1px) * 400);
  position: relative;
  overflow: hidden;
}
.cmp__small-banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
  opacity: 1 !important;
}
.cmp__small-banner .msg-container {
  width: calc(var(--rpx, 1px) * 410);
  height: calc(var(--rpx, 1px) * 144);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: calc(var(--rpx, 1px) * 48);
  top: calc(var(--rpx, 1px) * 128);
  left: 60vw;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}
@media (max-width: 767.98px) {
  .cmp__small-banner .msg-container {
    top: calc(var(--rpx, 1px) * 55);
    left: calc(var(--rpx, 1px) * -17);
    gap: 32px;
  }
}
.cmp__small-banner .msg-container .msg {
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.01em;
  text-align: left;
  color: rgb(255, 255, 255);
}
.cmp__small-banner .msg-container .banner-btn .btn {
  padding: 16px 64px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: rgb(255, 255, 255);
  border: 0.7px solid rgb(255, 255, 255);
  background: none;
}
@media (max-width: 767.98px) {
  .cmp__small-banner .msg-container .banner-btn .btn {
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgb(255, 255, 255);
    border: 0.7px solid rgb(255, 255, 255);
    background: none;
  }
}
@media (min-width: 767.98px) {
  .cmp__small-banner .msg-container .banner-btn .btn:hover {
    color: #000;
    border: 0.7px solid rgb(255, 255, 255);
    background: #fff;
  }
}
.cmp__small-banner .unActive {
  display: none;
}
.cmp__small-banner .active {
  -webkit-animation: fade-in-up 1s ease-out forwards;
          animation: fade-in-up 1s ease-out forwards;
}
.cmp__small-banner .msg-container.dark .msg {
  color: rgb(0, 0, 0);
}
.cmp__small-banner .msg-container.dark .banner-btn .btn {
  color: rgb(0, 0, 0);
  border: 0.7px solid rgb(0, 0, 0);
  background: none;
}
@media (max-width: 767.98px) {
  .cmp__small-banner .msg-container.dark .banner-btn .btn {
    color: rgb(0, 0, 0);
    border: 0.7px solid rgb(0, 0, 0);
    background: none;
  }
}
@media (min-width: 767.98px) {
  .cmp__small-banner .msg-container.dark .banner-btn .btn:hover {
    color: rgb(255, 255, 255);
    border: 0.7px solid rgb(0, 0, 0);
    background: rgb(0, 0, 0);
  }
}