body {
    margin: 0;
    min-height: 100vh;
    background-image: url('home_jpg/home_background.jpg');
    background-attachment: fixed;
    background-size: cover;
}

.titlecard {
    position: sticky;
    z-index: 5;
    top: 0;
    width: 97%;
    margin: 30px auto;
    padding: 15px 5px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    position: relative;
}
.titlecard:hover {
    transform: translateY(1px);
}

.titlecard h2 {
    margin: 0;
    text-align: center;
    color: #fdfdfd;
}

.sign_in {
    position: absolute;
    top: 15px;
    right: 50px;
    z-index: 50;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    
    color: #fdfdfd;
    cursor: pointer;
}
.sign_in:hover {
    transform: translateY(1px);
}
.tleftcard {
    position: relative;
    z-index: 1;
    width: 50%;
    margin: 30px auto;
    padding: 5px 5px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.tmidcard {
    margin-left:50%;
    margin-right:50%;
    position: relative;
    z-index: 1;
    width: 50%;
    margin: 30px auto;
    padding: 20px 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-align: center;
}
/* loading */
.loading  {
    margin-left:50% ;
    margin-right:50% ;
    position: relative;
    width: 50px;
    perspective: 200px;
}
 .loading:before,.loading:after  {
     position: absolute;
     width: 20px;
     height: 20px;
     content: "";
     animation: loading 0.5s infinite alternate;
     background: rgba(255, 255, 255, 0);
}
 .loading:before  {
     left: 0;
}
 .loading:after  {
     right: 0;
     animation-delay: 0.15s;
}
 @keyframes loading  {
     0%  {
     transform: scale(1) translateY(0) rotateX(0);
     box-shadow: 0 0 #0000;
}
 to  {
     transform: scale(1.2) translateY(-25px) rotateX(45deg);
     background: #ffffff;
     box-shadow: 0 25px 40px #ffffff;
}
}
.noline {
    text-decoration: none;
    color: #fdfdfd;
}
.box {
    text-align: center;
    width: 200px;
    /* 外盒子相对定位，便于伪元素绝对定位(使下划线在文字的最底下) */
    position: relative;
}

.low::before {
    content: '';
    height: 4px;
    background: rgb(0, 255, 213);
    /* 伪元素默认样式 display: inline;所以需要转成inline-block宽高才会生效 */
    display: inline-block;
    /* 通过定位使下划线在最低层 */
    position: absolute;
    bottom: -6px;
    width: 0;
    /* 加上一个过渡效果，使之丝滑一些 */
    transition: width 0.36s;
}
.low:hover::before {
    /* 悬浮时候，让下划线伪元素宽度变成100%即可出现效果 */
    width: 100%;
}