@charset "UTF-8";
/* CSS Document */
/*-- HTML Banner Demo CSS - Start----*/
.index_banner_1 {
  background: url(https://fanshare.hk/CC_upload/mabellecom/banner-images/20220531/bg-1.jpg);
	background-size: auto 100%;
}
.banner-20220531-main-img {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}
.banner-20220531-main-img img {
  height: 100%;
  width: auto;
  margin: 0 auto;
}
.banner-20220531-color-bar {
  width: 100%;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 13;
}
.banner-20220531-color-bar img {
  width: 100%;
  height: 100%;
}
.banner-20220531-content {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 11;
  text-align: center;
}
.banner-20220531-content img {
  width: auto;
  height: calc(94% - 180px);
  margin: 0 auto;
  margin-top: 180px;
}
.banner-20220531-jewelry {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 12;
  text-align: center;
  animation-name: jewelry;
  animation-duration: 4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes jewelry {
  from {
    top: -100px;
  }
  to {
    top: 0px;
  }
}
.banner-20220531-jewelry img {
  width: auto;
  height: 53%;
  margin: 0 auto;
}
@media(max-width:768px) {
  .banner-20220531-content img {
    position: absolute;
    left: -50%;
    right: -50%;
  }
  .banner-20220531-main-img img {
    display: none;
  }
  .banner-20220531-main-img {
    background: url(https://fanshare.hk/CC_upload/mabellecom/banner-images/20220531/bg-2.png);
    background-position: center;
    background-size: auto 100%
  }
}
/*-- HTML Banner Demo CSS - End----*/