@import url(base.css);
body {
  font-family: "Verdana", "Tahoma", "Lucida Grande", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: url('../img/login/loginbg.jpg') no-repeat center center;
  background-size: cover;
  min-height: 620px;
}
.login_msg{height:20px;}

.header{width: 100%; height: 90px;}
.header .container{display: flex; align-items: center; height: 100%;}
.header .logo{flex: 1; display: flex; align-items: center;}
.header .logo .logo-img{width: 65px; margin-right: 15px;}
.header .logo .name{font-size: 30px; font-weight: 800; color: rgba(255, 255, 255, 1);}
.header .language{padding: 5px 12px; border-radius: 10px; background-color: rgba(189, 173, 166, 0.11); color: rgba(189, 173, 166, 1); display: flex; align-items: center; justify-content: center;}
.header .language .tit{padding-right: 6px; font-size: 12px;}

.loginbox{display: flex; justify-content: space-between;align-items: center; height: calc(100vh - 190px); min-height: 500px;}
.loginbox .img-title{flex: 1; display: flex; align-items: center;}
.loginbox .form{width: 380px;height: 460px; padding: 40px; backdrop-filter: blur(4px); background:rgba(255,255,255,0.5); box-shadow:0px 0px 29px 2px rgba(56,109,173,0.3);border: 1px solid #FFFFFF; border-radius: 24px;}

.form-title{position: relative; font-size: 20px; padding-bottom: 60px;}
.form-title::after{content: ""; display: inline-block; width: 40px; height:4px; border-radius: 4px; background-color: var(--color-theme); position: absolute; left: 0; top: 40px;}
.form-group{border-radius: 10px; background: rgba(252, 242, 237, 1);border: 1px solid rgba(151, 151, 151, 0.1); box-shadow:inset -6px -6px 20px  rgba(255, 255, 255, 0.5),inset 6px 6px 8px  rgba(18, 46, 101, 0.08);}
.form-group .input-group-addon{background: none; border: none;}
.form-group .form-control{background: none; border: none; box-shadow: none; height: 40px;}

#slideImageWrap{ position: absolute;margin-top: 20px;}
#slideImageWrap .slideCanbox{ display: none; position: absolute; top: -150px; z-index: 999; background: #FFFFFF;}

.slideimage-wrap .slide-box{border: none; border-radius: 10px; background: rgba(252, 242, 237, 1); box-shadow:inset -6px -6px 20px  rgba(255, 255, 255, 0.5),inset 6px 6px 8px  rgba(18, 46, 101, 0.08);}
.slideimage-wrap .slide-tips{background: none;color: #bdada6;}
.slideimage-wrap .slide-progress{border: none;}
.slideimage-wrap .slide-active-box .slide-btn, .slideimage-wrap .slide-btn, .slideimage-wrap .slide-btn:hover{border-radius: 10px;
background: var(--color-theme) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAICAYAAAAiJnXPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABhSURBVChTY8AH/v//L/jv378+IM0MFSIMgBrYgRpA4ACQLQoVJgygmv4DNT0GYlMUQWIAUNNPIE4mR1MK2DZ8AKoepOEpEFtChfEDqIZjQCwFFSIMgIpnAfWxQblAwMAAABgErR4O5WqeAAAAAElFTkSuQmCC) no-repeat center center;
box-shadow:inset 2px 2px 4px  rgba(0, 0, 0, 0.33),inset -4px -3px 40px  rgba(255, 255, 255, 0.09), -8px -8px 20px  rgba(255, 255, 255, 0.6), 8px 2px 32px  rgba(0, 0, 0, 0.15);}

.retrieve{position: relative; padding-top: 100px; text-align: center;}
.retrieve a{color: #FFFFFF;text-decoration: underline; }
.copyright{position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px;text-align: center;font-size:13px; color: #bbb;background: #FFFFFF;  margin: 0;}

@media (max-width: 1023px) {
  .loginbox .img-title{display: none;}
}