.logAndSign {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	&-header {
		height: 66px;
		min-height: 66px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px;

		&-logo {
			display: flex;
			align-items: center;

			img {
				height: 66px;
			}

			&-text {
        color: @main-color;
				margin-left: 8px;
				text-align-last: justify;
				text-align: justify;
				text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
			}

			&-title {
				font-size: 16px;
			}
		}

		&-right {
			display: flex;
			margin-right: -24px;

			&-active {
				color: @main-color;
			}

			li {
				float: left;
				padding: 24px;
				font-size: 16px;
				cursor: pointer;

				&:hover {
					color: @main-color;
				}
			}
		}
	}

	&-main {
		display: flex;
		flex-direction: column;
		height: calc(100% - 66px - 48px);

		&-first {
			width: 100%;
			height: 100%;
			position: relative;
			background-image: url('../../../assets/images/background-bg.png');
			background-size: 100% 100%;

			&-beforeLog,
			&-afterLog {
				position: absolute;
				right: 24px;
				top: 50%;
				margin-top: -250px;
				padding: 16px 32px 32px;
				width: 448px;
				background-color: #fff;
				border-radius: @border-radius-base;
			}

			&-beforeLog {
				&-tab {
					.ant-tabs-nav-list {
						width: 100%;
					}

					.ant-tabs-tab {
						flex: 1;
						font-size: 20px !important;
					}

					.ant-tabs-tab-btn {
						margin: auto;
					}

					.ant-tabs-top > .ant-tabs-nav::before {
						border: 1px solid #000000;
					}
				}

				&-tip {
					padding: 8px;
					margin-bottom: 16px;
					background-color: @main-color-1;
					color: @main-color-4;
				}

				&-form {
					.ant-form-item {
						margin-bottom: 16px;
					}
				}

				&-wxQrcode {
					display: flex;
					flex-direction: column;
					align-items: center;
					.beforeLog-wxQrcode-img {
						width: 120px;
						height: 120px;
						border: 1px solid #ccc;
						border-radius: @border-radius-base;
						margin-bottom: 6px;
					}
				}

				&-other {
					display: flex;
					flex-direction: column;
					align-items: center;

					.beforeLog-other-divider {
						color: @text-color-secondary;
					}
				}

				&-switch {
					width: 40px;
					height: 40px;
					position: absolute;
					top: 4px;
					right: 4px;
					color: @main-color;
					text-align: right;

					.beforeLog-switch-icon {
						font-size: 40px;

						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 0;
							height: 0;
							border-bottom: 40px solid #fff;
							border-right: 40px solid transparent;
						}
					}
				}
			}

			&-afterLog {
				&-userInfo {
					display: flex;
					flex-direction: column;
					align-items: center;

					.afterLog-userInfo-img {
						height: 100px;
						margin-bottom: 16px;
					}

					.afterLog-userInfo-label {
						font-size: 20px;
						margin-bottom: 32px;
					}

					.afterLog-userInfo-subtitle {
						color: @main-color;
						margin-top: 12px;
						margin-bottom: 32px;
					}

					.afterLog-userInfo-time {
						font-size: 12px;
						color: @text-color-secondary;
						margin-bottom: 32px;
					}
				}
			}
		}

		&-idCode {
			font-family: Arial;
			font-style: italic;
			font-size: 24px;
			width: 100px;
			text-align: center;
			color: @main-color;
		}
	}

	&-footer {
		width: 100%;
		text-align: center;
		background-color: #fff;
		font-size: 12px;
		height: 48px;
		line-height: 48px;
		color: @text-color-secondary;
	}
}