html {
  background-color: #4D226D;
  font-family: Microsoft JhengHei;
  background: -webkit-linear-gradient(45deg, #1D6895, #091F35, #4D226D, #33B1FF) no-repeat;
  background: -o-linear-gradient(45deg, #1D6895, #091F35, #4D226D, #33B1FF) no-repeat;
  background: linear-gradient(45deg, #1D6895, #091F35, #4D226D, #33B1FF) no-repeat;
  height: 100vh;
  overflow-y: hidden;
  min-width: 600px; }

.BG {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 600px;
  height: 100vh;
  background: url(../img/loginBG.png) no-repeat;
  background-size: 100%;
  background-position: top center; }

.login {
  height: 800px;
  top: 0;
  position: relative;
  width: 40%;
  min-width: 600px;
  max-width: 800px;
  height: 100vh;
  background: url(../img/interface.png) no-repeat;
  background-size: 100%;
  z-index: 999;
  margin: 3% auto 0 auto; }
  .login .loginButton {
    top: 0;
    right: 0;
    position: absolute;
    width: 39%;
    padding-bottom: 39%;
    background: url(../img/loginButton.png) no-repeat;
    background-size: 100%;
    margin: 21% 17% 0 0;
    cursor: pointer;
    z-index: 1; }
    .login .loginButton:hover {
      background-position-y: 100%; }
    .login .loginButton.login_a, .login .loginButton.login_m {
      background: url(../img/loginButton-2.png) no-repeat;
      background-size: 100%; }
      .login .loginButton.login_a:hover, .login .loginButton.login_m:hover {
        background-position-y: 100%; }
    .login .loginButton.login_c {
      background: url(../img/loginButton-3.png) no-repeat;
      background-size: 100%; }
      .login .loginButton.login_c:hover {
        background-position-y: 100%; }
  .login .otherButton_left {
    top: 0;
    left: 0;
    position: absolute;
    background: url(../img/otherButton1.png) no-repeat;
    background-size: 100%;
    width: 35%;
    padding-bottom: 8.4%;
    margin: 55% 0 0 14%;
    cursor: pointer;
    z-index: 2; }
    .login .otherButton_left:hover {
      background-position-y: 100%; }
  .login .otherButton_right {
    top: 0;
    right: 0;
    position: absolute;
    background: url(../img/otherButton2.png) no-repeat;
    background-size: 100%;
    width: 35%;
    padding-bottom: 8.4%;
    margin: 55% 14% 0 0;
    cursor: pointer;
    z-index: 2; }
    .login .otherButton_right:hover {
      background-position-y: 100%; }
  .login .btnNew, .login .btnOld {
    top: 0;
    left: 0;
    position: absolute;
    width: 20%;
    margin: 65% 0 0 29%;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, #4D226D), to(#33B1FF));
    background: -webkit-linear-gradient(bottom, #4D226D 30%, #33B1FF);
    background: -o-linear-gradient(bottom, #4D226D 30%, #33B1FF);
    background: linear-gradient(to top, #4D226D 30%, #33B1FF);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.5% 0;
    border: 1px solid #33B1FF;
    color: #fff;
    font-size: 18px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 2; }
    .login .btnNew.btnOld, .login .btnOld.btnOld {
      left: unset;
      right: 0;
      margin: 65% 29% 0 0; }
    .login .btnNew:hover, .login .btnOld:hover {
      background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, #ff3d00), to(#FF9800));
      background: -webkit-linear-gradient(bottom, #ff3d00 30%, #FF9800);
      background: -o-linear-gradient(bottom, #ff3d00 30%, #FF9800);
      background: linear-gradient(to top, #ff3d00 30%, #FF9800);
      border: 1px solid #FF9800; }
    .login .btnNew.active, .login .btnOld.active {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #b70000), to(#ff0000));
      background: -webkit-linear-gradient(top, #b70000 15%, #ff0000);
      background: -o-linear-gradient(top, #b70000 15%, #ff0000);
      background: linear-gradient(to bottom, #b70000 15%, #ff0000);
      border: 1px solid #760000; }
  .login .input_area {
    width: 32%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 39%;
    margin-left: 18%;
    z-index: 2; }
    .login .input_area li {
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .login .input_area li:nth-child(1) {
        margin-bottom: 5%; }
      .login .input_area li span {
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        font-style: italic;
        font-size: 16px;
        width: 25%; }
      .login .input_area li input {
        display: inline-block;
        vertical-align: middle;
        width: 75%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 2% 3%;
        color: purple;
        font-size: 16px; }

@media screen and (max-width: 414px) {
  html {
    min-width: 320px; }
  .BG {
    min-width: 320px;
    background-size: 200%;
    margin-top: 15%; }
  .login {
    min-width: 320px;
    width: 100%;
    margin: 15% auto 0 auto; }
    .login .input_area {
      margin-top: 37%;
      margin-left: 17%; }
      .login .input_area li span {
        width: 30%;
        font-size: 14px; }
      .login .input_area li input {
        width: 70%; }
    .login .btnNew {
      font-size: 16px; }
    .login .btnOld {
      font-size: 16px; } }