/* Add your CSS styles here */
body {
  font-family: Arial, sans-serif;
  background-color: #c02b10;
}
.login-pop {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  z-index: 33;
}
.login-pop .login {
  width: 100%;
  height: 1.85rem;
  line-height: 1.85rem;
  background: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  font-size: 0.6rem;
  color: #FFFFFF;
  text-indent: 0.8rem;
}
.login-pop .login .loginbtn {
  text-decoration: underline;
}
.container{
  position: relative;
  padding-bottom: 3.8rem;
}
.logo {
  width: 4.9rem;
  height: 3rem;
  position: absolute;
  left: 0;
  bottom: 0.6rem;
}
.banner{
  width: 100%;
  height: 13.25rem;
  background: url("../img/banner.png") no-repeat top center;
  background-size: contain;
  padding: 1.4rem 0 0 .6rem;
  box-sizing: border-box;
}
.banner-title{
  font-weight: bolder;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 1);

}
.rule {
  width: 1.25rem;
  height: 3.05rem;
  position: absolute;
  right: .2rem;
  top: 0;
}

.center {
  width: 1.25rem;
  height: 2.25rem;
  position: absolute;
  right: .2rem;
  top: 3.05rem;

}
.cut{
  width: 100%;
  height: 9.5rem;
  margin-top: -4rem;
}
.section1,.section2,.section3{
  margin:0 auto;
  border-radius: .5rem;
  width: 17.55rem;
  height: 16.2rem;
  position: relative;
  background-color: #fff;
  margin-top:1rem;
}
.section1{
  background: url(../img/act1.png) no-repeat top center;
  background-size: contain;
  margin-top:-4rem;
}
.section2{
  width: 17.55rem;
  height: 24.3rem;
  background: url(../img/act2.png) no-repeat top center;
  background-size: contain;
}

.section3{
  width: 17.55rem;
  height: 18.25rem;
  padding-top:2.35rem;
  background: url(../img/act3.png) no-repeat top center;
  background-size: contain;
  box-sizing: border-box;
}

.see1{
  position:absolute;
  top:12.75rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 7.75rem;
  height: 2.15rem;
}
.see2{
  position:absolute;
  top:15.75rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 7.75rem;
  height: 2.15rem;
}

.section3 .title{
  width: 100%;
  color: rgba(51, 51, 51, 1);
  height: .85rem;
  font-size: .6rem;
  text-align: center;
}
.offer {
  width:16.35rem;
  height: 4rem;
  margin:.5rem auto 0;
  display: flex;
  align-items: center;
  background: url(../img/coupon1.png) no-repeat center center;
  background-size: cover;
}
.offer1{
  background: url(../img/coupon2.png) no-repeat center center;
  background-size: cover;
}
.offer2{
  background: url(../img/coupon3.png) no-repeat center center;
  background-size: cover;
}

.details {
  padding-left: 4.2rem;
  width: 7rem;

}
.details h2 {
  margin: 0;
  font-size:.6rem;
  font-weight: 500;
}

.details p{
  font-size: .5rem;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.btn{
  width: 4.4rem;
  height: 1.4rem;
  padding-left: .1rem;
}
.progress-bar {
  height: .4rem;
  width: 5rem;
  background-color: rgba(255, 210, 150, 1);
  border-radius: .5rem;
  overflow: hidden;
  margin: .4rem 0 .2rem;
}

.progress {
  height: 100%;
  background: linear-gradient(180deg, #FF9970 0%, #FD3516 100%);
  border-radius: .5rem;
}
.claim{
  flex: 1;
}
.claim-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 1rem;
  font-size: .6rem;
  width: 4.4rem;
  height: 1.4rem;
  cursor: pointer;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  position: relative;
  width: 14.75rem;
  min-height: 14.4rem;
  background-size: cover;
  padding: 1.6rem 1.2rem;
  padding-bottom: 0;
  box-sizing: border-box;
  font-size: 0.7rem;
}
.block .title {
  color: #333;
  font-weight: bolder;
  text-align: center;
}
.block .list {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.block .list .item {
  border-radius: 0.2rem;
  width: 5.95rem;
  height: 2.2rem;
  background: #fff;
  text-align: center;
  line-height: 2.2rem;
  margin-bottom: 0.4rem;
}
.block .list .item-act {
  color: #fff;
  background-color: #3F8AEF;
}
.block .btns {
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  height: 3rem;
  line-height: 3rem;
  border-top: 0.05rem solid #eee;
}
.block .btns .btn {
  flex: 1;
  text-align: center;
}
.block .btns .btn:nth-of-type(1) {
  border-right: 0.05rem solid #eee;
  color: #999;
}
/*福袋抖动效果*/

.gift-bag {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .5rem;
  cursor: pointer;
  width: 100%;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px) rotate(-5deg); /* 向左移动并逆时针旋转 */
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px) rotate(5deg);   /* 向右移动并顺时针旋转 */
  }
}
@keyframes shake2 {
  from{
    opacity: 0;
    transform: scale(0.5);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}
.shake {
  animation:shake2 1s ease-out forwards,shake 1s ease-in-out 1.2s 1;
}

/*
 * 获取券弹窗
 */
 .ticket{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
 }
 .ticket_center{
  position: relative;
  width: 17.85rem;
  height:27.5rem;
  padding:2.8rem 0 0 .6rem;
  box-sizing: border-box;
  background: url(../img/listbg.png) top center no-repeat;
  background-size: contain;
 }

.figure{
  position:absolute;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  bottom: 4.5rem;
  left: 10.4rem;
}

.ticket_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ticket_item{
  margin: .2rem;
  width:4.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: .4rem;
  box-sizing: border-box;
  height:5.35rem;
}
.btu{
  bottom:1.4rem;
  left: 0;
  right: 0;
  margin: auto;
  width:6.4rem;
  height:1.85rem;
  position:absolute;
}
.close{
  position:absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -1.5rem;
  width: 1.6rem;
  height: 1.6rem;
  border: .1rem solid #fff;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  line-height:1.6rem;
  border-radius:1.6rem;
}

/* .item1{
  font-size: .6rem;
  color: rgba(51, 51, 51, 1);
  margin-top:.8rem;
}
.item2{
  font-size: 1rem;
  color: rgba(51, 51, 51, 1);
  font-weight: bolder;
  margin-bottom:.8rem;
} */
.item3{
  font-size: .5rem;
  color: rgba(51, 51, 51, 1);
}