 /*跨平台的字体设定，在各个操作系统下都有最佳展示效果*/
* {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

.white-text {
  color: white;
}
.redpack-container{
  text-align: center;
  /*width: 100%;*/
  margin: 0 auto;
  /*padding: 15px 5px;*/
  /*background-color: rgba(0,0,0,0.3);*/
  /*height: 100%;*/
  /*position: absolute;*/
}
.redpack{
  height: 450px;
  background: #A5423A;
  width: 300px;
  left: 0;
  top: 0;
  border-radius: 10px;
  margin: 0 auto;
}
@media (max-width: 370px) {
  .redpack{
    height: 420px;
    width: 100%;
  }
}
.topcontent{
  height: 300px;
  border: 1px solid #BD503A;
  background-color: #BD503A;
  border-radius: 10px 10px 50% 50% / 10px 10px 15% 15%;
  box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.2);
}

.topcontent-open {
  height: 72px;
  border: 1px solid #BD503A;
  background-color: #BD503A;
  border-radius: 10px 10px 50% 50% / 10px 10px 22% 22%;
  box-shadow: 0px 4px 0px -1px rgba(0,0,0,0.1);
  transition: 1s ease-in-out;
}

.redpack-avatar{
  position: relative;
}
.redpack-avatar span{
  position: absolute;
  top: 10px;
  right: 15px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  font-size: 2em;
  font-weight: bolder;
}
#close{
  color: rgba(0,0,0,0.5);
}
.redpack-avatar img{
  border: 1px solid #BD503A;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 10%;
}
.topcontent h2{
  margin: 15px 0;
}
.redpack-text{
  color: #999;
}
.redpack-description{
  margin: 15px 0;
  font-size: 16px;
  font-weight: 600;
}
#redpack-open{
  width: 100px;
  height: 100px;
  border: 1px solid #FFA73A;
  background-color: #FFA73A;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  display: inline-block;
  margin-top: -50px;
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
}
#redpack-open span{
  margin-top: 35px;
  display: inline-block;
}
#redpack-opened{
  width: 100px;
  height: 100px;
  /*border: 1px solid #FFA73A;*/
  /*background-color: #FFA73A;*/
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  display: inline-block;
  margin-top: -50px;
  /*box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);*/
}
.rotate{
  -webkit-animation: anim .6s infinite alternate;
  -ms-animation: anim .6s infinite alternate;
  animation: anim .6s infinite alternate;
}
@-webkit-keyframes anim {
  from { -webkit-transform: rotateY(180deg); }
  to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes anim {
  from { -ms-transform: rotateY(180deg); }
  to { -ms-transform: rotateY(360deg); }
}
@keyframes anim {
  from { transform: rotateY(180deg); }
  to { transform: rotateY(360deg); }
}
