.login-reward--styleA {
  background-size: cover;
  padding: 1rem 0;
}
.login-reward--styleA .login-reward-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 96%;
}
.login-reward--styleA .login-reward-info__title {
  color: white;
  font-weight: bold;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
.login-reward--styleA .login-reward-info__count {
  vertical-align: middle;
  font-size: 1.75rem;
  font-weight: bold;
  color: #ffcf4f;
}
.login-reward--styleA .login-reward-daily-gift {
  position: relative;
  max-width: 80%;
  padding: 0.5rem 0;
  text-align: center;
  background: #faca4c;
}
.login-reward--styleA .login-reward-daily-gift__card#js-get-reward-button {
  cursor: pointer;
}
.login-reward--styleA .login-reward-status {
  text-align: center;
}
.login-reward--styleA .login-reward-app-button {
  position: absolute;
  top: 5.5%;
  width: 60%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.login-reward--styleA .login-reward-action {
  position: absolute;
  text-align: center;
  top: 20.5%;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login-reward--styleA .login-reward-action img {
  width: 10rem;
  margin: auto;
}
.login-reward--styleA .login-reward-action__count {
  position: absolute;
  left: 1rem;
  right: 0;
  bottom: -0.5rem;
  font-weight: bold;
  color: #ffffff;
  font-size: 1rem;
}
.login-reward--styleA .login-reward-action__button {
  margin-left: 1.5rem;
  cursor: pointer;
  background: 0;
  border: 0;
}
.login-reward--styleA .login-reward-collection {
  padding: 0 1rem 20px;
}
.login-reward--styleA .login-reward-collection .collection-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login-reward--styleA .login-reward-collection .collection-list-item {
  width: calc(25% - 10px);
  margin: auto 5px 10px 5px;
}
.login-reward--styleA .login-reward-collection .collection-last {
  padding-top: 1rem;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.login-reward--styleA .login-reward-collection .collection-last__image {
  width: 100%;
}
.login-reward--styleB {
  background-size: cover;
  padding: 1rem 0;
}
.login-reward--styleB .login-reward-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 96%;
}
.login-reward--styleB .login-reward-info__title {
  color: white;
  font-weight: bold;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
.login-reward--styleB .login-reward-info__count {
  vertical-align: middle;
  font-size: 1.75rem;
  font-weight: bold;
  color: #ffcf4f;
}
.login-reward--styleB .login-reward-daily-gift {
  position: relative;
  max-width: 80%;
  padding: 0.5rem 0;
  text-align: center;
  background: #faca4c;
}
.login-reward--styleB .login-reward-daily-gift__card#js-get-reward-button {
  cursor: pointer;
}
.login-reward--styleB .login-reward-status {
  text-align: center;
}
.login-reward--styleB .login-reward-app-button {
  position: absolute;
  top: 5%;
  width: 60%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.login-reward--styleB .login-reward-action {
  position: absolute;
  text-align: center;
  top: 18.5%;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login-reward--styleB .login-reward-action img {
  width: 10rem;
  margin: auto;
}
.login-reward--styleB .login-reward-action__count {
  position: absolute;
  left: 1rem;
  right: 0;
  bottom: -0.5rem;
  font-weight: bold;
  color: #2d0058;
  font-size: 1rem;
}
.login-reward--styleB .login-reward-action__button {
  margin-left: 1.5rem;
  cursor: pointer;
  background: 0;
  border: 0;
}
.login-reward--styleB .login-reward-collection {
  padding: 0 1rem 20px;
}
.login-reward--styleB .login-reward-collection .collection-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login-reward--styleB .login-reward-collection .collection-list-item {
  width: calc(25% - 10px);
  margin: auto 5px 10px 5px;
}
.login-reward--styleB .login-reward-collection .collection-last {
  padding-top: 1rem;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.login-reward--styleB .login-reward-collection .collection-last__image {
  width: 100%;
}
.login-reward--style-web .login-reward-banner {
  position: relative;
}
.login-reward--style-web .login-reward-banner .banner-appbtn {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  text-align: center;
}
.login-reward--style-web .login-reward-banner .banner-appbtn--next-month {
  top: 17%;
}
.login-reward--style-web .login-reward-banner .banner-appbtn img {
  max-width: 62%;
}
.login-reward--style-web .login-reward-banner .banner-checkinbtn {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  text-align: center;
}
.login-reward--style-web .login-reward-banner .banner-checkinbtn img {
  max-width: 43%;
}
.login-reward--style-web .login-reward-content {
  position: relative;
  top: -1px;
}
.login-reward--style-web .login-reward-content .content-count {
  position: absolute;
  top: 1.8%;
  right: 20%;
  color: #FFC256;
  font-size: 2rem;
  width: 3rem;
  text-align: center;
  font-weight: bold;
}
.login-reward--style-web .login-reward-content .content-count--next-month {
  color: #FFED82;
  right: 20%;
}
.login-reward--style-web .login-reward-content .content-list {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  width: 75%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.login-reward--style-web .login-reward-content .content-list-item {
  width: 33.3333333333%;
  text-align: center;
  margin-bottom: 0.5rem;
}
.login-reward--style-web .login-reward-content .content-list-item--bigsize {
  width: 100%;
}
.login-reward--style-web .login-reward-content .content-list-item--bigsize img {
  width: 100% !important;
}
.login-reward--style-web .login-reward-content .content-list-item img {
  width: 80%;
}