/* form */
.frm-box {
  width: 12.82rem;
  margin-left: -.01rem;
  background: url(../img/frm-box.png) no-repeat center / 100% auto;
  height: 8.2rem;
  margin-bottom: .2rem
}

.frm-box .scene-title:before {
  background-image: url(../img/frm-box-title-line.png)
}

.frm-box .product-name {
  display: block;
  padding: .55rem 0 0;
  text-align: center;
}

.frm-box .product-name .g-txt {
  font-size: .4rem;
  letter-spacing: -.075em;
  line-height: .44rem;
  font-weight: 600;
}
.frm-box .product-name .g-txt em{
  background: linear-gradient(180deg, #272623 0%, #c6c6c6 15%, #cbcac8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.frm-box .scene-title {
  padding-top: .44rem;
}

.frm-box .scene-title .g-txt {
  letter-spacing: -.075em
}

.frm-box .product-name+.scene-title {
  padding-top: 0;
  padding-bottom: .3rem
}

.frm-box .product-name+.scene-title .g-txt {
  font-size: .54rem;
  margin:0;
  letter-spacing: -.025em;
  line-height: .58rem;
}

.frm-box .product-name+.scene-title small.g-txt{
  font-size:.44rem;
  vertical-align: text-bottom;
}

.frm-box .sub-title {
  position: relative;
  z-index: 2;
}

.frm-box .sub-title .g-txt {
  letter-spacing: -.05em;
  font-size: .29rem;
  line-height: .35rem;
  font-weight: 700;
}

.frm-box .sub-title .g-txt em{
  background: linear-gradient(180deg, #272623 0%, #c6c6c6 15%, #cbcac8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.frm-box .sub-title .g-txt em strong{
  background: linear-gradient(-181deg, #e8dac1 0%, #eadabf 48%, #d5af74 50%, #bba686 95%, #81715e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
/*
.frm-box .sub-title .g-txt strong {
  background: linear-gradient(-181deg, #e11f05 0%, #e11f05 48%, #ca0b0b 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
*/

.frm-box .event-period {
  background-image: url(../img/event-period-bg.png);
  width: 6.62rem;
  color: #fff;
}

.frm-box .confirm-btn {
  padding: .15rem 0;
  text-align: center;
  display: block;
  width: 100%;
}

.frm-box .confirm-btn:active {
  transform: scale(.98)
}

.frm-box .confirm-btn .g-txt {
  font-size: .32rem;
  line-height: .39rem;
  letter-spacing: -.075em;
}




/* Pre-registration */
.scene[data-name="Pre-registration"] .scene-bg {
  background-image: url(../img/register-bg-v11.jpg);
}

.scene[data-name="Pre-registration"] .frm-box .scene-title .g-txt em{
  background: linear-gradient(180deg, rgba(255,255,255,1) 8%, rgba(174, 146, 97, 1) 60%, rgba(163, 135, 88, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}
.scene[data-name="Pre-registration"] .frm-box .scene-title small.g-txt em{
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 30%, rgba(174, 146, 97, 1) 70%, rgba(163, 135, 88, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.scene[data-name="Pre-registration"] .frm-box .event-period {
  margin-bottom: 0
}

.scene[data-name="Pre-registration"] .frm-box .sub-title .g-txt {
  font-size: .26rem;
  line-height: .32rem;
}

.register-box {
  width: 10.9rem;
  height: 5rem;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.register-box>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 50%;
}

.register-box .area-top {
  flex: 1
}

.register-box form.disable,
.register-box form.disable * {
  pointer-events: none !important
}

.register-box form.disable {
  position: relative;
}

.register-box form.disable:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: fill;
}

.register-box .rewards {
  position: relative;
}

.register-box .rewards>img {
  position: absolute;
  width: 5.7rem;
  right: .05rem;
  top: 0
}

.register-box .area-btm {
  flex: none;
  height: 1.16rem;
  padding-right: .5rem;
}

.register-box .area-btm>img {
  height: 1.16rem;
  width: auto;
  margin-top: -.05rem;
}


.register-box .area-btm>p {
  color: #fff;
  font-size: .22rem;
  line-height: .28rem;
  letter-spacing: -.05em;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, 1);
  padding: .08rem 0 .1rem;
}

.register-box .area-btm.store-rewards {
  height: 1.45rem;
  position: relative;
}

.register-box .area-btm.store-rewards>img {
  width: 4.8rem;
  height: auto;
}

.register-box .store-area p {
  font-size: .25rem;
  position: relative;
  line-height: .32rem;
  padding: .17rem 0 .13rem
}

.register-box .store-area p:before,
.register-box .store-area p:after {
  content: "";
  display: block;
  position: absolute;
  top: .17rem;
  height: .32rem;
  width: .42rem;
  background: url(../img/register-store-arrow.png) no-repeat center;
}

.register-box .store-area p:before {
  left: .18rem
}

.register-box .store-area p:after {
  right: .18rem;
  transform: rotateY(-180deg);
}

.register-box .store-area strong {
  color: #be99e7
}

.register-box .store-area .area-btm {
  position: relative;
  text-align: center;
}

.register-box .store-area .area-btm .add-txt {
  position: absolute;
  text-align: left;
  transform: translateY(-50%);
  top: 47.5%;
  left: 1.6rem;
  text-shadow: .01rem .02rem .02rem rgba(0, 0, 0, .8);
  font-size: .18rem;
  line-height: .24rem;
  color: #c7c7c7;
  letter-spacing: -.1em;
  font-weight: 600
}

.register-box .form-area .area-top,
.register-box .form-area .area-btm {
  padding-left: .4rem;
  padding-right: .24rem;
}

.area-btm.store-rewards:before {
  position: absolute;
  left: .4rem;
  right: .24rem;
  top: 0;
  content: "";
  display: block;
  width: auto;
  height: 100%;
  background: url(../img/register-store-rewards-frame.png) no-repeat center top / contain;
  opacity: .1
}

.area-btm.store-rewards p,
.area-btm.store-rewards .visual {
  position: absolute;
}

.area-btm.store-rewards .visual {
  width: 1.22rem;
  left: -.34rem;
  top: -.2rem
}

.area-btm.store-rewards p {
  width: 2.2rem;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.register-box .banner {
  position: relative;
  box-shadow: .01rem .01rem .01rem rgba(0, 0, 0, 1);
}

.register-box .banner button {
  display: block;
  width: 100%;
}

.register-box .banner .visual {
  position: absolute;
  left: 4.02rem;
  top: .15rem;
  transform: translate(-50%, -50%);
  mix-blend-mode: lighten;
  pointer-events: none;
  width: 1.85rem;
}


.scene[data-name="Pre-registration"] .os-select {
  padding: .4rem 0 .08rem;
  text-align: left;
}

.scene[data-name="Pre-registration"] .frm-box .confirm-btn {
  margin-top: .2rem
}

.scene[data-name="Pre-registration"] .frm-box .confirm-btn .g-txt {
  font-size: .35rem;
  line-height: .4rem;
}

.scene[data-name="Pre-registration"] .frm-check-list {
  padding: .2rem 0 0
}

.scene[data-name="Pre-registration"] .frm-check-list .more-btn {
  width: 1.04rem
}

.scene[data-name="Pre-registration"] .frm-check-list .check-frm label {
  font-size: .22rem;
  line-height: .33rem;
  padding-left: 1.75em;
}

.scene[data-name="Pre-registration"] .frm-check-list .check-frm label:before,
.scene[data-name="Pre-registration"] .frm-check-list .check-frm label:after {
  width: 1em;
  height: 1em
}

.scene[data-name="Pre-registration"] .frm-box,
.scene[data-name="Pre-registration"] .register-box {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out;
}

.scene[data-name="Pre-registration"].active .frm-box,
.scene[data-name="Pre-registration"].active .register-box {
  opacity: 1;
  transform: translateY(0);
}

.scene[data-name="Pre-registration"].active .frm-box {
  transition-delay: .15s
}

.scene[data-name="Pre-registration"].active .register-box {
  transition-delay: .45s
}


/* Character-preemption */

.class-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.class-card .visual {
  display: block;
  position: relative;
  width: 100%;
}

.class-card .visual:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: .04rem;
  top: .04rem;
  bottom: .04rem;
  right: .04rem;
  border: .01rem solid #6d4041;
  opacity: .6
}

.class-card .icon,
.class-card .g-txt {
  position: absolute;
}

.class-card .icon {
  width: 1.02rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .35s ease-out;
}

.class-card .g-txt {
  left: 50%;
  transform: translateX(-50%);
  top: 65.8%;
  font-weight: 700;
  font-size: .23rem;
  line-height: .28rem;
  letter-spacing: .025em;
  text-shadow: none;
  text-transform: uppercase;
  transition: all .35s ease-out;
}

.class-card[data-name="archer"] .g-txt {
  letter-spacing: .1em
}

.class-card .g-txt em {
  color: #6d4041;
  background: none;
}

.class-card .g-txt:before,
.class-card .g-txt:after {
  display: none;
}


.class-card .off,
.class-card .on {
  width: 100%;
  height: auto;
}

.class-card .on {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .35s ease-out
}

input:checked+.class-card .on,
.class-card:hover .on {
  opacity: 1
}

input:checked+.class-card .icon,
.class-card:hover .icon,
.layer .class-card .icon {
  transform: translate(-50%, 0);
}

input:checked+.class-card .g-txt,
.class-card:hover .g-txt,
.layer .class-card .g-txt {
  top: 83.4%
}

input:checked+.class-card .g-txt em,
.class-card:hover .g-txt em,
.layer .class-card .g-txt em {
  background: linear-gradient(to bottom, #f4db89 45%, #c29a56 55%, #c4a971 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}


input:checked+.class-card .g-txt:before,
.class-card:hover .g-txt:before,
.layer .class-card .g-txt:before {
  display: block;
  mix-blend-mode: darken;
  opacity: 1;
  top: 0;
  filter: blur(.05rem);
}

input:checked+.class-card .g-txt:after,
.class-card:hover .g-txt:after,
.layer .class-card .g-txt:after {
  display: block;
  opacity: 1;
  top: 0;
  left: 0;
  z-index: 1;
  filter: blur(.01rem);
  mix-blend-mode: soft-light;
  background: linear-gradient(to bottom, #a59383 0%, #463e33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}


.scene[data-name="Character-preemption"] .scene-bg {
  background-image: url(../img/preemption-v11-bg.jpg)
}

.scene[data-name="Character-preemption"] .frm-box * {
  pointer-events: none !important
}

.scene[data-name="Character-preemption"] .frm-box:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: fill;
  z-index: 5;
  mix-blend-mode: multiply;
  transition: opacity .25s ease-out;
}

.scene[data-name="Character-preemption"].enable .frm-box * {
  pointer-events: auto !important
}

.scene[data-name="Character-preemption"].enable .frm-box:before {
  opacity: 0;
  pointer-events: none
}

.preemption-box {
  padding: .15rem 0 0
}

.select-step-content>.confirm-btn {
  width: 3.2rem;
  left: 50%;
  position: absolute;
  top: 3.52rem;
  transform: translateX(-50%);
}

.select-step-content>.confirm-btn .g-txt {
  font-size: .26rem;
  line-height: .33rem;
}

.select-step-content>.confirm-btn:active {
  transform: translate(-50%) scale(.97)
}

.select-steps {
  width: 8.28rem;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  height: .52rem;
  background: #1b1613
}

.select-steps>li {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.select-steps>li input {
  position: absolute;
  width: 1px;
  height: 1px;
  right: 100%;
}

.select-steps label {
  font-size: .2rem;
  line-height: .24rem;
  font-weight: 700;
  padding: .14rem 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #6e6661;
  box-sizing: border-box;
}

.select-steps label strong {
  letter-spacing: -.075em;
  display: inline-block;
  padding-left: .14rem
}

.select-steps input:checked+label {
  background: #423026;
  color: #887165;
}

.select-steps input:checked+label strong {
  color: #fff
}

.select-step-content {
  width: 9.88rem;
  margin: 0 auto;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}

.select-step-content.visible {
  height: auto;
  overflow: visible;
  pointer-events: auto;
}

.select-step-content .step-title,
.select-step-content .step-dc {
  display: block;
  text-align: center;
}

.select-step-content .step-title {
  font-size: .32rem;
  line-height: .4rem;
  padding: .16rem 0 .14rem;
  font-weight: 400;
  letter-spacing: -.025em;
  text-shadow: 0 0 .05rem rgba(0, 0, 0, 1)
}

.select-step-content .step-title strong {
  font-weight: inherit;
  color: #e11a00;
  font-weight: 700
}

.select-step-content .step-dc,
.select-step-content .step-dc .g-txt {
  font-size: .16rem;
  line-height: .23rem;
  letter-spacing: -.05em;
  font-weight: 400;
  text-shadow: 0 0 .05rem rgba(0, 0, 0, .6)
}

.select-step-content .step-dc .g-txt {
  text-shadow: none;
  font-weight: 700;
  line-height: .21rem;
}

.select-step-content .step-dc .g-txt:after {
  filter: none;
  opacity: 1;
  top: .005rem;
  left: 0;
}

.select-step-content .step-dc .g-txt:before {
  filter: blur(.05rem);
  opacity: 1
}

.select-step-content .step-dc .g-txt em,
.select-step-content .step-dc .g-txt:after {
  background: linear-gradient(to bottom, #e1d0b5 45%, #d1ad74 55%, #ad987d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.select-step-content .step-dc .g-txt.line {
  border-bottom: .01rem solid #c5ae88;
}


.server-grid-wrap {
  display: flex;
  height: 3.52rem;
  flex-direction: column;
  width: 8.53rem;
  margin: 0 auto;
}

.server-grid-wrap:before,
.server-grid-wrap:after {
  content: "";
  display: block;
  flex: 1
}

.server-grid {
  flex: none;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: .12rem;
}

.server-grid .grid-item {
  width: calc(100% / 3);
  position: relative;
  height: auto;
  z-index: 1;
  overflow: hidden;
}

.server-grid .grid-item:before {
  content: "";
  display: block;
  padding-top: 21.8%;
  z-index: 0;
}

.server-grid .grid-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  right: 100%;
}

.server-grid .grid-item label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: .2rem 0;
  background: url(../img/preemption-select-server-off.png) no-repeat center / calc(100% + .04rem) auto;
}

.server-grid input:checked+label {
  background-image: url(../img/preemption-select-server-on.png)
}


.server-grid label strong,
.server-grid label span {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-weight: 700;
  position: relative;
}

.server-grid strong {
  width: .85rem;
  font-size: .18rem;
  line-height: .22rem;
}

.server-grid .status {
  width: .76rem;
  font-size: .15rem;
  line-height: .22rem;
  text-indent: .08rem;
  text-shadow: 0 .01rem .01rem rgba(0, 0, 0, 1);
  white-space: nowrap;
}

.server-grid .status:after {
  content: "";
  display: inline-block;
  width: .08rem;
  height: .08rem;
  transform: rotate(-45deg);
  margin-left: .06rem;
  box-shadow: 0 .01rem .01rem rgba(0, 0, 0, 1)
}

.server-grid input[data-type="0"]+label .status {
  color: #0e8039
}

.server-grid input[data-type="0"]+label .status:after {
  background-color: #0e8039
}

.server-grid input[data-type="1"]+label .status {
  color: #c39e08
}

.server-grid input[data-type="1"]+label .status:after {
  background-color: #c39e08
}

.server-grid input[data-type="2"]+label .status {
  color: #de1c04
}

.server-grid input[data-type="2"]+label .status:after {
  background-color: #de1c04
}

.select-step-content.srv_max .step-title {
  padding-top: .15rem;
}

.select-step-content.srv_max .server-grid-wrap {
  margin-top: .15rem
}

.select-step-content.srv_max .confirm-btn {
  top: 3.96rem
}

.srv_max .server-grid .grid-item {
  width: calc(100% / 3);
}

.srv_max .server-grid .grid-item:before {
  padding-top: 17.94%;
}

.srv_max .server-grid label {
  padding: .13rem 0;
  background-image: url(../img/preemption-server-max-off.png)
}

.srv_max .server-grid input:checked+label {
  background-image: url(../img/preemption-server-max-on.png)
}


.select-step-content.srv_20 .step-title {
  padding-top: .15rem;
}

.select-step-content.srv_20 .server-grid-wrap {
  margin-top: .125rem
}

.select-step-content.srv_20 .confirm-btn {
  top: 3.96rem
}

.srv_20 .server-grid .grid-item {
  width: calc(100% / 4);
}

.srv_20 .server-grid .grid-item:before {
  padding-top: 23.39%;
}

.srv_20 .server-grid label {
  padding: .12rem .12rem .12rem 0;
  background-image: url(../img/preemption-server-20-off.png);
  background-size: 2.06rem auto
}

.srv_20 .server-grid input:checked+label {
  background-image: url(../img/preemption-server-20-on.png)
}



.srv_min .server-grid {
  padding: 0;
  display: block;
  position: relative;
}

.srv_min .server-grid:before,
.srv_min .server-grid:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: .33rem;
  left: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(../img/preemption-server-grid-deco.png);
}

.srv_min .server-grid:before {
  bottom: 100%;
  margin-bottom: -.02rem;
  background-size: 7.3rem auto;
  background-position: center top
}

.srv_min .server-grid:after {
  top: 100%;
  margin-top: -.02rem;
  background-size: 5.8rem auto;
  transform: rotateX(180deg);
  background-position: center bottom
}

.srv_min .server-grid .grid-item {
  flex: none;
  display: block;
  width: 100%
}

.srv_min .server-grid .grid-item+.grid-item {
  margin-top: -.12rem
}

.srv_min .server-grid .grid-item:before {
  padding-top: 1.43rem;
}

.srv_min .server-grid .grid-item label {
  text-align: left;
  padding: .13rem;
  background-size: contain;
  background-image: url(../img/preemption-server-v11-off.png);
}

.srv_min .server-grid .grid-item label strong {
  font-size: .35rem;
  line-height: .4rem;
  width: auto;
  padding: .38rem .48rem 0 .6rem;
  vertical-align: top;
}

.srv_min .server-grid .status {
  font-size: .22rem;
  line-height: .3rem;
  width: auto;
  vertical-align: top;
  padding: .44rem 0 0
}

.srv_min .server-grid .status:after {
  width: .12rem;
  height: .12rem;
  margin-left: .08rem;
}

.srv_min .server-grid input:checked+label {
  background-image: url(../img/preemption-server-v11-on.png);
}

.srv_min .server-grid .grid-item label:before,
.srv_min .server-grid .grid-item label:after {
  content: "";
  display: block;
  position: absolute;
  left: .13rem;
  top: .13rem;
  bottom: .13rem;
  right: .13rem;
  z-index: -1;
  pointer-events: none;
}

.srv_min .server-grid .grid-item input+label:before {
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: .65;
}

.srv_min .server-grid .grid-item input+label:after {
  background: linear-gradient(to right, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 88%);
  opacity: .75;
}

.srv_min .server-grid .grid-item input:checked+label:after {
  background: linear-gradient(to right, rgba(117, 15, 2, 1) 15%, rgba(117, 15, 2, 0) 88%);
}

.srv_min .server-grid .grid-item input:checked+label:before {
  opacity: 1;
}

.srv_min .server-grid .grid-item input[value="21"]+label:before {
  background-image: url(../img/preemption-srv21-img.jpg);
}

.srv_min .server-grid .grid-item input[value="22"]+label:before {
  background-image: url(../img/preemption-srv22-img.jpg);
}

.srv_min .server-grid .grid-item label strong.promo {
  padding-top: .48rem
}

.srv_min .server-grid .grid-item label strong.promo:before {
  content: "";
  display: block;
  position: absolute;
  background: url(../img/ic-live-mark.png) no-repeat 0 0 / contain;
  width: .64rem;
  height: .25rem;
  top: .24rem;
  left: calc(50% + .06rem);
  transform: translateX(-50%)
}


.class-grid {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: .08rem;
  padding-top: .16rem;
  height: 3.36rem
}

.class-grid .grid-item {
  flex: 1;
}

.class-grid .class-btn {
  height: .4rem;
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  padding-right: .4rem;
  box-sizing: border-box;
  background: #2d0d0e
}

.class-grid .class-btn .txt {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #a26768;
  letter-spacing: -.075em;
  font-size: .16rem;
  line-height: .24rem;
  padding: .08rem 0;
}

.class-grid .class-btn .ic {
  position: absolute;
  right: 0;
  top: 0;
  width: .4rem;
  height: .4rem;
  background: #4a1819
}

.class-grid .class-btn .ic:before,
.class-grid .class-btn .ic:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #9a6061;
  height: .02rem;
  width: .11rem;
  transition: transform .25s ease-out;
}

.class-grid .class-btn .ic:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.class-grid .class-btn .ic:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.class-grid .class-btn:hover .ic:before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.class-grid .class-btn:hover .ic:after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.preempt-step3-box {
  width: 7.3rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: .11rem .3rem;
  background: rgba(0, 0, 0, .5)
}

.preempt-step3-box .preempted-options {
  display: flex;
  width: 5.8rem;
  margin: 0 auto;
  gap: .28rem;
  align-items: stretch;
  height: .38rem;
}

.preempt-step3-box .preempted-options li {
  flex: 1;
  padding-bottom: .02rem;
  position: relative;
}

.preempt-step3-box .preempted-options li:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: .02rem;
  width: 100%;
  left: 0;
  background: url(../img/frm-line-red.jpg) repeat-x center / auto 100%;
}

.preempt-step3-box .preempted-options li>span {
  display: inline-block;
  line-height: .26rem;
  font-size: .235rem;
  padding: .05rem 0;
  letter-spacing: -.075em;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.preempt-step3-box .preempted-options .item-name {
  font-weight: 700;
  color: #b32415;
  width: 1.44rem;
}

.preempt-step3-box .preempted-options li:nth-child(even) {
  background-position: left center
}

.preempt-step3-box .preempted-options li:nth-child(odd) {
  background-position: right center
}

.preempt-step3-box .frm-block {
  height: .54rem;
  margin: .2rem 0 0;
  padding: 0;
}

.preempt-step3-box .frm-block:before {
  display: none;
}

.preempt-step3-box .frm-block .frm-name,
.preempt-step3-box .frm-block .confirm-btn {
  flex: none;
  width: 1.82rem;
  text-align: center;
  padding: .15rem 0;
}

.preempt-step3-box .frm-block .frm-name,
.preempt-step3-box .frm-block .confirm-btn span {
  font-weight: 700;
  font-size: .2rem;
  line-height: .24rem;
  letter-spacing: -.05em;
}

.preempt-step3-box .frm-block .frm-name {
  color: #cc8b8c;
  text-align: center;
  background: #6b150b;
}

.preempt-step3-box .frm-block .confirm-btn {
  margin-left: .05rem;
  position: relative;
}

.preempt-step3-box .frm-block .confirm-btn span {
  display: inline-block;
  position: relative;
  z-index: 1
}

.preempt-step3-box .frm-block input {
  border: .02rem solid #6b150b;
  background: #000;
  font-size: .15rem;
  line-height: .3rem;
  letter-spacing: -.075em;
  color: #fff;
  padding: 0 .18rem;
  font-weight: 400;
  overflow: hidden;
}

.preempt-step3-box .frm-block input::placeholder {
  color: #808080;
}

.preempt-step3-box .frm-block input:valid {
  font-size: .24rem;
  font-weight: 700
}

.preemption-box .preempt-notice {
  position: relative;
  width: 7.3rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: .18rem 0 0 2.16rem;
}

.preemption-box .preempt-notice:before {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 1.54rem;
  height: 1.54rem;
  left: .44rem;
  top: 0;
  background: url(../img/preemption-step3-emoticon.png) no-repeat center / contain;
}

.preemption-box .preempt-notice li {
  display: block;
  position: relative;
  padding-left: .12rem;
  font-weight: 400;
  font-size: .16rem;
  line-height: .21rem;
  letter-spacing: -.05em;
}

.preemption-box .preempt-notice li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: .03rem;
  height: .03rem;
  top: .09rem;
  background: #b3b3b3
}


.scene[data-name="Character-preemption"] .frm-box,
.scene[data-name="Character-preemption"] .select-steps,
.scene[data-name="Character-preemption"] .select-step-content {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out;
}

.scene[data-name="Character-preemption"].active .frm-box,
.scene[data-name="Character-preemption"].active .select-steps,
.scene[data-name="Character-preemption"].active .select-step-content {
  opacity: 1;
  transform: translateY(0);
}

.scene[data-name="Character-preemption"].active .frm-box {
  transition-delay: .15s
}

.scene[data-name="Character-preemption"].active .select-steps {
  transition-delay: .45s
}

.scene[data-name="Character-preemption"].active .select-step-content {
  transition-delay: .55s
}


/* layer */
.layer[data-name="preemption-end"] .alert-msg {
  line-height: .37rem;
  font-size: .33rem;
}

.layer[data-name="preemption-end"] small {
  margin-top: .2rem
}

.layer[data-name="preemption-end"] .g-txt em {
  background: linear-gradient(-181deg, #e8dac1 0%, #eadabf 48%, #d5af74 50%, #bba686 95%, #81715e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.layer[data-name="preempt-confirm"] .preempt-notice {
  padding: .4rem 0;
  font-size: .2rem;
}

.layer[data-name="preempt-complete"] .preempted-options .item-name {
  font-size: .16rem;
  line-height: .2rem;
  padding: .03rem 0 .04rem;
}

.layer[data-name="preempt-complete"] .preempted-options .item-value {
  font-size: .23rem;
  line-height: .3rem;
  letter-spacing: -.05em;
  padding: 0 0 .02rem;
  margin: 0;
}

.layer[data-name="preempt-complete"] .layer-banner {
  width: 5.06rem
}

.layer[data-name="join-complete"] .layer-preempt-title {
  padding-top: .5rem
}

.layer[data-name="join-complete"] .layer-preempt-title .g-txt {
  font-size: .36rem
}

.layer[data-name="join-complete"] .preempted-options {
  margin: 0 auto;
  padding: .22rem 0 .14rem;
  width: 2.9rem
}

.layer[data-name="join-complete"] .preempted-options button.item-name i {
  right: 22%
}

.layer[data-name="join-complete"] .preempt-notice {
  font-size: .16rem;
  line-height: .2rem;
  font-weight: 600
}