body {
  background-color: #f8f8f9;
}

@media (min-width: 768px) {
  body {
    overflow-y: hidden;
  }
}

main {
  width: 100%;
  min-height: 100vh;
}

/* ============== common ============== */
.pic {
  text-align: center;
  position: relative;
}

.pic img {
  max-width: 100%;
  height: auto;
  margin: auto;
  position: relative;
}

.pic.auto {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.login-close {
  top: -21px;
  right: -21px;
  z-index: 9;
}

@media (max-width: 767px) {
  .login-close {
    top: -20px;
    right: -10px;
  }
}

.fb-btn {
  color: #f7f7f7 !important;
  background-color: #3e599b;
}

.fb-btn .icon {
  margin-left: 0;
  margin-right: 4px;
}

.fb-btn:after {
  background-color: #262626;
}

/* ===== mian-section ===== */
.mian-section {
  background-color: #fff;
  display: block;
  -webkit-box-shadow: 0 20px 30px -13px rgba(87, 87, 87, 0.5);
  box-shadow: 0 20px 30px -13px rgba(87, 87, 87, 0.5);
  z-index: 2;
}

@media (min-width: 768px) {
  .mian-section {
    width: 650px;
    height: 450px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
  }
}

@media (max-width: 767px) {
  .mian-section {
    width: 90%;
    height: auto;
    margin-top: 45px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ======= login-aside ======= */
.login-aside {
  background-color: #262626;
  position: relative;
  float: left;
}

.login-aside .login-backTo {
  font-size: 16px;
  color: #fff;
}

@media (min-width: 768px) {
  .login-aside {
    width: 315px;
    height: 100%;
  }
  .login-aside .login-padding {
    width: 80px;
    height: 100%;
    float: left;
    position: relative;
  }
  .login-aside .login-icon {
    width: 48px;
    height: 48px;
    display: block;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  .login-aside .login-backTo {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 25px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .login-aside .login-pic {
    width: calc(100% -  80px);
    float: right;
    right: -2px;
  }
}

@media (max-width: 767px) {
  .login-aside {
    width: 100%;
    height: auto;
    float: none;
    overflow: hidden;
  }
  .login-aside .login-padding {
    width: 100%;
    height: 60px;
  }
  .login-aside .login-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    top: 10px;
    margin-left: 20px;
    position: relative;
  }
  .login-aside .login-backTo {
    position: relative;
    margin-left: 10px;
    top: 14px;
    left: 10px;
  }
  .login-aside .login-pic {
    width: 100%;
  }
}

/* ======= form ======= */
.login-content {
  width: calc(100% - 320px);
  padding: 65px 25px 60px 25px;
  float: right;
}

@media (min-width: 768px) and (max-width: 991px) {
  .login-content {
    padding: 35px 25px !important;
  }
}

@media (max-width: 767px) {
  .login-content {
    width: 100%;
    padding: 20px;
  }
}

.login-form-title {
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 0;
  margin-bottom: 45px;
}

.login-form-title span {
  display: block;
}

.login-form-title .tw {
  font-size: 15px;
  font-weight: bold;
  color: #1b1b1b;
  letter-spacing: 2px;
}

.login-form-title .en {
  font-size: 13px;
  color: #c9c9c9;
  text-transform: uppercase;
  margin-top: 5px;
}

@media (max-width: 767px) {
  .login-form-title {
    margin-bottom: 25px;
  }
}

/* ============== login.php ============== */
.login-section .c-btn-group {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .login-section .c-btn-group {
    margin-top: 35px;
  }
}

.c-btn-group a {
  height: 40px;
  line-height: 40px;
}

@media (max-width: 767px) {
  .c-btn-group a {
    width: 100%;
    padding: 12px 15px 11px 15px;
    margin-bottom: 8px;
  }
}

.login-linkGroup a {
  font-size: 12px;
  color: #9c9c9c;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.login-linkGroup a + a:before {
  content: "";
  width: 1px;
  height: 10px;
  position: relative;
  display: inline-block;
  top: 0;
  background-color: #cfcfcf;
  margin-left: 10px;
  margin-right: 10px;
}

.login-linkGroup a:hover, .login-linkGroup a:focus {
  color: #9c9c9c;
  text-decoration: underline !important;
}

/* ======= register.php ======= */
.register-body {
  overflow: auto !important;
}

.register-section {
  position: relative;
}

.register-section .login-content {
  padding-top: 40px;
}

.register-section .login-form-title {
  margin-bottom: 25px;
}

.register-section .re-ver {
  position: relative;
  right: auto;
  margin-left: 5px;
  margin-top: 22px;
}

.register-section .c-btn-group {
  margin-top: 25px;
}

@media (min-width: 768px) {
  .register-section {
    height: 805px;
    margin-top: 80px;
    margin-bottom: 60px;
  }
}

/* ======= forget-success.php  ======= */
.forget-section .foret-intro {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #9c9c9c;
}

.forget-section .c-btn-group {
  margin-top: 70px;
}

@media (min-width: 768px) {
  .forget-section .login-content {
    padding: 45px 25px 0 25px;
  }
}

@media (max-width: 767px) {
  .forget-section .c-btn-group {
    margin-top: 35px;
  }
}
