.wrapper.sign__warpper {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:auto;
  margin:0;
  z-index:199;
  display:none;
  background:rgba(0,0,0,.5)
}
.sign__warpper .dialog {
  position:relative;
  background-color:#fff;
  width:500px;
  margin:200px auto 50px;
  padding:30px 30px;
  box-shadow:0 4px 20px 0 rgba(0,0,0,.4);
  border-radius:5px
}
.sign__warpper .dialog.display {
  display:block;
  animation:signDialog .3s;
  -webkit-animation:signDialog .3s
}
@keyframes signDialog {
  0% {
    opacity:0;
    -webkit-transform:scale(.5);
    transform:scale(.5)
  }
  100% {
    opacity:1;
    -webkit-transform:scale(1);
    transform:scale(1)
  }
}
.sign__warpper .dialog .dialog-btn {
  position:relative
}
.sign__warpper .login,
.sign__warpper .binding,
.sign__warpper .forgotPass,
.sign__warpper .sign {
  display:none
}
.sign__warpper .binding {
  display:none
}
.dialog i.close-ico {
  position:absolute;
  top:20px;
  right:20px;
  cursor:pointer;
  font-size:30px;
  color:#555
}
.dialog p.dialog_title {
  font-size:30px;
  margin-bottom:20px;
  color:#111;
  text-align:center
}
.dialog .input-box {
  margin-bottom:15px;
  position:relative
}
.wrapper .login ul,
.wrapper .sign ul {
  margin-bottom:30px
}
.dialog li input {
    height: 50px;
    border-radius: 4px;
    opacity: 1;
    border: 1px solid rgb(192, 192, 214);
    background: 0 0;
    width: 100%;
    padding-left: 49px;
    color: #444
}
.wrapper .dialog .tips {
  color:red;
  margin-top:5px;
  font-size:12px
}
.dialog .input-box i {
  position:absolute;
  top:15px;
  left:15px;
  color:#b1b1b1;
  font-size:22px
}
.dialog .email .input-box img {
  width:24px;
  height:19px;
  position:absolute;
  top:13px;
  left:12px
}
.dialog .checked {
  margin-bottom:3px
}
.login .checked a {
  text-align:right
}
.dialog a {
  color:#0574db
}
.dialog a:hover {
  text-decoration:underline
}
.dialog .checked p {
  cursor:pointer
}
.login .checked p {
  white-space:nowrap
}
.dialog .checked p.active label {
  border:1px solid #0082fb
}
.dialog .checked label {
  min-width:18px;
  height:18px;
  border-radius:2px;
  border:1px solid #777;
  margin-right:8px;
  cursor:pointer
}
.dialog .checked label i {
  display:none;
  color:#0082fb
}
.dialog .checked p.active label i {
  display:block
}
.dialog button {
    height: 56px;
    background: rgb(86, 79, 255);
    border-radius: 4px;
    width: 100%;
    font-size: 16px;
    color: #fff;
    margin-top: 10px;
    cursor: pointer
}
    .dialog button:hover {
        background-color: rgb(82, 62, 201)
    }
