.login-warp {
  width: 100%;
  height: calc(100vh - 100px);
  min-height: 700px;
  background: #e9efff url(../images/login-bg.png);
  background-size: 100% 100%;
  position: relative;
}

.login-warp .hover-op {
  cursor: pointer;
}

.login-warp .hover-op:hover {
  opacity: .8;
}

.login-warp .login-box {
  background: linear-gradient(135deg, #E9EFFF 0%, #FFFFFF 50%, #E9EFFF 100%);
  box-shadow: 0px 0px 11px 0px rgba(62, 84, 238, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 10px;
}

.login-warp .login-box .left {
  width: 678px;
  height: 670px;
  border-radius: 10px 0 0 10px;
}

.login-warp .login-box .left img {
  width: 100%;
  height: 100%;
}

.login-warp .login-box .right {
  width: 560px;
  height: 670px;
  border: 2px solid #fff;
  border-left: none;
  border-radius: 0 10px 10px 0;
  box-sizing: border-box;
  padding: 103px 64px 50px;
}

.login-warp .login-box .right .tit {
  font-weight: bold;
}

.login-warp .login-box .right .nav {
  margin-top: 30px;
  margin-left: 40px;
}

.login-warp .login-box .right .nav span {
  padding: 10px 20px;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  display: inline-block;
}

.login-warp .login-box .right .nav .active {
  border-color: #FFC326;
}

.login-warp .login-box .right .input-box {
  margin-top: 20px;
  position: relative;
}

.login-warp .login-box .right .input-box .inp-def {
  width: 100%;
  height: 54px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  padding: 0 20px 0 77px;
  box-sizing: border-box;
  outline: none;
  font-size: 16px;
}

.login-warp .login-box .right .input-box .inp-l {
  position: absolute;
  color: #aaa;
  top: 10px;
  left: 0;
  width: 60px;
  height: 35px;
  border-right: 1px solid #aaa;
  line-height: 35px;
  text-align: center;
}

.login-warp .login-box .right .input-box .icon-inp-l {
  position: absolute;
  top: 10px;
  left: 0;
  width: 60px;
  height: 35px;
  border-right: 1px solid #aaa;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAAAAXNSR0IArs4c6QAABC1JREFUSEvtV91rHFUUP+fe2exm06xCBVM12FpEymKq9EmlOhBInJ29k6JEi4of+GAf6xfig/+B+iZoC0YFP8hSzM6d3c2WCPtSU8EgCLGpSDFVtzZata5NMjuZe+SWbBmW3exu9LHzNnM+fnN/99zfORcBAGzbvoMxdi8A9On37TyMsd9WVlZOzc/Pr7WLR8uy9hqG8SQRVRHxSsMRETfaBYVhyBlj2GS/FRH/dl33OABQq1gUQjyKiDtc1/1wOytqxGQymSHDMI74vv9euVy+0A7sCQC4IqXMNztMTEwMA8At0e9BEEC9Xl+am5u7HP0+NjY2kEgkXg3D8KNCoXCuZzAhRBYA0tFARCQiKkgpF/9XsF5o/c8ruw6mGWjQWK/XP5idnf2x5wLZDo1Kqfc9zzt/HawTe8yyrD2c890AMMQYGwAATkR1RBxWSs319/fP53K5sDmRlqu2CtLkjI7jHCCig4h4AxFdIqILRFTTBx0RkwBwMxHpH1gjoq9qtdqpSqVyTWO7ArMsK24YxmOIuFsptRAEwelyufxHKwocxxlUSh0AgPsQ8TLn/JOZmZm/tG83YEwI8TQi7kTE6Xw+/1MnnrXdsqwU5/xxAEgi4nEp5WpHMNu272eMmQBwTEr5ezdADR/TNBOpVOoFpdR5z/M+7wgmhHiRiL71PO+LzSS6B/aVSiW/kTSdTvctLi7WoyCVSmVdvzuOM0JEh3zff2tLMM0/ALwcPahCiGeJ6DYAmPI87xchxCEAGAGAaSnlkhDiISIyEbEspTyt9zsWi72ulPp4SzDTNG9MpVJHow1RCPGKbrZElNNtRgjxvC75MAxPFgqFLzeb8d1E9LWU0gMAls1m32CMfdaJRu34GhHpRAualtHR0Z0DAwM3ua57tlEIhmEMJxKJJX229D4lk8k7l5eXz2pqM5nM7YZhPBcEwTudwGCzge6pVqvvLiwsBL0UiPa1bfsZznncdd1jHcE21fwIAFyMx+PTuVzuWiF0ANas2Iyxe4IgmCqVSj93BNMJ9TDDOX9KS5JSarZYLH6/FVA2m9WT1sNEtIuIThQKhTPdHuqreXVlhmFoI+JdjLFLAKD37CIArGo7EcUR8c8gCP4xDOOotoVhmC8Wi782fqyrlUVXMT4+visej+9XSu3dVBUWtSulzunqJKJvPM8rRm1dgZmmuSOVSg25rvtDNHhycpL7vp9cX19XnHMei8VeAoAaAAwS0VoikXgzqv5dgemDrEU4CILpUqn0Xav9ik5XjDE9xqer1aobrWDdNg4TUSClPNFu0x3HeZCI9gPAp+30saE2GxsbU8VicbnlWOA4zgNKqYMAcJKIrraCXh+lFHLORxBxX61We7uhi8150DRNY3Bw8BEi2tfistAL7moYhrJR5i1X1tQOYr1kj/q6rqtvQGqr+H8BtrWRJubBS2YAAAAASUVORK5CYII=) no-repeat;
  background-position: 20px 2px;
}

.login-warp .login-box .right .input-box .icon-inp-y {
  position: absolute;
  top: 10px;
  left: 0;
  width: 60px;
  height: 35px;
  border-right: 1px solid #aaa;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAAXNSR0IArs4c6QAAA9dJREFUSEudlk1oHVUUx//nzkuDRBd1YYuKFFy4MmncCYU2VgTFNgg6zj3zgik0QilYoxZRKE1RlFrrF4jSVF4kb848x4WkVhfSql2UgoiJFTeKIIJiRXShQTBv5pgb54X3nu9j4t1cmDnn/O49n5ewwZUkyaaVlZWnBwYGnvN9/++NqFNR4SRJrq3X6/sAPAPgKgB/AThSKpUqvu//VsROX1itVrstTdO9RDQF4HoAH6ZpesLzvMMA7gHwk6rOep53JgiCL3pBO8JEZBjAHQD25Luz8b6qvhaG4bmGwSiK7iSiR3I59/ljJ+d2Zr7cDl6HxXF8AsCwqo4A2JIL/qKqNSKqMfOlbqcWkdtVNSCiAMB1udwVIvoSwGVrrfMC1mBxHB9V1RkAiwCW3E5ES57nLfq+/2eReDiZJEmuTtN0VFW3AxgFsLYT0Yy19lgLjJn7xrAouCEnItoCi6JohoiOAtjKzFc2arCHe104flbVY2EYzqzdREQeBfAygJFOgf2/8DzRXNymmfmVNVgURduJaNEYsycIgrMbMR7H8W5VPWeMuSUIgm+adWu12r1ZlrksHg3DcGk9RiLyu6q+6q5bFFapVLYODg66LN0E4O52r+ThOcTMm9ezMXfle6vdwWPmvUVhIvKBK2xV9cMwfLddT0TOrHaZlJnva4FFUfSkK1BmvqEITEReAHCYiI5Ya5/tpCMiP+aN4Hj7zVzHOJ9l2XC5XP6qoTw/P7/L87xPAEwwczWP8SQRVVyJMjN3AlWr1VuNMa6L7GZm11n+LWq3FhYWrlleXv7OZSUzP9/4njfg83mBThtjLmZZ9hmArwHsYuZfu9zqKZeFQ0NDN4+Pj//RAsvj9jqAnaVSacT3/bRhJIqizcaYU6p6P4DvAWzLsmxHuVy+2AmUJIlXr9ddyl9g5oMNmZaO0eSySWZ+u0PATwJ4jIgOWGvf7FHMD60eaC5N07GJiYlPO8Ly27n4rDDzXZ2MuQM1G+jiwo8ADDDzWPP///RCEdkPYFZV94VhOFckM5tloihqJM8UM5/uCctvdwHATUQ0Zq11MSq04jjepqrOMz8w8852pY5dPoqiB4goIaI5a617ChRacRxXVHWyW5F3HSki8g4Av9Gx+9GaJkfCzA92ku85v0TkFICpfsAm0CwzP9ztYH2HpYi8COBxBySiN5rnnYhsUdUD+Sw8ycxP9PJAX5hTzk/uirNERKfdm8K9WVTVZa4hopfc2O/n6kIwZ6Rard5ojJkmooOqOui+qepbq2/I42EYftsP5P4XhjWMOSgR7TfGnLXWfl4E0pD5B/2grSu58hwVAAAAAElFTkSuQmCC) no-repeat;
  background-position: 20px 2px;
}

.login-warp .login-box .right .input-box .code {
  width: 289px;
}

.login-warp .login-box .right .input-box .randomCode-box {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-color: #ddd !important;
}

.login-warp .login-box .right .input-box .code-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 129px;
  height: 54px;
  background: #FFFFFF;
  border: 1px solid #4057EE;
  border-radius: 10px;
  box-sizing: border-box;
  color: #3E54EE;
  text-align: center;
  line-height: 52px;
}

.login-warp .login-box .right .input-box .countdown {
  color: #999;
  border: 1px solid #999;
}

.login-warp .login-box .right .login-btn {
  width: 100%;
  height: 54px;
  background: linear-gradient(90deg, #36BDFF, #5E76EF, #3E54EE);
  border-radius: 10px;
  color: #fff;
  text-align: center;
  line-height: 54px;
  margin-top: 40px;
  cursor: pointer;
}

.login-warp .login-box .right .tip {
  color: #de5555;
  text-align: center;
  margin-top: 20px;
}

.login-warp .login-box .right .take-box {
  margin-top: 20px;
}

.login-warp .login-box .right .take-box > a {
  color: #3E54EE;
}

.login-warp .login-box .right .text-center {
  text-align: center;
}

.login-warp .login-box .right .ewm-box {
  margin-top: 40px;
}

.login-warp .login-box .right .ewm-box .info {
  color: #aaa;
  text-align: center;
}

.login-warp .login-box .right .ewm-box .info span {
  color: #4d4d4d;
}

.login-warp .login-box .right .ewm-box .info .new-btn {
  padding-right: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAjZJREFUOE+Fk09o03AUx78vCZLR+o+JbOBNJlIRBRXxIObQHdImjXX0MMGDHryJJw+iCIKgiKfhfeJBhYorTdK0RaEwEMQh6M4TmQpOhkwsuDZ/nvxKO2JoWQ4hvPe+n/y+7/ceYfhDhUJhkpn3BkHw2/O87wB4WCnFg8Vicdz3/ZtEdAnA/ljuBzM/VRTlfqVS2YhrtgCWZZ2OoqgCYKJf0GHmdQDjRKT2Y1/DMMzXarXlAaQHME3zMDO/I6JdAD4BuKWqarNcLnc1TVNSqVROkqRHAKYArAVBcNLzvG+lUmlHD2AYxlsiOsPMr9vtttlqtTaTfrPZ7O6xsbFFAEeZeYWIRE/myDTNcwBaAP4Q0VS1Wl1LiguFws4oihriJ4McMy86jqORYRgPiegGgHnbtq+MuBVhcx+ABwAuM/PfMAyPeZ63Ik7wEsAMM19zHOfxKMAgbhiGsDrpuu4rEROAZwBmmfm64zhz2wGSeQG4A+AugOe2bV/cDmCaprBxgYjOin5RPp8/IUnSEjNvMvMR13U/j4Loup6RZfkjEUm+7x+s1+tfBnPQBDAN4EO3251uNBq/kpBcLjchy/IbABlmfuE4zmyvB+Kl6/oBWZbfE5GYwlVmvkdEC7ZtrwuhJEkzRHS7P6WrnU7nVLPZ/LkFEB+WZWXCMFwgokOxuw6ISImdZjmKovNxm/8tk6ZpajqdvtpfpuMAhDgAsATgiaqq82K8hy5T0rOY8yAI9iiKspEUxWv/AQV67Gw+E9WyAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right 4px;
}

.login-warp .login-box .right .ewm-box .ewm {
  width: 217px;
  height: 217px;
  background: #FDFDFF;
  border: 1px solid #3E54EE;
  border-radius: 10px;
  margin: 20px auto;
  box-sizing: border-box;
  overflow: hidden;
}

.login-warp .login-box .right .ewm-box .ewm img {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 1366px) {
  .login-warp .login-box .left {
    display: none;
  }
  .login-warp .login-box .right {
    border-left: 2px solid #fff;
  }
}

@media only screen and (max-width: 767px) {
  .login-warp .login-box .right {
    width: 350px;
    height: 480px;
    padding: 10px;
    border-left: 2px solid #fff;
  }
  .login-warp .login-box .right .input-box .code {
    width: 210px;
  }
  .login-warp .login-box .right .input-box .code-btn {
    width: 110px;
  }
}