html, body {
  width: 100%;
  height: 100%;
  font-family: Hiragino Sans GB, Arial, Helvetica, '\5B8B\4F53', sans-serif;
}

html {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

body {
  padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
  padding-top: env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

.ilogin-header {
  height: 2.7rem;
  box-sizing: border-box;
  padding-top: 0.5rem;
  text-align: center;
}

.ilogin-header .logo-img-wrapper {
    margin: 0 auto;
    background: url(//p0.meituan.net/codeman/ae846a35c5f42565206c3c7b47be3a5310601.png) 50% 50%;
    background-size: cover;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    margin-bottom: 0.6rem;

  }

.ilogin-header .logo-img-wrapper .logo-img {
      width: 100%;
      height: 100%;
    }

.ilogin-header.notitlebar {
  margin-top: 1rem;
}

.navbar {
  height: 1rem;
  color: #fff;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem;

}

.navbar .back-btn {
    width: 0.45rem;
    height: 0.45rem;

  }

.navbar .back-btn .icon-back {
      position: relative;
    }

.navbar .header-title {
    font-size: 0.36rem;
  }

.navbar .nav-btn {
    width: 0.45rem;
    height: 0.45rem;
    cursor: pointer;

  }

.navbar .nav-btn .text-icon {
      font-size: 0.4rem;
    }

.navbar .nav-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
  }

.text-icon {
  font-family: base_icon;
}

.icon-back:before {
  content: '';
  display: block;
  position: absolute;
  left: 0.07rem;
  top: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-bottom: 0.04rem solid #fff;
  border-left: 0.04rem solid #fff;
  -webkit-transform: scaleY(0.8) rotateZ(45deg);
  -moz-transform: scaleY(0.8) rotateZ(45deg);
  -ms-transform: scaleY(0.8) rotateZ(45deg);
  transform: scaleY(0.8) rotateZ(45deg);
}

.icon-back:after {
  content: '';
  display: block;
  position: absolute;
  top: 0.2rem;
  left: 0.03rem;
  height: 0;
  width: 0.45rem;
}

.ilogin-footer {
  width: 68%;
  position: absolute;
  bottom: auto;
  left: 54%;
  transform: translateX(-50%);

}

.ilogin-footer p {
    display: inline-block;
    font-size: .22rem;
    color: #999999;
    line-height: .26rem;
  }

.iLoginComp-user-wxUserConfirm{
  width: 19%;
  position: relative;
}

.login-section .mtfe-tip-mtfe-wrapper {
    width: 70%;
    padding: 1em;
    border-radius: 0.3rem;
    top: 3.9rem;
    font-size: 0.3rem;
  }

.login-section .mtfe-secyoda-mtfe-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100;
    font-size: 0.2rem;
    overflow-y: scroll;
  }

.login-section .mtfe-mask-second-mobile-wrapper {
    background-color: #fff;
    opacity: 1;
    z-index: 15;

  }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-tip {
      font-size: 0.36rem;
      margin: 0.79rem auto 0;
      color: #666666;
      width: 5.92rem;
      letter-spacing: -0.0087rem;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar {
      margin: 1.72rem auto 0 auto;
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 50%;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar img {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar img[src=''],
    .login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-avatar img:not([src]) {
      opacity: 0;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-nickName {
      font-size: 0.28rem;
      margin: 0.18rem auto 0 auto;
      text-align: center;
      color: #333333;
      letter-spacing: -0.0068rem;
      font-weight: bold;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-confirm {
      font-size: 0.36rem;
      margin: 0.65rem auto 0;
      width: 5.92rem;
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      border-radius: 0.08rem;
      letter-spacing: -0.0087rem;
      color: #fff;
      background-color: #ffc300;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-deny {
      font-size: 0.36rem;
      margin: 1.805em auto 0;
      width: 5.92rem;
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      border-radius: 0.08rem;
      letter-spacing: -0.0087rem;
      color: #999999;
      border: 0.01rem solid #999999;
    }

.login-section .mtfe-mask-second-mobile-wrapper .mtfe-mask-second-mobile-tip-2 {
      font-size: 0.28rem;
      margin: 0.37rem auto 0;
      width: 5.92rem;
      height: 0.82rem;
      color: #999999;
      letter-spacing: -0.0068rem;
    }

.login-section .loading-img {
    width: 0.4rem;
    vertical-align: middle;
    position: relative;
    bottom: 0.02rem;
    margin-right: 0.15rem;
    animation: rotate 1s linear 0s normal none infinite;
    -webkit-animation: rotate 1s linear 0s normal none infinite;
  }

.login-section .iLoginComp-login-btn-wrapper {
    font-size: .3rem;
    margin-top: 0.8rem;
  }

.login-section .iLoginComp-phone-num-input {
    caret-color: #ffc300;
    padding: 0;
    letter-spacing: 0.002rem;
    height: 0.7rem;
    line-height: 1.2em;
    line-height: 26px\9; /*for IE */
    font-family: Avenir-Roman;
    font-size: .4rem;
    color: #333333;
  }

.login-section .iLoginComp-verify-code-wrapper {
    box-sizing: border-box;
    margin-top: 0.5rem;

  }

.login-section .iLoginComp-verify-code-wrapper .iLoginComp-code-input {
      padding-left: 0;
      caret-color: #ffc300;
      letter-spacing: 0.002rem;
      font-family: Avenir-Roman;
      font-size: .4rem;
    }

.login-section .iLoginComp-verify-code-wrapper #accountPwInput {
      letter-spacing: 0.08rem;
    }

.login-section .iLoginComp-verify-code-wrapper .iLoginComp-send-verify-code-text::before {
      content: '';
      width: 0.3rem;
      height: .02rem;
      background-color: #d8d8d8;
      transform: rotate(90deg);
    }

.login-section .iLoginComp-phone-num-wrapper,
  .login-section .iLoginComp-verify-code-wrapper {
    height: 0.7rem;
    box-sizing: border-box;
    padding-bottom: .2rem;
    align-items: center;
    border-bottom: .01rem solid #E5E5E5;
  }

.login-section .iLoginComp-phone-num-wrapper.active,
  .login-section .iLoginComp-verify-code-wrapper.active {
    border-bottom: .01rem solid #fe8c00;
  }

.login-section .iLoginComp-user-confirm-tip {
    width: 50%;
    height: 0.6rem;
    font-size: 0.24rem;
  }

.login-section .iLoginComp-user-confirm-tip::after {
    left: 10%;
    top: 0.36rem;
  }

.login-section .iLoginComp-user-confirm-wxtip {
    width: 50%;
    height: 0.6rem;
    font-size: 0.24rem;
    left: .68rem;
    line-height: 2.3em;
    visibility: hidden;
    text-align: center;
    color: #fff;
    border-radius: .3em;
    background-color: #222;
    font-family: PingFangSC-Medium;
    font-weight: 400;
    position: relative;
    opacity: .7;
    top: .3em;
  }

.login-section .iLoginComp-user-confirm-wxtip::after {
  left: 10%;
    top: 0.36rem;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    -webkit-transform: rotate(
135deg);
    transform: rotate(
135deg);
    border-top: 1.2em solid #222;
    border-left: 1em solid transparent;
  }

.login-section .login-section .iLoginComp-user-confirm-wxtip {
    width: 50%;
    height: 0.6rem;
    font-size: 0.24rem;
    left: .68rem;
    line-height: 2.3em;
    visibility: hidden;
    text-align: center;
    color: #fff;
    border-radius: .3em;
    background-color: #222;
    font-family: PingFangSC-Medium;
    font-weight: 400;
    position: relative;
    opacity: .7;
    top: -.8em;
  }

.login-section .login-section .iLoginComp-user-confirm-wxtip::after {
  left: 10%;
    top: 0.36rem;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    -webkit-transform: rotate(
135deg);
    transform: rotate(
135deg);
    border-top: 1.2em solid #222;
    border-left: 1em solid transparent;
  }

.login-section .iLogincomp-count-down {
    background-color: transparent;
    font-size: 0.32rem;
    align-items: center;

  }

.login-section .iLogincomp-count-down .sending-code-text {
      color: #999;
      display: none;
    }

.login-section .iLogincomp-count-down::before {
    content: '\91CD\65B0\53D1\9001(';
    display: block;
    overflow: hidden;
    font-family: PingFangSC-Regular;
    font-size: .32rem;
    color: #999999;
  }

.login-section .iLogincomp-count-down::after {
    content: ')';
    display: block;
    overflow: hidden;
    font-family: PingFangSC-Regular;
    font-size: .32rem;
    color: #999999;
  }

.login-section .iLoginComp-wrapper {
    padding: 0.3rem 0.65rem 0 0.65rem;

  }

.login-section .iLoginComp-wrapper input::placeholder {
      color: #cccccc;
      opacity: 1; /* Firefox */
      font-size: 0.36rem;
      line-height: normal !important;
      letter-spacing: 0;
      font-family: PingFangSC-Regular !important;
    }

.login-section .iLoginComp-wrapper input::-webkit-input-placeholder {
      color: #cccccc;
      font-size: 0.36rem;
      /* padding-top: 0.12rem; safari placeholder 太高 */
      line-height: normal !important;
      letter-spacing: 0;
      font-family: PingFangSC-Regular !important;
    }

.login-section .iLoginComp-wrapper input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #cccccc;
      font-size: 0.36rem;
      line-height: normal !important;
      letter-spacing: 0;
      font-family: PingFangSC-Regular !important;
    }

.login-section .iLoginComp-wrapper input::-ms-input-placeholder {
      /* Microsoft Edge */
      color: #cccccc;
      font-size: 0.36rem;
      line-height: normal !important;
      letter-spacing: 0;
      font-family: PingFangSC-Regular !important;
    }

.login-section .change-login-type {
    font-size: 0.32rem;
    color: #333333;
    text-align: center;
    margin: 25% 0 10% 0;
    font-weight: 400;

  }

.login-section .change-login-type .toggle-type {
      display: inline-block;
      cursor: pointer;
    }

@media screen and (min-width: 1440px) {

  .login-section .change-login-type {
      font-size: 0.32rem;
      color: #333333;
      text-align: center;
      margin: 5% 0 10% 0;
      font-weight: 400;
  }
  
      .login-section .change-login-type .toggle-type {
        display: inline-block;
        cursor: pointer;
      }
}

.login-section .iLoginComp-send-verify-code-text {
    margin-left: 0;
    padding: 0.15rem 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: PingFangSC-Regular;
    font-size: .32rem;
    color: #333333;
}

.login-section .iLoginComp-send-verify-code-text, .login-section #sendCodeBtnText {
    opacity: 1;
}

.login-section .iLoginComp-send-verify-code-text.iLogincomp-active {
    font-family: PingFangSC-Medium;
    font-size: .32rem;
    color: #FE8C00;
}

.login-section .clear-input-wrapper,
  .login-section .iLoginComp-clear-input-wrapper {
    display: none;
    position: relative;
    padding: 0.3rem;
    margin-right: 0.42rem;
}

.login-section .iLoginComp-clear-input::before,
  .login-section .clear-input::before {
    content: '';
    position: absolute;
    width: .3rem;
    height: .03rem;
    background-color: #C5C6CB;
    transform: rotate(45deg);
    border-radius: 0.15em;
    bottom: .28rem;
}

.login-section .iLoginComp-clear-input::after,
  .login-section .clear-input::after {
    content: '';
    position: absolute;
    width: .3rem;
    height: .03rem;
    background-color: #c5c6cb;
    transform: rotate(-45deg);
    border-radius: 0.15em;
    bottom: .28rem;
}

.login-section .retrievepassword-area {
    -webkit-tap-highlight-color: transparent;
    font-size: 0.24rem;
    color: #666;
    padding-left: 0.2rem;
    border-left: .02rem solid #d8d8d8;
}

.login-section .show-pw {
    padding: 0.15rem 0.2rem 0.15rem 0.2rem;
    margin-left: 0.2rem;
    width: 0.35rem;
}

.login-section .country-area {
    max-width: 45%;
    display: flex;
    min-width: 0;
    font-size: 0.28rem;
    color: #646464;
}

.login-section .iLoginComp-countryname {
    margin-right: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .28rem;
    color: #414244;
    line-height: .28rem;
}

.login-section .right-arrow {
    width: .4em;
    min-width: .4em;
    height: .4em;
}

.login-section .iLoginComp-countrycode {
    font-family: Avenir-Book;
    font-size: .28rem;
    color: #414244;
    line-height: .28rem;
}

.login-section .mtfe-domtip-mtfe-wrapper {
    margin-top: 0.1rem;
    font-size: 0.24rem;
    color: #ff4a4a;
}

.login-section .iLoginComp-user-confirm-text {
    font-size: 0.26rem;
    color: rgba(0,0,0,0.50);
    font-weight: 400;
}

.login-section .iLoginComp-user-confirm-text p {
    display: inline;
}

.login-section .iLoginComp-user-account-tip {
    font-size: 0.24rem;
    color: rgba(0,0,0,0.50);
    text-align: center;
    font-weight: 400;
}

.login-section .iLoginComp-user-confirm label {
    display: inline-block;
    min-width: 10%;
}

.login-section .iLoginComp-user-confirm label .checkbox[type=checkbox]+i {
    display: inline-block;
    border: 1px solid #ccc;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background-color:#ffffff;
    position: relative;
    margin: 0.05rem 0.1rem;
}

.login-section .iLoginComp-user-confirm label .checkbox[type=checkbox]:checked+i {
    background-color: #FFD100;
}

.login-section .iLoginComp-user-confirm label .checkbox[type=checkbox]:checked+i:after {
    position: absolute;
    content: " ";
    width: 0.1rem;
    height: 0.15rem;
    left: 50%;
    transform: rotate(45deg) translateX(-60%);
    border: 1px solid #222;
    border-top: none;
    border-left: none;
    top: 30%;
}

.login-section .iLoginComp-user-confirm .iLoginComp-user-wxUserConfirm {
    display: inline-block;
    min-width: 10%;
}

.login-section .iLoginComp-user-confirm .iLoginComp-user-wxUserConfirm .checkbox[type=checkbox]+i {
    display: inline-block;
    border: 1px solid #ccc;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 50%;
    background-color:#ffffff;
    position: absolute;
    margin: 0.05rem 0.1rem;
    top: .2rem;
    right: 0;
}

.login-section .iLoginComp-user-confirm .iLoginComp-user-wxUserConfirm .checkbox[type=checkbox]:checked+i {
    background-color: #FFD100;
}

.login-section .iLoginComp-user-confirm .iLoginComp-user-wxUserConfirm .checkbox[type=checkbox]:checked+i:after {
    position: absolute;
    content: " ";
    width: 0.05rem;
    height: 0.12rem;
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    border: 1px solid #222;
    border-top: none;
    border-left: none;
}

.login-section .iLoginComp-user-confirm-text a {
    color: #3488FF;
}

.login-section .change-mobile-login {
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 2rem;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 1440px) {

  .login-section .change-mobile-login {
      bottom: 0.5rem;
  }
}

.change-wx-login {
  position: relative;
  bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-logo-img, .wx-logo-img {
  width: 1.08rem;
  height: 1.08rem;
}

.mobile-logo-desc, .wx-logo-desc {
  font-family: PingFangSC-Regular;
  font-size: .2rem;
  color: #999999;
  padding-top: .1rem;
  text-align: center;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: -moz-flex;
  display: flex;
}

.flex-v {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(360deg);
  }
  to {
    -moz-transform: rotate(0deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(360deg);
  }
  to {
    -o-transform: rotate(0deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

.login-overrall {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background-color: transparent;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.back-img {
  width: .48rem;
  height: .48rem;
  position: absolute;
  top: .5rem;
  left: .4rem;
}

#iLoginCompPlaceholder {
  box-sizing: border-box;
  position: relative;
  padding: 0.3rem 0.65rem 0;

}

#iLoginCompPlaceholder div {
    background-color: #e5e5e5;
    opacity: 0.3;
    width: 100%;
    height: 0.7rem;
    border-radius: 0.2rem;
  }

#iLoginCompPlaceholder .line-2 {
    margin-top: 0.5rem;
  }

#iLoginCompPlaceholder .line-3 {
    margin-top: 0.6rem;
    height: 0.9rem;
  }

#accountYodaRoot .wrapper, #smdcodeYodaRoot .wrapper, #accountYodaRoot .boxWrapper, #smdcodeYodaRoot .boxWrapper, #secYodaRoot .wrapper, #accountSecondVerifyRoot .wrapper {
  font-size: .3rem;
}

#accountYodaRoot .imgWrapper, #smdcodeYodaRoot .imgWrapper {
  font-size: .3rem;
}

#accountYodaRoot .btnWrapper, #smdcodeYodaRoot .btnWrapper {
  font-size: 0.35rem;
  height: 0.8rem;
}

.mtfe-model-mtfe-wrapper {
  font-size: .3em !important;
}

.notitlebar.login-section .yodasms {
    margin-top: 1rem;
}