@charset "utf-8";
.login{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: url(/images/login/login.jpg) center no-repeat; background-size: cover; }
header{padding: .2rem 3%;background: rgba(255,255,255,.4); position: absolute; top: 0; right: 0; left: 0;}
header img{ height: .38rem}
.login .content{position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: .8rem 0 0;}
.login .content .wps{align-items: center;justify-content: center;height: 100%;width: 12.3rem;margin: 0 auto;max-width: 94%;}
.login .content .left{width: 6.63rem;max-width: calc(100% - 6vw - 4.66rem);}
.login .content .left .box{width: 3.34rem;max-width: 100%;}
.login .content .left .box p{font-size: .17rem;color: #fff;letter-spacing: .01rem;line-height: .24rem;margin-top: .24rem;}
.login .content .right{ width: 4.66rem; height: 4.24rem; background: #fff; border-radius: .5rem; margin-left: 6vw; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 0 .38rem;}
.login .content .right .h3{ font-size: .24rem; line-height: 1.35; margin-bottom: .36rem;}

.lt1 li{ margin-bottom: .38rem;}
.lt1 li:last-child{ margin-bottom: 0;}
.lt1 .a{ display: flex; position: relative; z-index: 1; height: .78rem; background: #d2e2fe; justify-content: center; align-items: center; border-radius: 50vw; flex-direction: column;}
.lt1 .a::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(180deg, #4760ff, #1cccff); border-radius: 50vw; z-index: -1; transition: .5s; opacity: 0;}
.lt1 .a::after{ content: ""; position: absolute; top: .02rem; right: .02rem; bottom: .02rem; left: .02rem; background: #d2e2fe; border-radius: 50vw; z-index: -1;}
.lt1 h3{ font-size: .28rem; color: #0650ad;}
.lt1 h6{ font-size: .14rem; color: #5e5e5e; line-height: 1.35; margin: .04rem 0 0;}

@media(min-width: 1024px){
    .lt1 .a:hover::before{ opacity: 1;}
}
@media(max-width: 1024px){
    .login .content .wps{overflow: hidden;overflow-y: scroll;flex-direction: column;}
}
@media(max-width: 800px){
    header{padding: .1rem 3%;}
    .login .content .left{width: 100%;max-width: 100%;}
    .login .content .left img{ max-width: 62%}
    .login .content .right{width: 100%;margin: .3rem 0 0;height: auto;padding: .3rem;}
    .login .content .left .box{ width: 100%}
    .login .content .right .h3{ margin-bottom: .2rem}
    .lt1 h3{ font-size: .24rem}
    .lt1 li{ margin-bottom: .2rem;}
    .lt1 li:last-child{ margin-bottom: 0;}
    .lt1 .a{ height: .66rem}
    .lt1 .a::before{ opacity: 1;}
    .login .content .left .box p{ margin-top: .16rem;}
} 
@media(max-width: 560px){
}