.login form {
	overflow: initial;
}
/* for sign in */
#qqworld-operating-officer-container {
	padding: 0 0 20px;
}
#qqworld-operating-officer-container .third-party-login-label {
	margin-bottom: 5px;
}
#qqworld-operating-officer-container .login-list {
	position: relative;
}
#qqworld-operating-officer-container .loginbtn {
	display: inline-block;
	padding: 5px;
	background: #f7f7f7;
	border: 1px solid #d4d4d4;
	border-radius: 3px;
	width: 32px;
	height: 32px;
	position: relative;
	box-sizing: initial;
	left: 0;
	top: 0;
	transition: background .3s;
	vertical-align: middle;
}
#qqworld-operating-officer-container .hidden {
	display: none;
}
#qqworld-operating-officer-container .loginbtn:hover {
	background: #fff;
}
#qqworld-operating-officer-container img {
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
}

/* for sign up*/
.qqworld-operating-officer-third-party-logged {
	padding: 10px 0;
}
	.qqworld-operating-officer-third-party-logged:after {
		content: '';
		display: block;
		clear: both;
	}
	.qqworld-operating-officer-third-party-logged figure.avatar {
		margin: 0 15px 0 0;
		padding: 0;
		float: left;
		width: 48px;
		height: 48px;
		border: 3px solid #f7f7f7;
		border-radius: 50%;
		overflow: hidden;
		box-sizing: content-box;
	}
	.qqworld-operating-officer-third-party-logged figure.avatar img {
		width: 100%;
		height: auto;
		border-radius: 50%;
		box-shadow: 1px 1px 3px rgba(0,0,0,.15);
	}
	.qqworld-operating-officer-third-party-logged hgroup {
		display: inline-block;
	}
	.qqworld-operating-officer-third-party-logged h4 {
		font-size: 20px;
		margin: 0 0 5px;
		font-weight: normal;
		line-height: 1.5;
	}
	.qqworld-operating-officer-third-party-logged h6 {
		font-weight: normal;
		line-height: 1.5;
		margin: 0;
	}

/* for sign in login form */
#qqworld-operating-officer-floating-box {
	position: fixed;
	background: rgba(255,255,255,.75);
	width: 100%;
	height: 100%;
	z-index: 9999999;
	left: 0;
	top: 0;
}
#qqworld-operating-officer-floating-box-block {
	position: absolute;
	width: 300px;
	max-width: 90%;
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
#qqworld-operating-officer-floating-box-content {
	background: rgba(255,255,255,.75);
}
#qqworld-operating-officer-floating-box-desc {
	font-size: 14px;
	background: #333;
	color: #fff;
	padding: 5px 30px;
	display: inline-block;
	border-radius: 50px;
}

/* for mobile login */
.mobile.loginbtn {
	position: static !important;
}
.mobile-sms-login-form {
  width: 300px;
  position: absolute;
  top: calc(100% - 180px); /* 表单顶部 = 视口底部 - 50px（可调整50px控制距离） */
  left: 50%;
  transform: scale(0) translateX(-50%);
	transform-origin: left top;
	background: #fff url(../images/banners/sms.jpg) no-repeat top left;
	background-size: 100%;
	padding: 20px;
	z-index: 10;
	box-shadow: 0 0 35px 3px rgba(0,0,0,.15);
	transition: transform .3s .5s;
	padding-top: 125px;
}
.mobile-sms-login-form p {
	margin: 0 0 15px;
}
.mobile-sms-login-form p:last-child {
	margin: 0;
}
.mobile-sms-login-form input,
.mobile-sms-login-form button {
	width: 100%;
	box-sizing: border-box;
}
.loginbtn:hover .mobile-sms-login-form {
	transform: scale(1,1) translate(-50%,-50%);
	transition: transform .3s .1s;
}

/* for mobile login */
.mobile.loginbtn {
    position: relative !important;
    display: inline-block;
    min-width: auto;
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
    touch-action: manipulation;
    user-select: none;
    border: none;
    background: transparent;
    padding: 0;
}

/* 核心：图片作为按钮，禁止打开图片URL */
.mobile.loginbtn img {
    pointer-events: none;
    display: block;
    width: 40px;
    height: auto;
    vertical-align: middle;
}

/* 弹窗样式 */
.mobile-sms-login-form {
    width: 300px;
    position: absolute;
    top: -380% !important;
    left: 50%;
    transform: scale(0,0) translate(-50%,-50%);
    transform-origin: left top;
    background: #fff url(../images/banners/sms.jpg) no-repeat top left;
    background-size: 100%;
    padding: 20px;
    z-index: 999;
    box-shadow: 0 0 35px 3px rgba(0,0,0,.15);
    transition: transform .3s .1s;
    padding-top: 125px;
    max-width: 90vw;
    outline: none;
    pointer-events: auto;
}

/* 弹窗交互逻辑（桌面+移动端适配） */
.loginbtn:hover .mobile-sms-login-form,
.loginbtn:active .mobile-sms-login-form,
.loginbtn:focus-within .mobile-sms-login-form,
.mobile-sms-login-form:focus-within {
    transform: scale(1,1) translate(-50%,-50%);
    transition: transform .3s .1s;
}

/* 表单内段落样式 */
.mobile-sms-login-form p {
    margin: 0 0 15px;
}
.mobile-sms-login-form p:last-child {
    margin: 0;
}

/* 输入框与按钮基础样式 */
.mobile-sms-login-form input,
.mobile-sms-login-form button {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border-radius: 4px;
    border: 1px solid #eee;
    font-size: 14px;
}

/* 输入框焦点样式 */
.mobile-sms-login-form input:focus {
    outline: none;
    border-color: #2f54eb;
    box-shadow: 0 0 0 2px rgba(47, 84, 235, 0.1);
}



/* 倒计时按钮样式 */
button.get-verification-code {
    position: relative;
    background-color: #f5f7fa;
    color: #2f54eb;
    border: 1px solid #e1e4eb;
    cursor: pointer;
    transition: background-color .3s;
}
button.get-verification-code:hover:not(.cold-down) {
    background-color: #eaf0ff;
}

.mobile-sms-login-form .step-1,
.mobile-sms-login-form .step-3 {
    display: block !important;
}
.mobile-sms-login-form .step-2,
.mobile-sms-login-form .step-4 {
    display: none;
}

@keyframes mobile-cold-down-animation {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

button.get-verification-code:before {
	content: '';
	display: block;
	height: 100%;
	background: rgba(0,0,0,.1);
	position: absolute;
	top: 0;
	left: 0;
}
button.get-verification-code.cold-down:before {
	animation-name: mobile-cold-down-animation;
	animation-duration: 60s;
	animation-timing-function: linear;
	animation-delay: 0;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-direction: alternate;
}