﻿.main {
	background-image: url(../images/login/login-bg.svg);
	background-size: cover;
}
.main-phone {
	background-image: url(../images/login/login.svg);
	background-size: cover;
}


.flex-center {
	justify-content: center !important;
}

.title-text {
	white-space: nowrap;
	color: #455c52;
	font-size:3rem;
	font-weight:600;
}

.title-img{
	display:flex;
	justify-content:center;
	padding-bottom:1.25rem;
}

#btnLogin {
	background-color: #455c52;
	color:white;
	font-size:1.25rem;
}

.login-div{
	max-width:300px;
}

.span-text {
	white-space: nowrap;
	color: #657071;
}

.people {
	position: absolute;
	bottom: 0px;
	left: 0px;
}
	.people img {
		width:fit-content;
		height:fit-content;
		max-height:80vh;
		max-width:70vw;
		object-fit:contain;
	}

.sun {
	position: absolute;
	top: 5vh;
	left: 0px;
}

	.sun img {
		width: fit-content;
		height: fit-content;
		max-height: 15vh;
		max-width: 60vw;
		object-fit: contain;
	}

.cloud {
	position: absolute;
	top: 5vh;
	right: 0px;
}

	.cloud img {
		width: fit-content;
		height: fit-content;
		max-height: 6vh;
		max-width: 8vw;
		object-fit: contain;
	}

.mountain {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

	.mountain img {
		width: fit-content;
		height: fit-content;
		max-height: 25vh;
		max-width: 46vw;
		object-fit: contain;
	}

#top {
	background-color: #f4eddd;
}

.privacy {
	color: white;
	position: absolute;
	bottom: 0.25rem;
	left: 2rem;
}
.pwd:is(:hover) svg {
	display: flex;
}
/*:focus 時才顯示圖片*/
.pwd #txbPassword:focus + span svg {
	display: flex;
}

.pwd svg {
	display: none;
	position: fixed;
	font-size: 18px;
	color: #657071;
	transform: translate(-144%, 68%);
}

@media(max-width:990px){
	.people img {
		display:none;
	}
	.sun img {
		display: none;
	}
	.cloud img {
		display: none;
	}

	.mountain img {
		width: fit-content;
		height: fit-content;
		max-width: 100vw;
		object-fit: contain;
	}

	.privacy {
		color: #657071;
	}
}