.per-top {
  position: relative;
  overflow: hidden;
}
.per-top .big-avar {
  width: 20%;
  border-radius: 50%;
  overflow: hidden;
  margin: 11% auto 0;
}
.per-top .big-avar img {
  width: 100%;
}
.per-top .pre-info {
  color: #fff;
  font-size: 0.8rem;
  width: 46%;
  margin: 4% auto;
}
.per-top .pre-info span {
  min-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  max-width: 65%;
}
.per-top .pre-info .gold {
  margin: 0;
  float: right;
  min-width: 10%;
  padding-left: 12%;
}
.edit {
  position: absolute;
  top: 3%;
  right: 6%;
  width: 6.5%;
  height: 6%;
  background: url('../img/pan.png') no-repeat center;
  background-size: 100%;
  z-index: 999;
}
.pre-box {
  background: #2a333e;
  padding: 3.5% 4%;
  margin: 2% 0 0;
  font-size: 1rem;
  color: #b8bdc3;
}
.pre-box a {
  color: #b8bdc3;
  display: block;
}
.pre-box .iconfont {
  vertical-align: middle;
  margin-right: 2%;
  font-size: 1.5rem;
  float: left;
  margin-top: -0.8%;
}
.pre-box .icon-unlock {
  font-size: 1.5rem;
}
.pre-box .right {
  float: right;
  margin: 0;
}
.my-game {
  border-top: 1px solid #3e444a;
  background: #2a333e;
  padding: 5% 0;
  overflow: hidden;
}
.my-game a {
  display: block;
  width: 20%;
  color: #fff;
  font-size: 0.8rem;
  float: left;
  margin-left: 4%;
  text-align: center;
}
.my-game a img {
  width: 60%;
  display: block;
  margin: 0 auto 3%;
}
.my-game a span {
  text-align: center;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .start-play {
  font-size: 1.05rem;
  padding: 2.5% 0;
  display: block;
  width: 44%;
  text-align: center;
  margin: 6% auto;
}
.tti {
  width: 16%;
  margin: auto;
  padding: 3% 0;
  position: relative;
  font-size: 0.8rem;
  color: #606368;
  text-align: center;
}
.tti:after {
  content: "";
  display: block;
  height: 1px;
  background: #40464f;
  width: 150%;
  position: absolute;
  left: 104%;
  top: 50%;
}
.tti:before {
  content: "";
  display: block;
  height: 1px;
  background: #40464f;
  width: 150%;
  position: absolute;
  left: -155%;
  top: 50%;
}
.noedit {
  margin: 7% 0 0;
  background: #2a333e;
  padding: 1% 4%;
}
.noedit .eec {
  border-top: 1px solid #4b596b;
  border-bottom: 1px solid #4b596b;
  margin: 0 -3.9%;
  padding: 5% 7%;
}
.noedit ul {
  overflow: hidden;
  color: #7e94ad;
  padding: 4% 3%;
  font-size: 1.1rem;
}
.noedit ul .n1 {
  padding-left: 3%;
  float: left;
  width: 30%;
}
.noedit ul .n2 {
  float: right;
  width: 50%;
}
.noedit ul .n2 input {
  background: #2b343f;
  width: 100%;
  text-align: right;
  color: #7e94ad;
  font-size: 1rem;
}
.noedit ul .n2 select {
  background: #1f272e;
  color: #7e94ad;
  display: block;
  width: 30%;
  padding: 2%;
  border-radius: 5px;
  float: right;
}
.noedit ul .n2 .date {
  width: 80%;
  display: block;
  background: #21292f;
  float: right;
}
.fanhui {
  float: right;
  color: #fff;
  margin: -12% 11% 0 0;
}
.safe {
  padding: 12% 0;
}
.safe .tti {
  width: 24%;
  font-size: 1rem;
}
.safe .tti:before {
  left: -95%;
  width: 85%;
}
.safe .tti:after {
  left: 107%;
  width: 85%;
}
.safe .three {
  padding: 5% 9%;
}
.safe .three ul {
  overflow: hidden;
  margin: 10% auto 0;
  padding: 1.5% 0 1.5% 18%;
}
.safe .three ul .ll1 {
  float: left;
}
.safe .three ul .ll1 p {
  color: #b5bbc1;
}
.safe .three ul .ll1 span {
  color: #738595;
  font-size: 0.8rem;
  display: block;
  transform: scale(0.9);
  margin-left: -6%;
}
.safe .three ul .ll2 {
  float: right;
  width: 20%;
  color: #bbbbbb;
  margin-top: 3%;
}
.safe .three ul .ll2 i {
  background: url(../img/pan.png) no-repeat;
  width: 23%;
  display: inline-block;
  background-size: 100%;
  vertical-align: middle;
  padding: 15% 0;
}
.safe .three .u1 {
  background: url("../img/x1.png") no-repeat;
  background-size: auto 100%;
}
.safe .three .u2 {
  background: url("../img/x2.png") no-repeat;
  background-size: auto 100%;
}
.safe .three .u3 {
  background: url("../img/x3.png") no-repeat;
  background-size: auto 100%;
}
.safe .three .u3 .ll1 {
  padding: 3.4% 0;
}
.safe .three .u4 {
  background: url("../img/x4.png") no-repeat;
  background-size: auto 100%;
}
.safe .three .u4 .ll1 {
  padding: 3.4% 0;
}
.first, .auth-confirm {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.57);
  z-index: 999;
  display: none;
}
.auth-confirm .username{
  color: #333;
}
.auth-confirm .tips {
  color: #b0afaf;
  font-size: 0.8rem;
  padding: 3% 4% 0 8%;
}
.auth-confirm .edit-box .info{
  padding-top: 2%;
}
.auth-confirm .edit-box .info input{
  width: 80%;
}
.auth-confirm .edit-box .start-play{
  font-size: 0.9rem;
  margin-top: 0;
  padding: 1.8% 0;
  width: 35%;
}
.edit-box {
  position: absolute;
  top: -34%;
  left: 50%;
  margin-left: -40%;
  width: 80%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  color: #b0afaf;
  font-size: 1.05rem;
}
.edit-box p, .edit-box .title{
  padding: 2%;
  text-align: center;
  border-bottom: 2px solid #cccbcb;
}
.edit-box .sure {
  font-size: 0.9rem;
  margin-top: 0;
  padding: 1.8% 0;
  width: 35%;
}
.edit-box .info {
  padding: 5% 8%;
}
.edit-box .info li {
  border-bottom: 1px solid #ccc;
  padding: 3% 0 1.5%;
}
.edit-box .info li .start-play {
  border-radius: 5px;
  font-size: 0.8rem;
  float: right;
  width: 34%;
  margin: 0 -2% 0 0;
  transform: scale(0.9);
}
.edit-box .info i {
  font-size: 1.3rem;
  display: inline-block;
  vertical-align: middle;
  width: 10%;
}
.edit-box .info .icon-mobilephone_fill {
  transform: scaleX(0.75);
  font-size: 2rem;
  margin-left: -1.5%;
  width: 11.6%;
  line-height: 12px;
}
.edit-box .info input {
  display: inline-block;
  font-size: 0.99rem;
  width: 55%;
  color: #666;
}
.second,
.xiuxiu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
  overflow: hidden;
  background: #222a31;
  z-index: 666;
  height: 100%;
  transition: .5s all;
}
.second .tti,
.xiuxiu .tti {
  width: 19%;
  font-size: 1rem;
  padding: 5% 0;
}
.second .tti:before,
.xiuxiu .tti:before {
  left: -125%;
  width: 114%;
}
.second .tti:after,
.xiuxiu .tti:after {
  width: 114%;
}
.second .xiugai,
.xiuxiu .xiugai {
  background: #2a333e;
  padding: 3%;
}
.second .xiugai .box1,
.xiuxiu .xiugai .box1 {
  overflow: hidden;
  padding: 3% 0;
}
.second .xiugai .box1 li,
.xiuxiu .xiugai .box1 li {
  float: left;
}
.second .xiugai .box1 .wna,
.xiuxiu .xiugai .box1 .wna {
  width: 35%;
  text-align: right;
  color: #fff;
  font-size: 1.01rem;
  padding: 1.3% 0;
}
.second .xiugai .box1 .inpu,
.xiuxiu .xiugai .box1 .inpu {
  width: 60%;
  margin-left: 3%;
}
.second .xiugai .box1 .inpu select,
.xiuxiu .xiugai .box1 .inpu select,
.second .xiugai .box1 .inpu input,
.xiuxiu .xiugai .box1 .inpu input {
  display: block;
  width: 75%;
  background: #1f272e;
  font-size: 1.01rem;
  border-radius: 5px;
  color: #7e94ad;
  padding: 2.5% 3% 3.5%;
}
.second .xiugai .box1 .inpu select,
.xiuxiu .xiugai .box1 .inpu select {
  width: 80.5%;
}
.second .xiugai .box1 .inpu .start-play,
.xiuxiu .xiugai .box1 .inpu .start-play {
  display: inline-block;
  margin: 3% 0 0;
  padding: 1% 0;
  border-radius: 5px;
  font-size: 0.95rem;
}
.second .xiugai .box2,
.xiuxiu .xiugai .box2 {
  padding: 6% 0 2%;
}
.final {
  padding: 17% 0 0;
}
.final img {
  width: 29%;
  margin: auto;
  display: block;
}
.final .top {
  margin: 12% auto 0;
  width: 70%;
}
.final .top p {
  border-bottom: 2px solid #959494;
  color: #bab9b9;
  margin-top: 9%;
  padding: 1% 0;
}
.final .top p i {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.5rem;
}
.final .top p .icon-mobilephone_fill {
  transform: scaleX(0.75);
  line-height: 12px;
  font-size: 2.5rem;
  margin-left: -2.1%;
  width: 11%;
}
.final .top p input {
  background: #222a31;
  color: #bab9b9;
  font-size: 1.05rem;
  margin-left: 2%;
  width: 55%;
}
.final .top p .getcode {
  float: right;
  width: 32%;
  margin: 0;
  font-size: 0.85rem;
  padding: 1.9% 0;
  border-radius: 5px;
}
.final .start-play {
  margin-top: 18%;
}