@font-face {
  font-family: Roboto;
  font-weight: 400;
  src: url("//files.dreame.com/dreame/file/00f4f4149354f62778b3503933e7b905/Roboto-Regular.ttf") format('truetype');
}
@font-face {
  font-family: Roboto;
  font-weight: 700;
  src: url("//files.dreame.com/dreame/file/303d82a157ea9519f805c9e932c5a76b/Roboto-Medium.ttf") format('truetype');
}
@font-face {
  font-family: Roboto;
  font-weight: 900;
  src: url("//files.dreame.com/dreame/file/41773717f1e83ccd0df8e4a2cc473ba5/Roboto-Bold.ttf") format('truetype');
}
.icon-password-normal {
  background-image: url("//file.dreame.com/group1/M00/0B/FC/rB84XV9DqeyAOatXAAAB6TvoJwA388.png");
}
.icon-email-normal {
  background-image: url("//file.dreame.com/group1/M00/0B/FC/rB84dl9DqeiAapgXAAADqur-mwk818.png");
}
.icon-email-white {
  background-image: url("//file.dreame.com/group1/M00/0B/FC/rB84XV9Dqh6AEXjSAAADqaI7By4653.png");
}
.icon-hidden {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84dlvIcuqAO6u8AAABwGMBxzU658.png");
}
.icon-show {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84dlvIcxyAWR6dAAABMnofKvs298.png");
}
.icon-err {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84XVvIc0SAVkCgAAAAqxY2LwQ275.png");
}
.icon-back-black {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84XVvIc2aATx_hAAAA3CShtRY873.png");
}
.icon-close-normal {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84dlvIc4uAE98SAAAA8bwqFVQ890.png");
}
.icon-google-white {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84dlvIc7GAKrUYAAABoR-6_V0922.png");
}
.icon-facebook-white {
  background-image: url("//file.ficfun.com/group1/M00/00/73/rB84XVvIc-iACNvBAAABTz-7-ZU985.png");
}
:-moz-placeholder {
  color: rgba(34,34,34,0.6);
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
  color: rgba(34,34,34,0.6);
}
input::-webkit-input-placeholder {
  color: rgba(34,34,34,0.6);
}
input::-ms-input-placeholder {
  color: rgba(34,34,34,0.6);
}
.icon-password-normal,
.icon-email-normal,
.icon-hidden,
.icon-err,
.icon-show,
.icon-back-black,
.icon-close-normal,
.icon-google-white,
.icon-facebook-white,
.icon-email-white {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.title {
  font-size: 28px;
  font-weight: 600;
  color: #222;
}
.title-l {
  font-size: 24px !important;
}
.input-box .input-area {
  position: relative;
  width: 300px;
  height: 44px;
  font-size: 16px;
}
.input-box .input-area input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 35px;
  border: none;
  border-bottom: 1px solid rgba(94,77,245,0.4);
  background-color: transparent;
  color: #222;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.input-box .input-area input:focus {
  outline: none;
  color: #222;
  border-bottom-color: #5e4df5;
}
.input-box .input-area .box-icon-l,
.input-box .input-area .box-icon-r {
  position: absolute;
  display: inline-block;
}
.input-box .input-area .box-icon-l {
  left: 0;
}
.input-box .input-area .box-icon-r {
  right: 10px;
}
.input-box.err .err-tip {
  display: block !important;
}
.input-box .err-tip {
  display: none;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: -0.29px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
/**************
 * text-theme *
 **************/
.theme-main {
  color: #5e4df5;
}
.theme-gray {
  color: rgba(34,34,34,0.4);
}
.theme-err {
  color: #ff53b0;
}
/********
 * icon *
 ********/
.icon-password-normal {
  width: 26px;
  height: 26px;
}
.icon-email-normal {
  width: 26px;
  height: 26px;
}
.icon-hidden {
  width: 26px;
  height: 26px;
}
.icon-err {
  width: 26px;
  height: 26px;
}
.icon-show {
  width: 26px;
  height: 26px;
}
.icon-back-black {
  width: 24px;
  height: 24px;
}
.icon-close-normal {
  width: 24px;
  height: 24px;
}
.icon-google-white {
  width: 26px;
  height: 26px;
}
.icon-facebook-white {
  width: 26px;
  height: 26px;
}
.icon-email-white {
  width: 26px;
  height: 26px;
}
.btn {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  overflow: hidden;
}
.btn.disable {
  opacity: 0.4;
}
.btn.btn-block {
  display: block;
  margin: auto;
}
.btn.btn-text {
  display: inline;
  color: rgba(34,34,34,0.4);
  text-decoration: underline;
}
.btn.btn-m {
  padding: 12px 16px;
  width: 280px;
  border-radius: 23px;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.btn-module {
  display: table !important;
  margin: auto;
  width: 276px;
}
.btn-module >* {
  display: table-cell;
}
.btn-module .icon {
  vertical-align: middle;
}
.btn-module .text {
  vertical-align: middle;
}
.btn-theme {
  background: #5e4df5;
  color: #fff;
}
.tip {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}
.main-body[data-active="third-channel"] .btn-back {
  display: none;
}
.pull-right .title {
  margin-bottom: 19px;
  font-size: 28px;
  font-weight: 600;
  color: #222;
}
.pull-right .input-box {
  margin-bottom: 20px;
}
.pull-right .input-box.err .input-area input {
  border-bottom-color: #ff53b0;
}
.pull-right .input-box.err .input-area .icon-err {
  display: inline-block !important;
}
.pull-right .btn-back {
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 18px;
  font-weight: 600;
}
.pull-right .btn-login,
.pull-right .btn-regist {
  margin-bottom: 25px;
}
.pull-right .btn-login:hover,
.pull-right .btn-regist:hover {
  opacity: 0.8;
}
.pull-right .btn-resetPassword {
  margin-bottom: 8px;
}
.pull-right .btn-resetPassword:hover {
  opacity: 0.8;
}
.third-channel footer {
  position: absolute;
  margin-top: 54px;
  text-align: center;
  color: rgba(34,34,34,0.4);
}
.third-channel .btn-thirdLogin {
  margin-bottom: 24px;
  padding: 0 26px;
  width: 276px;
  height: 48px;
  border-radius: 2px;
  color: #fff;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.third-channel .btn-thirdLogin:last-child {
  margin-bottom: 0;
}
.third-channel .btn-thirdLogin:hover {
  opacity: 0.8;
}
.third-channel .btn-google {
  background-color: #6074f6;
}
.third-channel .btn-facebook {
  background-color: #40579e;
}
.third-channel .btn-email {
  background-color: #5e4df5;
}
.login-error .title {
  text-align: center;
}
.login-error a:hover {
  color: #fff;
}
.login-error .btn-error {
  margin-top: 24px;
}
.login-error .btn-error:hover {
  opacity: 0.8;
}
.horizontal-center {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.center {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.fixed {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}
.fixed nav {
  display: table;
  width: 100%;
}
.fixed .screen {
  position: fixed;
  background-color: rgba(34,34,34,0.6);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.fixed .content {
  display: table;
  max-width: 100%;
  background-color: #fff;
}
.suspensionLogin[data-active="third-channel"] nav .back {
  display: none;
}
.suspensionLogin .content {
  display: table;
  padding: 12px;
  border-radius: 4px;
}
.suspensionLogin .content nav {
  text-align: left;
}
.suspensionLogin .content>div {
  margin: 17px;
  width: 300px;
}
.suspensionLogin .content>div#article {
  width: 636px;
}
.suspensionLogin .content .title {
  margin-bottom: 19px;
}
.suspensionLogin .content .desc-m {
  display: block;
  font-size: 14px;
  color: #222;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
}
.suspensionLogin .content .input-box {
  margin-bottom: 20px;
}
.suspensionLogin .content .input-box.err .input-area input {
  border-bottom-color: #ff53b0;
}
.suspensionLogin .content .input-box.err .input-area .icon-err {
  display: inline-block !important;
}
.suspensionLogin .content .btn-login,
.suspensionLogin .content .btn-regist {
  margin-bottom: 25px;
}
.suspensionLogin .content .btn-resetPassword {
  margin-bottom: 8px;
}
.suspensionLogin .content .tip {
  font-size: 14px;
  color: rgba(34,34,34,0.6);
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
}