/* 2024-1111 start */
.index-banner .ribbon-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.index-banner .ribbon-img > img {
  position: absolute;
  opacity: 0;
}
.index-banner .ribbon-img .dt-1 {
  top: -223px;
  right: 0px;
  -webkit-animation: ribbon-1 0.8s 0.5s 1 linear forwards;
  animation: ribbon-1 0.8s 0.5s 1 linear forwards;
}
.index-banner .ribbon-img .dt-2 {
  top: -320px;
  right: -300px;
  z-index: 2;
  -webkit-animation: ribbon-2 0.8s 1 linear forwards;
  animation: ribbon-2 0.8s 1 linear forwards;
}
.index-banner .ribbon-img .dt-3 {
  top: -141px;
  right: 318px;
  z-index: 5;
  -webkit-animation: ribbon-3 0.8s 0.8s 1 linear forwards;
  animation: ribbon-3 0.8s 0.8s 1 linear forwards;
}
.index-banner .ribbon-img .dt-4 {
  top: -560px;
  right: -1241px;
  z-index: 3;
  -webkit-animation: ribbon-4 0.8s 0.4s 1 linear forwards;
  animation: ribbon-4 0.8s 0.4s 1 linear forwards;
}
.index-banner .ribbon-img .dt-5 {
  top: -442px;
  right: -1075px;
  z-index: 4;
  opacity: 0;
  -webkit-animation: ribbon-5 0.8s 0.6s 1 linear forwards;
  animation: ribbon-5 0.8s 0.6s 1 linear forwards;
}
.index-banner .ribbon-img .dt-6 {
  top: -473px;
  right: -1300px;
  -webkit-animation: ribbon-6 0.8s 0s 1 linear forwards;
  animation: ribbon-6 0.8s 0s 1 linear forwards;
}
.index-banner .ribbon-img .dt-7 {
  top: -268px;
  right: -751px;
  z-index: 5;
  -webkit-animation: ribbon-7 0.8s 1.4s 1 linear forwards;
  animation: ribbon-7 0.8s 1.4s 1 linear forwards;
}
.index-banner .ribbon-img .dt-8 {
  top: -181px;
  right: -1170px;
  -webkit-animation: ribbon-8 1.6s 0s 1 linear forwards;
  animation: ribbon-8 1.6s 0s 1 linear forwards;
}
.index-banner .riibon-four-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.index-banner .riibon-four-img .ribbon-img-center {
  position: relative;
  width: 1440px;
  height: 100%;
  margin: 0 auto;
}
.index-banner .dt-ani-box {
  position: absolute;
  top: 158px;
  right: 0px;
  width: 547px;
  height: 370px;
  z-index: 6;
}
.index-banner .dt-ani-box img {
  position: absolute;
  top: -370px;
  right: -670px;
  width: 547px;
  height: 370px;
  opacity: 0;
}
.index-banner .dt-ani-box img.dt-9 {
  -webkit-animation: ribbon-9 0.8s 1s 1 linear forwards;
  animation: ribbon-9 0.8s 1s 1 linear forwards;
}
.index-banner .dt-ani-box img.dt-10 {
  -webkit-animation: ribbon-9 0.8s 1.3s 1 linear forwards;
  animation: ribbon-9 0.8s 1.3s 1 linear forwards;
}
.index-banner .dt-ani-box img.dt-11 {
  -webkit-animation: ribbon-9 0.8s 1.6s 1 linear forwards;
  animation: ribbon-9 0.8s 1.6s 1 linear forwards;
}
.index-banner .dt-ani-box img.dt-12 {
  -webkit-animation: ribbon-9 0.8s 1.7s 1 linear forwards;
  animation: ribbon-9 0.8s 1.7s 1 linear forwards;
}
.index-banner .dt-ani-box img.dt-13 {
  -webkit-animation: ribbon-9 0.8s 2s 1 linear forwards;
  animation: ribbon-9 0.8s 2s 1 linear forwards;
}
.index-banner .ribbon-center {
  position: relative;
  width: 1440px;
  height: 100%;
  margin: 0 auto;
}
.index-banner .ribbon-center .double-eleven-ani-img {
  position: absolute;
  top: 164px;
  left: 24px;
  z-index: 10;
}
.index-banner .ribbon-center .double-eleven-ani-img img {
  display: block;
}
.index-banner .ribbon-center .banner-gift-one {
  position: absolute;
  top: 104px;
  left: 562px;
  z-index: 10;
}
.index-banner .ribbon-center .banner-gift-one img {
  display: block;
}
.index-banner .ribbon-center .banner-gift-two {
  position: absolute;
  top: 350px;
  left: 464px;
  z-index: 10;
}
.index-banner .ribbon-center .banner-gift-two img {
  display: block;
}
.index-banner .ribbon-center .banner-gift-three {
  position: absolute;
  top: 124px;
  right: -48px;
  z-index: 10;
}
.index-banner .ribbon-center .banner-gift-three img {
  display: block;
}
.index-banner .ribbon-center .get-coupon-scroll-btn {
  position: absolute;
  top: 334px;
  left: 24px;
  width: 182px;
  text-align: center;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  color: #FFFFFF;
  background: linear-gradient(90deg, #FFA578, #FC3D2B);
  border-radius: 4px;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
  z-index: 10;
  border: none;
  cursor: pointer;
  outline: none;
}
.index-banner .ribbon-center .get-coupon-scroll-btn:hover {
  background: #FC3D2B;
}
.index-banner.animate-set .riibon-four-img {
  height: 100%;
  overflow: visible;
}
.index-banner.animate-set .ribbon-img img {
  opacity: 1 !important;
}
.index-banner.animate-set .ribbon-img .dt-3,
.index-banner.animate-set .ribbon-img .dt-4,
.index-banner.animate-set .ribbon-img .dt-5,
.index-banner.animate-set .ribbon-img .dt-7,
.index-banner.animate-set .ribbon-img .dt-8 {
  -webkit-animation: none;
  animation: none;
}
.index-banner.animate-set .ribbon-img .dt-3 {
  top: 0px;
  right: 618px;
  -webkit-animation: ribbon-10 3.6s 1.8s infinite linear !important;
  animation: ribbon-10 3.6s 1.8s infinite linear !important;
}
.index-banner.animate-set .ribbon-img .dt-4 {
  -webkit-animation: ribbon-10 3.6s 1.8s infinite linear !important;
  animation: ribbon-10 3.6s 1.8s infinite linear !important;
}
.index-banner.animate-set .ribbon-img .dt-5 {
  -webkit-animation: ribbon-11 3.6s 0s infinite linear !important;
  animation: ribbon-11 3.6s 0s infinite linear !important;
}
.index-banner.animate-set .ribbon-img .dt-4,
.index-banner.animate-set .ribbon-img .dt-5 {
  top: 0px;
  right: 0px;
}
.index-banner.animate-set .ribbon-img .dt-7 {
  top: 105px;
  right: 26px;
  -webkit-animation: ribbon-10 3.6s 1.8s infinite linear !important;
  animation: ribbon-10 3.6s 1.8s infinite linear !important;
}
.index-banner.animate-set .ribbon-img .dt-8 {
  top: 378px;
  right: 0px;
  -webkit-animation: ribbon-10 3.6s 0s infinite linear !important;
  animation: ribbon-10 3.6s 0s infinite linear !important;
}
.index-banner.animate-set .ribbon-img .dt-ani-box img {
  top: 0px;
  right: 0px;
  -webkit-animation: none;
  animation: none;
}
@keyframes ribbon-1 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-549px, 223px);
    opacity: 1;
  }
}
@keyframes ribbon-2 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-697px, 320px);
    opacity: 1;
  }
}
@keyframes ribbon-3 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-300px, 141px);
    opacity: 1;
  }
}
@keyframes ribbon-4 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-1241px, 560px);
    opacity: 1;
  }
}
@keyframes ribbon-5 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-1075px, 442px);
    opacity: 1;
  }
}
@keyframes ribbon-6 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-1300px, 609px);
    opacity: 1;
  }
}
@keyframes ribbon-7 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-777px, 373px);
    opacity: 1;
  }
}
@keyframes ribbon-8 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-1170px, 559px);
    opacity: 1;
  }
}
@keyframes ribbon-9 {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(-670px, 370px);
    opacity: 1;
  }
}
@keyframes ribbon-10 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(30px, -10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes ribbon-11 {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(20px, -10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}