.test {
  background-image: url('../img/tttttt.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}

.back {
  position: absolute;
  top: .310345rem /* 9/29 */;
  left: .551724rem /* 16/29 */;
  height: 1.724138rem /* 50/29 */;
  width: 1.724138rem /* 50/29 */;
  z-index:1;
}

.to-prev,
.to-next {
  width: 3.448276rem /* 100/29 */;
  height: 3.448276rem /* 100/29 */;
  border: .034483rem /* 1/29 */ solid;
  z-index: 1;
}

.name {
  margin: 0 .172414rem /* 5/29 */;
  color: #ef8d00;
}

.wish {
  margin: 0 .172414rem /* 5/29 */;
  color: #8002c1;
}

.notice {
  color: #ef8d00;
}

.red {
  color: #ce1a01;
}

.gift-page {
  display: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.gift-page-1 {
  background-image: url('../img/bg1.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}

.gift-page-2 {
  background-image: url('../img/bg2.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}

.gift-header {
  height: 2.482759rem /* 72/29 */;
  width: 100%;
}

.gift-header .gift-rule,
.gift-header .gift-history {
  height: 1.896552rem /* 55/29 */;
  width: 1.793103rem /* 52/29 */;
}

.gift-header .gift-rule {
  right: 2.931034rem /* 85/29 */;
}

.gift-header .gift-history {
  right: .689655rem /* 20/29 */;
}

.gift-center {
  height: 5.827586rem /* 169/29 */;
  width: 17.965517rem /* 521/29 */;
}

.gift-center-2 {
  display: none;
}

.gift-wish {
  bottom: 1.448276rem /* 42/29 */;
  height: .931034rem /* 27/29 */;
  width: 12.931034rem /* 375/29 */;
  font-size: .586207rem /* 17/29 */;
  color: #591309;
  font-weight: bold;
  text-align: center;
}

.gift-word {
  bottom: 1.62069rem /* 47/29 */;
  width: 3.206897rem /* 93/29 */;
  height: 1.517241rem /* 44/29 */;
}

.gift-code {
  width: 6.896552rem /* 200/29 */;
  font-size: .62069rem /* 18/29 */;
  top: 1.448276rem /* 42/29 */;
  left: 7.034483rem /* 204/29 */;
  color: #ce1a01;
  font-weight: bold;
}

.gift-tip {
  font-size: .482759rem /* 14/29 */;
  height: 1.034483rem /* 30/29 */;
  top: .172414rem /* 5/29 */;
  text-align: center;
  color: #ce1a01;
  font-weight: bold;
}

.gift-center-button {
  top: 2.931034rem /* 85/29 */;
  width: 6.551724rem /* 190/29 */;
  height: 1.793103rem /* 52/29 */;
  font-size: .689655rem /* 20/29 */;
  text-align: center;
  z-index: 1;
}

.gift-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20.965517rem /* 608/29 */;
}

.gift-gifts {
  font-size: 0;
}

.gift-gifts div{
  background-size: 100%;
  background-repeat: no-repeat;
  height: 2.172414rem /* 63/29 */;
  width: 2.172414rem /* 63/29 */;
  margin-right: .068966rem /* 2/29 */;
  display: inline-block;
}

.gift-input {
  position: absolute;
  top: .37931rem /* 11/29 */;
  left: 11.62069rem /* 337/29 */;
  height: 1.37931rem /* 40/29 */;
  width: 5.965517rem /* 173/29 */;
  background-color: transparent;
  border: 0;
  outline: 0;
  text-align: center;
  font-size: .551724rem /* 16/29 */;
  color: #591309;
}

.gift-input::-webkit-input-placeholder {
  color: #bbbbbb;
}

.gift-input::-moz-placeholder {
  color: #bbbbbb;
}

.gift-input:-moz-placeholder {
  color: #bbbbbb;
}

.gift-input:-ms-input-placeholder {
  color: #bbbbbb;
}

.gift-confirm {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 2.724138rem /* 79/29 */;
  height: 1.586207rem /* 46/29 */;
}

.rule-item {
  position: relative;
  margin-bottom: .758621rem /* 22/29 */;
}

.rule-item-tap {
  width: .896552rem /* 26/29 */;
  height: .517241rem /* 15/29 */;
  position: absolute;
  top: .137931rem /* 4/29 */;
  background-image: url('../img/history-item-tap.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}

.rule-text {
  width: 16.206897rem /* 470/29 */;
  font-size: .551724rem /* 16/29 */;
  font-weight: bold;
  margin-left: 1.137931rem /* 33/29 */;
  text-align: justify;
  color: #591309;
}

.history-items .center {
  color: #888888;
  font-size: 23px;
  margin-top: 2.758621rem /* 80/29 */;
}

.history-item {
  color: #591309;
  position: relative;
  font-size: .551724rem /* 16/29 */;
  font-weight: bold;
  text-align: justify;
  width: 15.62069rem /* 453/29 */;
  margin: auto;
}

.history-item-tap {
  width: .896552rem /* 26/29 */;
  height: .517241rem /* 15/29 */;
  position: absolute;
  left: -1.172414rem /* 34/29 */;
  top: .137931rem /* 4/29 */;
  background-image: url('../img/history-item-tap.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}

.history-first {
  margin-bottom: .344828rem /* 10/29 */;
}

.history-second {
  margin-bottom: 1.517241rem /* 44/29 */;
}

.history-line {
  width: 100%;
  height: .517241rem /* 15/29 */;
  position: absolute;
  top: 2.517241rem /* 73/29 */;
  background-image: url('../img/history-line.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-gifts {
  height: 2.413793rem /* 70/29 */;
  width: 14.172414rem /* 411/29 */;
  top: .862069rem /* 25/29 */;
  text-align: center;
}

.switch-gifts div {
  height: 2.344828rem /* 68/29 */;
  width: 2.344828rem /* 68/29 */;
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-border {
  background-image: url('../img/border.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-border-active {
  background-image: url('../img/border-active.png');
}

.switch-number {
  position: relative;
  top: 1.827586rem /* 53/29 */;
  font-size: .448276rem /* 13/29 */;
  font-weight: bold;
  color: #591309;
}

.skip-modal .modal-confirm {
  background-image: url('../img/skip-modal.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.skip-modal .modal-confirm .modal-info {
  width: 8.62069rem /* 250/29 */;
  font-size: .586207rem /* 17/29 */;
  font-weight: bold;
  margin: auto;
  margin-top: 4.724138rem /* 137/29 */;
  text-align: center;
  color: #591309;
}

.skip-modal .modal-confirm .modal-cancel {
  position: absolute;
  top: 7.827586rem /* 227/29 */;
  right: 0;
  left: 0;
  margin: auto;
  width: 3.62069rem /* 105/29 */;
  text-align: center;
}

.basic-modal .modal-confirm {
  background-image: url('../img/modal.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.basic-modal .modal-confirm .modal-info {
  width: 8.62069rem /* 250/29 */;
  font-size: .586207rem /* 17/29 */;
  font-weight: bold;
  margin: auto;
  margin-top: 5.482759rem /* 159/29 */;
  text-align: center;
  color: #591309;
}

.basic-modal .modal-confirm .modal-cancel {
  position: absolute;
  top: 1.724138rem /* 50/29 */;
  right: 5.655172rem /* 164/29 */;
  height: 1.724138rem /* 50/29 */;
  width: 1.724138rem /* 50/29 */;
  text-align: center;
}

.rule-modal .modal-confirm {
  background-image: url('../img/rule.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.history-modal .modal-confirm {
  background-image: url('../img/history-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-pre-modal .modal-confirm {
  background-image: url('../img/switch-pre-modal.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-pre-modal .modal-confirm .switch-header {
  display: flex;
  position: absolute;
  top: 2.689655rem /* 78/29 */;
  left: 11.517241rem /* 334/29 */;
}

.switch-pre-modal .modal-confirm .switch-header .switch-new-name {
  height: .862069rem /* 25/29 */;
  font-size: .586207rem /* 17/29 */;
  font-weight: bold;
  color: #591309;
}

.switch-pre-modal .modal-confirm .switch-header .switch-new-item {
  margin-top: -.172414rem /* 5/29 */;
  height: 1.137931rem /* 33/29 */;
  width: 1.137931rem /* 33/29 */;
  background-image: url('../img/icon_small.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-pre-modal .modal-confirm .switch-header .switch-new-tail {
  font-size: .586207rem /* 17/29 */;
  color: #591309;
  margin-left: .172414rem /* 5/29 */;
  font-weight: bold;
}

.switch-pre-modal .modal-confirm .switch-middle {
  top: .172414rem /* 5/29 */;
  width: 8.103448rem /* 235/29 */;
  height: 3.448276rem /* 100/29 */;
  font-size: .551724rem /* 16/29 */;
  font-weight: bold;
  text-align: center;
}

.switch-pre-modal .modal-confirm .switch-middle .switch-middle-first {
  margin-bottom: .551724rem /* 16/29 */;
}

.switch-pre-modal .modal-confirm .modal-ok {
  top: 6.758621rem /* 196/29 */;
  left: -.344828rem /* 10/29 */;
  width: 5.896552rem /* 171/29 */;
  height: 1.413793rem /* 41/29 */;
}

.switch-modal .modal-confirm {
  background-image: url('../img/switch-modal.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-modal .modal-confirm .switch-header {
  display: flex;
  position: absolute;
  top: 2.689655rem /* 78/29 */;
  left: 11.517241rem /* 334/29 */;
}

.switch-modal .modal-confirm .switch-header .switch-new-name {
  height: .862069rem /* 25/29 */;
  font-size: .586207rem /* 17/29 */;
  font-weight: bold;
  color: #591309;
}

.switch-modal .modal-confirm .switch-header .switch-new-item {
  margin-top: -.172414rem /* 5/29 */;
  height: 1.137931rem /* 33/29 */;
  width: 1.137931rem /* 33/29 */;
  background-image: url('../img/icon_small.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-modal .modal-confirm .switch-header .switch-new-tail {
  font-size: .586207rem /* 17/29 */;
  color: #591309;
  margin-left: .172414rem /* 5/29 */;
  font-weight: bold;
}

.switch-modal .modal-confirm .modal-ok {
  position: absolute;
  right: 6.482759rem /* 188/29 */;
  bottom: 2.344828rem /* 68/29 */;
  width: 3.655172rem /* 106/29 */;
  height: 1.482759rem /* 43/29 */;
}

.switch-modal .modal-confirm .modal-cancel {
  position: absolute;
  top: auto;
  left: 6.413793rem /* 186/29 */;
  bottom: 2.344828rem /* 68/29 */;
  width: 3.655172rem /* 106/29 */;
  height: 1.482759rem /* 43/29 */;
}

.switch-icon {
  margin: 0 .172414rem /* 5/29 */;
  width: 1.37931rem /* 40/29 */;
  height: 1.37931rem /* 40/29 */;
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-confirm-modal .modal-confirm {
  background-image: url('../img/switch-confirm.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.switch-confirm-modal .modal-confirm .switch-info {
  top: -1.206897rem /* 35/29 */;
  width: 8.275862rem /* 240/29 */;
  height: 1.37931rem /* 40/29 */;
  line-height: 1.37931rem /* 40/29 */;
  display: flex;
  font-size: .586207rem /* 17/29 */;
  color: #591309;
}

.switch-confirm-modal .modal-confirm .modal-ok {
  position: absolute;
  right: 7.310345rem /* 212/29 */;
  bottom: 3.482759rem /* 101/29 */;
  width: 3.37931rem /* 98/29 */;
  height: 1.482759rem /* 43/29 */;
}

.switch-confirm-modal .modal-confirm .modal-cancel {
  position: absolute;
  top: auto;
  right: 12.206897rem /* 354/29 */;
  bottom: 3.482759rem /* 101/29 */;
  width: 3.37931rem /* 98/29 */;
  height: 1.482759rem /* 43/29 */;
}

.ability-page {
  display: none;
  height: 100%;
  width: 100%;
}

.ability-page .bg {
  position: absolute;
  top: 1.137931rem /* 33/29 */;
  bottom: 0;
  left: 0;
  right: 0;
  width: 23rem /* 667/29 */;
  height: 12.931034rem /* 375/29 */;
  background-image: url('../img/rose-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  margin: auto;
}

#rose {
  position: absolute;
  top: 2.862069rem /* 83/29 */;
  left: 4.655172rem /* 135/29 */;
  height: 6.103448rem /* 177/29 */;
  width: 6.103448rem /* 177/29 */;
}

.round {
  position: absolute;
  border: .068966rem /* 2/29 */ solid #591309;
  left: 7.103448rem /* 206/29 */;
  top: 5.310345rem /* 154/29 */;
  height: 1.137931rem /* 33/29 */;
  width: 1.137931rem /* 33/29 */;
  border-radius: 50%;
  background-color: white;
}

.ability-keyword {
  text-align: center;
  bottom: 3.793103rem /* 110/29 */;
  left: 8.551724rem /* 248/29 */;
  font-size: .551724rem /* 16/29 */;
  font-weight: bold;
  width: 7.241379rem /* 210/29 */;
  height: 1.034483rem /* 30/29 */;
  color: #ce1a01;
}

.ability-gift {
  top: .448276rem /* 13/29 */;
  left: 9.482759rem /* 275/29 */;
  font-size: .413793rem /* 12/29 */;
  font-weight: bolder;
  text-align: center;
  width: 4.482759rem /* 130/29 */;
  height: .517241rem /* 15/29 */;
  color: #2678ff;
  letter-spacing: .034483rem /* 1/29 */;
}

.ability-jump {
  top: 6.896552rem /* 200/29 */;
  left: 8.896552rem /* 258/29 */;
  width: 5rem /* 145/29 */;
  height: 1.37931rem /* 40/29 */;
}