*{ box-sizing: border-box; font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif;}
body {background:url(../img/body-bg.jpg) center;font-weight: 300;background-attachment: fixed;padding: 0;margin: 0;background-size: cover;}
html {font-size:16px;}
h1, h2, h3, h4, h5, h6 {
 font-family: 'Noto Sans TC','Microsoft JhengHei',Arial,sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.responsive-img{width: 100%;}


.content{background: url('../img/bg.jpg');width: 100%;height: 100vh;position: relative;display: flex;align-items: center;justify-content: center;padding: 15px;}

.content .card{width: 800px;background-color: rgba(255, 255, 255, 0.35);border-radius: 5px;text-align: center;padding:30px 20px;position: relative;box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.4);z-index: 99;  -webkit-backdrop-filter: blur(15px);backdrop-filter: blur(15px);  display: flex;justify-content: space-around;align-items: center;}
.content .card::before{content:"";position: absolute;width: 200px;height:200px;background: url('../img/icon.svg') no-repeat;background-size: contain; right: -18%;top:-15%;z-index: 99;}
.content .card .form-main h1{font-weight: 500;letter-spacing: 1px;margin: 0 ;padding: 0;}
a#forget_link{text-decoration: none;color:rgba(160, 241, 255, 0.8);transition: all .3s ease-in;text-decoration: underline;cursor: pointer;}
a#forget_link:hover{color:#fff;}


.content .cir-1{width:20%; position: absolute;z-index: 1;transform: translate(-50%,-50%);left:15%;top:50%;}
.content .cir-2{width:12%; position: absolute;z-index: 1;transform: translate(-50%,-50%);right:15%;top:40%;}
.content .cir-3{width:8%; position: absolute;z-index: 1;transform: translate(-50%,-50%);left:15%;top:10%;}
.content .card .photo{width:48%;}
.content .card form{width:45%;}
.content .card form h1{color: #fff;}
@keyframes top-lower {
  0%{
    transform: translateY(0px);
  }
  
  100%{
    transform: translateY(10px);
  }
}
.animation-top-lower-2{animation:top-lower-2 2s linear infinite alternate-reverse;}
@keyframes top-lower-2 {
  0%{
    transform: translateY(10px);    
  }
  
  100%{
    transform: translateY(0px);
  }
}

.content .card input{line-height: 35px;display: block;padding-left: 10px ;border-radius: 0 5px 5px 0;border: none;background-color: rgba(255, 255, 255, 0.5);border: 1px solid rgba(255, 255, 255, 0.2);    width: 88%;}
.content .card input:focus,.content .card input:active{outline: none;border: none;}
.content .card p {font-size: .9rem;color: #fff;}
.content button{line-height: 2.4rem;margin: 0;padding: 0 20px;outline: none;border:none;color: #fff;border-radius: 5px;cursor: pointer;transition: all .3s ease-in;font-size: 1rem;}
.content button#login-btn {width: 100%;background-color: #4122b0;}
.content button#login-btn:hover {width: 100%;background-color: #5f3fd2;}


.content .card #form-forget{border-top:1px ridge rgba(255, 255, 255, 0.5) ;display: none;position: relative;color: #fff;}
.content .card #form-forget h3{font-weight: 400;letter-spacing: 1px;}
.content .card #form-forget .flex-btn{display: flex;justify-content: space-between;}
.content .card #form-forget .flex-btn button#confirm-btn{width: 48%;background-color: #4f2dc7;}
.content .card #form-forget .flex-btn button#confirm-btn:hover{width: 48%;background-color: #5f3fd2;}
.content .card #form-forget .flex-btn button#cancel-btn{width: 48%;border: 1px solid #4122b0;background-color: transparent;color: #4122b0;display: block;}
.content .card #form-forget .flex-btn button#cancel-btn:hover{width: 48%;background-color: #4f2dc7;color:#fff;}

/* form icon */
.content .card .input-content{position: relative;display: flex;margin: 15px 0;}
.content .card .input-content .icon{width: 12%;height: 40px;background-color: #4122b0;border-radius: 5px 0 0 5px;}
.content .card .input-content .icon i{color: #fff;font-size: .9rem;line-height: 40px;}
.animation-top-lower{animation:top-lower 2s linear infinite alternate-reverse;}

@media (max-width: 767px) {

  .content .cir-1{width:30%; position: absolute;z-index: 1;transform: translate(-50%,-50%);left:0%;top:80%;}
  .content .cir-2{width:20%; position: absolute;z-index: 1;transform: translate(-50%,-50%);right:0%;top:40%;}
  .content .cir-3{width:15%; position: absolute;z-index: 1;transform: translate(-50%,-50%);left:15%;top:10%;}
  
  .content .card{width:80%;display: block;}
  .content .card form { width: 100%;}
  .content .card .photo { width: 60%;margin: 0 auto; }
  .content .card::before{width: 150px;height:150px;right: 0%;top:-15%;}
}

 @media (max-width: 576px) {
  .content .card{width: 100%;}
  .content .card::before{width: 140px;height:120px;right: 0%;top:-15%;}
}