@charset "UTF-8";

#myBG{
	 background-repeat: no-repeat;
	 background-size: cover;
	 z-index: 1;
	 background-position: center 0%;
	 background-attachment: fixed;
	}
	.btn-login{display: block; width: 100%; border-radius: 60px !important; height: 55px !important; font-size: 20px !important; font-weight: 500 !important; }
	.icon-login{font-size: 38px !important; padding-left: 26px; vertical-align: middle;padding-bottom: 5px;}

.login{/*background-color: #00533f;*/

background: #edfcfb; /* Old browsers */
background: -moz-linear-gradient(left,  #edfcfb 0%, #adf1e7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #edfcfb 0%,#adf1e7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #edfcfb 0%,#adf1e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edfcfb', endColorstr='#adf1e7',GradientType=1 ); /* IE6-9 */
  position: relative;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-family: "Noto Sans TC", 'Barlow', sans-serif;

}


.user-login {
  min-height: 100vh; }
  .user-login .bs-reset {
    margin: 0;
    padding: 0; }
  .user-login .text-right {
    text-align: right; }
  .user-login .login-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh; }
  .user-login .login-logo {
    position: absolute;
    top: 2.5em;
    left: 2.5em; }
    .user-login .login-logo.login-6 {
      top: 80px;
      left: 80px; }
  .user-login .login-container {
    position: relative; 
    min-height: 100vh;  }


    .user-login .login-container > .login-content,
    .user-login .login-container .login-social,
    .user-login .login-container .login-copyright {
      padding: 0 80px;  }
    .user-login .login-container > .login-content {text-align: center;  background-color:rgba(0,0,0,0.30); max-height: 566px; max-width: 489px;  border-radius: 10px; padding-top: 50px; padding-bottom: 60px; margin: auto; margin-top: 5%;}

      .user-login .login-container > .login-content > h1 {

        font-size: 40px;
        font-weight: 600;
        color: #fff;}
      .user-login .login-container > .login-content p {
        color: #fff;
        font-size: 20px;
        line-height: 22px; }



      .user-login .login-container > .login-content > .login-form {
        margin-top: 30px;
        color: #56d699;
        font-size: 16px;  }
        .user-login .login-container > .login-content > .login-form .form-control {
		  height: 55px;
			line-height: 55px;
	      width: 100%;
		  padding-top: 10px; padding-left: 65px;
          color: #000;
          background-color: #FFF;		
          margin-bottom: 25px;
          border-radius: 10px ;
		 -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.3) !important;   
		 -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.3) !important;  
          box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.3) !important;  
			
}

.user-login .login-container > .login-content > .login-form .form-control-account{
	        background-image: url("../svg/icon_form_login_member.svg");
			background-repeat: no-repeat;
			background-position: 15px 10px;
			background-size: 40px;
	        line-height: 55px;         
}
   
.user-login .login-container > .login-content > .login-form .form-control-key{
	        background-image: url("../svg/icon_form_login_key.svg");
			background-repeat: no-repeat;
			background-position: 15px 10px;
			background-size: 40px;
            line-height: 55px;
}
            


          .user-login .login-container > .login-content > .login-form .form-control:focus {
            outline: 10; }
        .user-login .login-container > .login-content > .login-form .forgot-password,
        .user-login .login-container > .login-content > .login-form .login-button {
          display: inline-block; }
        .user-login .login-container > .login-content > .login-form .rem-password {
          margin-top: 10px; }
          .user-login .login-container > .login-content > .login-form .rem-password > p {
            margin: 0; }
          .user-login .login-container > .login-content > .login-form .rem-password > .rem-checkbox {
            border-color: #a4aab2; }
        .user-login .login-container > .login-content > .login-form .forgot-password {
          margin-right: 1em; }
          .user-login .login-container > .login-content > .login-form .forgot-password > a {
            color: #a4aab2; }
            .user-login .login-container > .login-content > .login-form .forgot-password > a:hover {
              color: #337ab7;
              text-decoration: none; }
            .user-login .login-container > .login-content > .login-form .forgot-password > a:focus {
              color: #a4aab2;
              text-decoration: none; }
    .user-login .login-container > .login-footer {position:absolute; 
		 margin: auto;  font-size: 15px; text-align: center;  color: #fff; text-shadow: black 0.1em 0.1em 0.2em; bottom: 10px; width: 100%;

}
 
      .user-login .login-container > .login-footer .login-copyright {
        padding-left: 0;
        margin-top: 6px; }
        .user-login .login-container > .login-footer .login-copyright > p {
          margin: 0;
          font-size: 13px;
          color: #f0f2f2; }
  .user-login .alert {
    margin-top: -60px; }
  .user-login .form-group.has-error {
    border-bottom: 2px solid #ed6b75 !important; }
  .user-login .form-group.valid {
    border-bottom: 1px solid #a0a9b4 !important; }

@media (max-width: 1365px) {
  .user-login .login-logo.login-6 {
    top: 40px;
    left: 40px; }
  .user-login .login-container > .login-content,
  .user-login .login-container .login-social,
  .user-login .login-container .login-copyright {
    padding: 50px 40px; }
  .user-login .login-container .login-social {
    padding-right: 0; }
  .user-login .login-container .login-copyright {
    padding-left: 0; } }

@media (max-width: 1023px) {
  .user-login {
    min-height: 50vh; }
    .user-login .mt-login-bsfix {
      width: 100%; }
    .user-login .login-bg {
      min-height: 50vh; }
    .user-login .login-logo.login-6 {
      position: relative;
      margin: 0 0 40px 0; }
    .user-login .login-container {
      min-height: 50vh; }
      .user-login .login-container > .login-content {
        margin-top: 60px; }
        .user-login .login-container > .login-content .login-form {
          margin-top: 40px; }
      .user-login .login-container .rem-password {
        margin-bottom: 1em; }
      .user-login .login-container > .login-footer {
        position: relative;
        margin-top: 40px;
        padding-bottom: 0; }
    }

@media (max-width: 640px) {
  .user-login .login-container > .login-content .text-right {
    text-align: left; } 
.login-content{
      width: 395px; margin-left: -20px; padding: 0px; }
	
	.user-login .login-logo {
    position: absolute;
    top: 18em;
    left: 2em; }
	.user-login .login-container > .login-content > h1 {
	  font-size: 24px;margin-top: -40px;
       }
	.user-login .login-container > .login-footer {
      bottom: 10px;
      width: 100%;
      padding-bottom: 0px; }
}