#userLayout.user-layout-wrapper .container .main{min-height: 326px;border-radius: 8px;}

#app #userLayout.user-layout-wrapper .container .logo{ padding: 0;}
#app #userLayout.user-layout-wrapper .container .back-left{ padding-left: 80px;}
#app #userLayout.user-layout-wrapper .container .back-content{text-align: left;}
#app #userLayout.user-layout-wrapper .container{
    background: url(../images/login/login-bg.jpg) no-repeat center top;
    background-size: cover;
}

#app #userLayout.user-layout-wrapper .container .main {
    background: #fff; padding: 32px 40px 40px; position: relative; overflow: hidden;
}
#app #userLayout.user-layout-wrapper .container hr{ display: none; }
#app #userLayout.user-layout-wrapper .container .login-title{ margin-top: 0; margin-bottom: 32px}
#app #userLayout.user-layout-wrapper .container .login-title h1{ text-align: left; font-size: 20px; color: #222;}
#app #userLayout.user-layout-wrapper .container .user-code-btn{
    width: 50px; height: 50px; background: url(../images/login/icon-qrcode.png) no-repeat center top; background-size: cover;
    transition: all 0.3s; position: absolute; right: 0; top: 0; cursor: pointer;
}
#app #userLayout.user-layout-wrapper .container .user-code-btn:hover{
    background: url(../images/login/icon-qrcode-hover.png) no-repeat center top; background-size: cover;
}
#app #userLayout.user-layout-wrapper .container .user-code-btn.on{
    background: url(../images/login/icon-pc.png) no-repeat center top; background-size: cover;
}
#app #userLayout.user-layout-wrapper .container .user-code-btn.on:hover{
    background: url(../images/login/icon-pc-hover.png) no-repeat center top; background-size: cover;
}
#app #userLayout.user-layout-wrapper .container .user-code-btn.on:hover .tip{ display: none;}
#app #userLayout.user-layout-wrapper .container .user-code-btn:hover .tip{ display: inline-block}
#app #userLayout.user-layout-wrapper .container .user-code-btn .tip{
   background: #0066FC;border-radius: 3px;position: absolute;font-size: 12px;display: none;top: 15px;left: -50px;color: #FFF;padding: 1px 5px;
   transition: all 0.3s;
}
#app #userLayout.user-layout-wrapper .container .user-code-btn .tip:after {
    content: '';display: inline-block;width: 0;height: 0;border-top: 4px solid transparent;border-left: 6px solid #0066fc;border-bottom: 4px solid transparent;position: absolute;top: 50%;transform: translateY(-50%);right: -5px;
}

#app #userLayout.user-layout-wrapper .login-qrcode-result{ display: none; text-align: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: #FFF;z-index: 2;}
#app #userLayout.user-layout-wrapper .login-qrcode-result .login-qrcode-result-content{ display: flex; flex-direction: column;background: #FFF;height: 80%;justify-content: center; align-items: center;}
#app #userLayout.user-layout-wrapper .login-qrcode-result .login-qrcode-result-content strong{ color: #116CFF; font-size: 20px; margin-bottom: 12px; margin-top: 24px;}
#app #userLayout.user-layout-wrapper .login-qrcode-result .login-qrcode-result-content img{ width: 80px;}
#app #userLayout.user-layout-wrapper .cancel-login-btn{ font-size: 16px; outline: none; color: #9EA1A7;border: none;background: none; line-height: 60px; position: absolute;bottom: 10px; transform: translateX(-50%); cursor: pointer;}

#app #userLayout.user-layout-wrapper .main .login-qrcode-wrapper{display: none; position: relative;}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .login-qrcode{ text-align: center; position: relative;}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .login-qrcode img{ width: 160px; margin: 0 auto;}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper  .login-title{text-align: center;}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper  .login-title h1{text-align: center;}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper  .login-title p{color: #999;}

#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .login-title{ margin-bottom: 52px}

/*旋转动画*/
@keyframes Rotate {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

#app #userLayout.user-layout-wrapper .container .ant-input-group-addon {border: none;text-align: right;}
#app #userLayout.user-layout-wrapper .container .ant-col-16{display: flex;align-items: center;height: calc(100% - 100px);}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .mask{ width: 160px;height: 160px;position: absolute; z-index: 1; background: rgba(0,0,0, 0.4); left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: none;
}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .refresh-btn .icon-refresh{
    width: 32px; height: 32px; background: url(../images/login/icon-refresh.png) no-repeat center top; background-size: cover;
}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .refresh-btn{
    margin: 0 auto; border: none; outline: none;display: flex;flex-direction: column;align-items: center; background: none; cursor: pointer;
}
#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .refresh-btn.on{
    transform: translate(-50%, -50%) rotate(360deg);
}

#app #userLayout.user-layout-wrapper .container .login-qrcode-wrapper .refresh-wrapper{
    display: flex; justify-content: center; align-content: center; color: #FFF; font-size: 14px;
    flex-direction: column; height: 100%;
}
#userLayout.user-layout-wrapper .container .back-content h1{display: none;}
#app #userLayout.user-layout-wrapper .login-qrcode-message{ text-align: center; margin-top: 5px;}

#app #userLayout .left-fs {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-device-width: 500px) {
    #app #userLayout.user-layout-wrapper .container .login-title{ border-bottom: 1px solid #999; }
    #app #userLayout.user-layout-wrapper .container .login-title h1{text-align: center;}
    #app #userLayout.user-layout-wrapper .container .main{ padding: 0; width: calc(100% - 40px);}
    #app #userLayout.user-layout-wrapper .container .ant-col-16{ width: 100%;}
    #app #userLayout.user-layout-wrapper .user-code-btn{ display: none;}
}

#lark-switch-ldp-pro {
    text-align: center;
    cursor: pointer;
}

#lark-switch-ldp-test {
    text-align: center;
    cursor: pointer;
}