:root {
	--parmary-color: #4293e4;
	--light-parmary-color: #70b0f0;
	--warning-color: #fc7d42;
	--error-color: red;
	--dark-parmary-color: #212121;
	--content-color: #666666;
	--content-color2: #888888;
	--sub-color: #c4c4c4;
	--sub-color2: #f3f5f7;
}

.btn {
	height: 54px;
	line-height: 52px;
	border-width: 1px;
	border-style: solid;
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	text-align: center;
	padding: 0 32px;
	font-size: 18px;
	border-radius: 6px;
}

	.btn.btn-default {
		border-color: #c8c8c8;
		color: var(--content-color2);
		background-color: #fff;
	}

		.btn.btn-default:hover {
			border-color: var(--light-parmary-color);
			color: var(--light-parmary-color);
		}

	.btn.btn-promary {
		border-color: var(--parmary-color);
		color: #fff;
		background-color: var(--parmary-color);
	}

		.btn.btn-promary:hover {
			border-color: var(--light-parmary-color);
			background-color: var(--light-parmary-color);
		}

	.btn.inline {
		display: inline-block;
	}

	.btn.disabled {
		border-color: var(--sub-color2);
		color: var(--content-color2);
		background-color: var(--sub-color2);
		pointer-events: none;
	}

	.btn.loading {
		opacity: 0.6;
		pointer-events: none;
	}

		.btn.loading i {
			margin-left: 10px;
			font-style: normal;
			position: relative;
			display: inline-block;
			top: 1px;
			-webkit-animation: load-loop 1s linear infinite;
			-moz-animation: load-loop 1s linear infinite;
			-ms-animation: load-loop 1s linear infinite;
			animation: load-loop 1s linear infinite;
		}

			.btn.loading i:before {
				content: "\e908";
				font-family: 'icomoon';
			}

@-webkit-keyframes load-loop {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@-moz-keyframes load-loop {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@-ms-keyframes load-loop {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

@keyframes load-loop {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

a:hover {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.dialog-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	display: none;
}

	.dialog-content .mask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
	}

.dialog-view {
	width: 516px;
	background: #FFFFFF;
	border-radius: 16px;
	top: 0;
	left: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	padding: 56px 38px;
}

	.dialog-view .close {
		font-size: 30px;
		color: #C4C4C4;
		position: absolute;
		top: 0;
		right: -46px;
	}

	.dialog-view .title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		line-height: 24px;
	}

	.dialog-view .title2 {
		font-size: 22px;
		text-align: center;
		line-height: 24px;
		margin-top: 22px;
		margin-bottom: 40px;
	}

	.dialog-view .title3 {
		font-size: 18px;
		line-height: 30px;
		color: var(--content-color);
		text-align: center;
	}

	.dialog-view .tips {
		font-size: 16px;
		line-height: 28px;
		color: #757575;
		text-align: center;
		margin-top: 22px;
	}

	.dialog-view .warnning-txt {
		font-size: 12px;
		color: var(--warning-color);
		margin-top: 8px;
		line-height: 14px;
	}

	.dialog-view .f-input {
		width: 100%;
		margin-top: 20px;
	}

		.dialog-view .f-input input {
			width: 100%;
			height: 42px;
			font-size: 14px;
			line-height: 42px;
			background-color: var(--sub-color2);
			border: 1px solid #EEEEEE;
			border-radius: 6px;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			padding: 0 12px;
		}

		.dialog-view .f-input.user input,
		.dialog-view .f-input.pwd input {
			padding-left: 40px;
			background-repeat: no-repeat;
			background-position: 12px center;
		}

		.dialog-view .f-input.user input {
			background-image: url(../images/user.png);
			background-size: 14px 14px;
		}

		.dialog-view .f-input.pwd input {
			background-image: url(../images/lock.png);
			background-size: 14px 17px;
		}

		.dialog-view .f-input .get-code {
			width: 154px;
			flex-shrink: 0;
			height: 42px;
			line-height: 40px;
			font-size: 14px;
			margin-left: 10px;
			padding: 0;
		}

	.dialog-view .f-select {
		height: 42px;
		flex-shrink: 0;
		width: 130px;
		margin-right: 10px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		position: relative;
	}

		.dialog-view .f-select select {
			width: 100%;
			height: 100%;
			-webkit-appearance: none;
			appearance: none;
			-moz-appearance: none;
			border: none;
			background-color: var(--sub-color2);
			border: 1px solid #EEEEEE;
			padding: 0 30px 0 12px;
			border-radius: 6px;
		}

		.dialog-view .f-select:before {
			position: absolute;
			top: 13px;
			right: 14px;
		}

	.dialog-view .submit-btn {
		height: 48px;
		line-height: 46px;
		border-radius: 40px;
		margin-top: 30px;
		font-size: 18px;
		font-weight: bold;
	}

	.dialog-view .line {
		margin-top: 40px;
		font-size: 14px;
		color: #C2C3C3;
		text-align: center;
	}

	.dialog-view .third-login {
		margin-top: 26px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		align-items: center;
		justify-content: center;
	}

		.dialog-view .third-login a {
			width: 36px;
			height: 36px;
			margin: 0 18px;
		}

			.dialog-view .third-login a img {
				width: 100%;
			}

	.dialog-view .icon {
		width: 92px;
		height: 92px;
		background: linear-gradient(-25deg, #00C8E1, #00BCE4);
		border-radius: 50%;
		margin: 16px auto 0;
	}

		.dialog-view .icon i {
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

			.dialog-view .icon i:after {
				content: "";
				width: 6px;
				height: 28px;
				background: #fff;
				border-radius: 8px;
				position: absolute;
				top: 30px;
				left: 30px;
			}

			.dialog-view .icon i:before {
				content: "";
				width: 46px;
				height: 6px;
				background: #fff;
				border-radius: 8px;
				position: absolute;
				top: 52px;
				left: 30px;
			}

	.dialog-view .or-line {
		width: 300px;
		margin: 35px auto 0;
		text-align: center;
		border-bottom: solid 1px #ccc;
		line-height: 0;
	}

		.dialog-view .or-line span {
			font-size: 16px;
			color: #ccc;
			padding: 10px 30px;
			background: #fff;
		}