.dialog button:disabled {
  cursor:not-allowed
}
.dialog button i {
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  border-left:2px solid #fff;
  margin:auto;
  animation:rotation 1s linear infinite;
  display:none
}
@keyframes rotation {
  from {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(360deg)
  }
}
.dialog button.error {
  background:#ed5565
}
.forgotPass .forgotpass_title .back {
  color:#000;
  transform:rotate(180deg);
  font-size:24px;
  margin-right:10px;
  cursor:pointer
}
.forgotPass .forgotpass_title .dialog_title {
  margin-bottom:0
}
.forgotPass .notice {
  color:#101822;
  margin-top:30px;
  margin-bottom:20px
}
.forgotPass.dialog button {
  margin-top:15px;
  margin-bottom:8px
}
.updatePass.dialog .forgotpass_title {
  margin-bottom:30px
}
.bind_page .login_register {
  width:400px
}
.dialog .shade {
  margin-top:20px
}
.dialog .shade p {
  text-align:center;
  color:#555
}
.dialog .shade span i {
  display:block;
  font-size:24px;
  color:#a7b6c2
}
.dialog .shade span {
  width:40px;
  height:40px;
  padding:5px;
  text-align:center;
  line-height:30px;
  border-radius:50%;
  margin:20px 0 20px 10px;
  cursor:pointer
}
.dialog .shade span:last-child {
  margin-right:0
}
.dialog .shade span i {
  color:#fff
}
.dialog .shade span.facebook {
  background:#217ce4
}
.dialog .shade span.facebook:hover {
  background:#0d73e7
}
.dialog .shade span.google {
  background:#4f92ef
}
.dialog .shade span.google:hover {
  background:#3f87eb
}
.dialog .shade span.reddit {
  background:#e14c36
}
.dialog .shade span.reddit:hover {
  background:#e93116
}
.dialog .shade span.steam {
  background:#2e7fa6
}
.dialog .shade span.steam:hover {
  background:#3291bf
}
.dialog .shade span.twitch {
  background:#4a358a
}
.dialog .shade span.twitch:hover {
  background:#6546c5
}
.dialog .shade span.twitter {
  background:#329be3
}
.dialog .shade span.twitter:hover {
  background:#1a91e3
}
.dialog .shade span.youtube {
  background:#ed1e26
}
.login_register {
    width: 500px;
    background-color: rgb(30, 34, 66);
    margin: 160px auto 50px;
    padding: 50px 40px 30px;
    border-radius: 4px;
}
.sign_up_dom {
  display:none
}
.login_register .common_title {
  font-size:24px;
  color:#fff;
  text-align:center;
  margin-bottom:38px
}
.login_register .input_box {
  margin-bottom:16px
}
.login_register input {
  width:100%;
  height:44px;
  border:solid 1px #b7b7b7;
  border-radius:4px
}
.login_register .code input {
    width: 45%;
}
.login_register input:focus {
  border:solid 1px #000
}
.login_register input.required {
  border:solid 1px #d52b1e
}
.login_register a {
  color:#0574db
}
.login_register a:hover {
  text-decoration:underline
}
.login_register .remember_me .checkbox {
  color:#666;
  font-size:12px
}
.login_register .remember_me .checkbox {
  margin-bottom:5px
}
.login_register .remember_me .checkbox span {
  width:16px;
  min-width:16px;
  height:16px;
  border-radius:50%;
  border:solid 1px #b7b7b7;
  margin-right:5px
}
.login_register .remember_me .checkbox span.active {
  border:solid 1px #12b73d
}
.login_register .remember_me .checkbox span.active i {
  width:10px;
  height:10px;
  background:#12b73d;
  border-radius:50%
}
.login_register button {
    height: 56px;
    background: rgb(86, 79, 255);
    border-radius: 2px 2px 2px 2px;
    width: 100%;
    font-size: 16px;
    color: #fff;
    margin-top: 36px;
    margin-bottom: 30px
}
    .login_register button:hover {
        background-color: rgb(82, 62, 201);
    }
.login_register button.noSubmit {
  background:#ccc;
  box-shadow:none;
  cursor:not-allowed
}
.login_register button.noSubmit:hover {
  background:#ccc;
  box-shadow:none;
  cursor:not-allowed
}
.login_register .footerText {
  text-align:center;
  margin-top:20px
}
.login_register .footerText span {
  color:#12b73d;
  cursor:pointer
}
.login_register .footerText span:hover {
  text-decoration:underline
}
.forgotPassword p {
    margin-bottom: 20px;
    color: rgb(167, 167, 200);
}
.forgotPassword .success {
    color: rgb(167, 167, 200);
}
.forgotPassword.login_register button {
    margin-bottom: 0;
    margin-top: 14px
}
.forgotPassword .back {
  position:absolute;
  top:20px;
  left:30px;
  color:#b7b7b7;
  transform:rotate(180deg)
}
.forgotPassword .back i {
  color:#b7b7b7;
  font-size:24px
}
.backToSite {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  color:#000;
  padding:20px;
  width:300px;
  z-index:100
}
.backToSite h2 {
  color:green
}
.backToSite p {
  margin:20px 0
}
.backToSite a {
  width:100%;
  height:40px
}
.backToSite a button {
  background-color:#d52b1e;
  box-shadow:0 6px 18px 0 rgb(213 43 30/56%);
  color:#fff;
  width:100%;
  height:100%
}
.login_binding .login_binding_text {
  text-align:center;
  margin-bottom:20px
}
.bind_show {
  display:none
}
.bind_show.display {
  display:block
}
.bind_show.remember_me.display {
  display:flex
}
@media(max-width:1024px) {
  .dialog li input {
    height:44px
  }
  .dialog .input-box i {
    top:11px
  }
  .dialog button {
    height:44px
  }
  .dialog .checked p {
    font-size:12px
  }
  .login .checked a {
    font-size:12px
  }
  .login_register {
    width:100%
  }
}
@media(max-width:768px) {
  .sign__warpper .dialog {
    width:95%;
    margin:70px auto 50px;
    padding:20px 15px
  }
}