.container {
  margin: 0 auto;
  width: 7.5rem;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: #000;
}
.content-box {
  width: 7.5rem;
  height: 13.34rem;
  background: url('../img/bg.jpg') no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.login-box {
  position: absolute;
  top: 0.17rem;
  right: 0.34rem;
  z-index: 1;
  font-size: 0.24rem;
  color: #ffd65b;
  display: flex;
  align-items: center;
}
.login-box .login {
  width: 1rem;
  height: 0.45rem;
  line-height: 0.5rem;
  background-image: linear-gradient(0deg, 
  #9e4403 0%, 
  #820000 100%);
  background-blend-mode: normal, 
    normal;
  text-align: center;
  line-height: 0.45rem;
  box-shadow: inset 0.03rem 0.04rem 0.05rem 0rem 
  rgba(255, 255, 255, 0.35);
  margin-left: 0.2rem;
}
.login-box .login span {
  font-size: 0.22rem;
  color: #4a2300;
  background: linear-gradient(-90deg, 
  #ffffc3 0%, 
  #ffd65b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  font-weight: 600;
}
.fixed-box {
  position: absolute;
  top: 4rem;
  right: 0;
  z-index: 2;
}
.fixed-box .fixed-btn {
  width: 0.49rem;
  height: 1.4rem;
  text-align: center;
  background: url('../img/mgbtn.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0.11rem;
}
.fixed-box .fixed-btn1 {
  background: url('../img/rulebtn.png') no-repeat;
  background-size: 100% 100%;
}
.content-box .title-box {
  height: 0.43rem;
  line-height: 0.43rem;
  margin-top: 3.19rem;
  text-align: center;
  font-size: 0.24rem;
  color: #ffefa3;
  margin-bottom: 0.08rem;
}
.content-box .date {
  text-align: center;
  font-size: 0.23rem;
  color: #fffee3;
  line-height: 0.24rem;
}
.content-box .xs-box {
  position: relative;
  margin-top: 2.8rem;
  height: 3.68rem;
}
.content-box .xs-box .item-box {
  width: 2rem;
  height: 1.5rem;
  position: absolute;
}
.content-box .xs-box .item-box1 {
  top: 0;
  left: 2.48rem;
  position: absolute;
}
.content-box .xs-box .item-box .txt-box {
  width: 1.2rem;
  font-size: 0.25rem;
  color: #e7e7e7;
  line-height: 0.28rem;
  position: absolute;
}
.content-box .xs-box .item-box .txt-box {
  left: 0.2rem;
  top: 0;
}
.content-box .xs-box .item-box .xs-item-box {
  width: 0.71rem;
  height: 0.71rem;
  position: absolute;
}
.content-box .xs-box .item-box .xs-item-box .img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content-box .xs-box .item-box1 .xs-item-box .img {
  width: 0.22rem;
}
.content-box .xs-box .item-box1 .xs-item-box {
  left: 1.09rem;
  top: 0.06rem;
}
.content-box .xs-box .on .txt-box {
  color: #ffdb85;
}
.content-box .xs-box .on .xs-item-box {
  background: url('../img/xson.png') no-repeat;
  background-size: 100% 100%;
}
.content-box .xs-box .item-box2 {
  left: 1.6rem;
  top: 1.74rem;
}
.content-box .xs-box .item-box2 .xs-item-box .img {
  width: 0.2rem;
}
.content-box .xs-box .item-box2 .xs-item-box {
  left: 0.94rem;
  top: -0.06rem;
}
.content-box .xs-box .item-box3 {
  left: 4.2rem;
  top: 1.9rem;
}
.content-box .xs-box .item-box3 .txt-box {
  left: 0.56rem;
  top: 0.4rem;
}
.content-box .xs-box .item-box3 .xs-item-box .img {
  width: 0.3rem;
}
.content-box .xs-box .item-box3 .xs-item-box {
  left: 0.06rem;
  top: -0.12rem;
}
.btn1 {
  width: 4.09rem;
  height: 1.42rem;
  margin: 0 auto 0.36rem;
  display: block;
}
.btn1 .img {
  width: 100%;
  display: block;
}
.btn2 {
  text-align: center;
  font-size: 0.2rem;
  color: #ffd457;
  text-decoration: underline;
}
.twpop .twpop-mask {
  z-index: 9;
}
.twpop .twpop-main {
  width: 5.49rem;
  min-height: 4.13rem;
  max-height: 5.59rem;
  border-image-source: url('../img/tcbg.png');
  border-image-slice: 76 30 30 30;
  border-top: 0.76rem solid;
  border-right: 0.3rem solid;
  border-bottom: 0.3rem solid;
  border-left: 0.3rem solid;
  background: transparent;
  /* background: url('../img/tcbg.png') no-repeat; */
  /* background-size: 100% 100%; */
  z-index: 10;
}
.twpop-msg .twpop-main {
  min-height: auto;
}
.twpop .twpop-main .twpop-title {
  width: 100%;
  position: absolute;
  top: -0.76rem;
  left: 0;
  font-size: 0.3rem;
  color: #e9ba69;
}
.twpop-cont {
  background: linear-gradient(180deg, 
  #2f1106 0%, 
  #562104 100%);
  color: #ffefb9;
}
.tal {
  text-align: left;
}
.twpop .twpop-close {
  width: 0.47rem;
  height: 0.47rem;
  background: url('../img/close.png') no-repeat;
  background-size: 100% 100%;
  right: -0.53rem;
  top: -0.96rem;
}
.gift .cell {
  height: 0.64rem;
  margin-bottom: 0.29rem;
  line-height: 0.64rem;
  color: #ffefb9;
  font-size: 0.24rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.1rem 0 0.19rem;
  align-items: center;
}
.gift .cell .btn {
  width: 1.56rem;
  height: 0.54rem;
  background: url('../img/tcbtn.png') no-repeat;
  background-size: 100% 100%;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.54rem;
  color: #45230f;
}
.twpop .twpop-btn {
  width: 2.08rem;
  height: 0.72rem;
  background: url('../img/tcbtn.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
  line-height: 0.72rem;
  font-size: 0.31rem;
  color: #45230f;
  padding: 0;
}

.twpop .rule-box span {
  color: #ffdb60;
}
.twpop .twpop-cont {
  padding: 0.1rem 0;
  min-height: 3.28rem;
  max-height: 4.78rem;
  overflow: auto;
}
.gift-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.gift-list .gift-item-box {
  width: 1.61rem;
  text-align: center;
  font-size: 0.18rem;
  color: #ffefb9;
  text-align: center;
  margin: 0 0.04rem 0.2rem 0.04rem;
}
.gift-list .gift-item-box .img-box {
  width: 1.51rem;
  height: 1.52rem;
  background: url('.../img/giftitembg.png') no-repeat;
  background-size: 100% 100%;
  margin: 0.1rem auto;
  position: relative;
}
.gift-list .gift-item-box .img-box .img {
  display: block;
  width: 60%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.twpop .twpop-diy-content {
  max-height: none;
  overflow: hidden;
}
.twpop .twpop-from-item {
  margin-bottom: 0.28rem;
}
.twpop .list{
  padding: 0 .3rem; 
}
.twpop .list label{
  display: block;
  padding: .1rem;
  margin-top: .14rem;
  text-align: left;
  display: flex;
  align-items: center;
}
.twpop .list input{
  display: none;
}
.twpop .list span{
  line-height: .3rem;
  display: inline-block;
}
.twpop .list i{
  float: left;    
  width: .24rem;
  height: .24rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin:0 .2rem;
  position: relative;
}
.twpop .list i::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background-color: #d63f21;
  opacity: 0;
  -webkit-transform: translate(-50%,-50%) scale(.1);
  transform: translate(-50%,-50%) scale(.1);
  width: .1rem;
  height: .1rem;
}
.twpop .list input:checked + i::before{
  opacity: 1;
  -webkit-transform: translate(-50%,-50%) scale(1);
  transform: translate(-50%,-50%) scale(1);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.twpop .list input:checked + i{
  border-color: #9d0400;
}
.twpop .twpop-input, .twpop .twpop-select {
  color: #ffefb9;
}
.twpop .twpop-input {
  color: #2e1108;
  background: url('../img/input.png') no-repeat;
  background-size: 100% 100%;
}
.twpop .twpop-input::placeholder, .twpop .twpop-input::-webkit-placeholder, .twpop .twpop-input::-moz-placeholder {
  color: #2e1108;
}
.twpop .twpop-select option {
  color: #222;
}
.select2-container--default .select2-selection--single{background: transparent!important;border: none!important;}
.select2-container {font-size: 14px;}
.twpop .twpop-from-lable {margin-right: 10px; flex-shrink: 0;}
.bind .p {color: #97785d;text-align: left;line-height: 0.36rem;font-size: 0.18rem;}