section {
	.introContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 24px;
		.imgArea {
			width: 126px;
			aspect-ratio: 1 / 1;
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
		h1 {
			margin-top: 16px;
			margin-bottom: 6px;
			font-weight: 600;
			font-size: 16px;
			color: var(--Neutrals-Black);
		}
		p {
			text-align: center;
			font-weight: 400;
			font-size: 12px;
			color: var(--Neutrals-Black-Coral);
		}
	}
	.loginContainer {
		margin-top: 81px;
		h1 {
			font-weight: 600;
			font-size: 14px;
			color: var(--Neutrals-Black);
		}
		ul {
			display: flex;
			flex-direction: column;
			gap: 16px;
			margin-top: 16px;
			li {
				display: grid;
				grid-template-columns: auto 1fr auto;
				align-items: center;
				gap: 8px;
				/* display: flex;
				flex-direction: column; */
				padding: 12px 16px;
				border: 1px solid var(--Neutrals-Alice-Blue);
				border-radius: 8px;
				.imgArea {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 32px;
					height: 32px;
					border-radius: 8px;
					img {
						width: 20px;
						height: 20px;
						object-fit: contain;
					}
				}
				h2 {
					font-weight: 400;
					font-size: 12px;
					color: var(--Neutrals-Slate-Gray);
				}
				p {
					font-weight: 600;
					font-size: 12px;
					color: var(--Neutrals-Black-Coral);
				}
				button {
					border: none;
					background-color: transparent;
				}
			}
		}
	}	
}

.login_accessContainer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 50%;
	right: 0;
	transform: translateX(-50%);
	background-color: white;
	> div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding: 0;
		> .headerArea, > .inputArea {
			padding: 0 1rem;
		}
	}
	.headerArea {
		display: flex;
		flex-direction: row;
		margin-top: 8px;
		button.btnPrev {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 2px;
			background-color: transparent;
			border: none;
			img {
				width: 20px;
				height: 20px;
				object-fit: contain;
			}
			span {
				font-weight: 600;
				font-size: 14px;
				color: var(--Blue-Celtic-Blue);
			}
		}
	}
	.formArea {
		padding: 0 1rem;
		h1 {
			font-weight: 600;
			font-size: 21px;
			color: var(--Neutrals-Black);
		}
		.form {
			display: flex;
			flex-direction: column;
			gap: 16px;
			align-items: center;
			justify-content: center;
			margin: 24px 0;
			> div {
				display: flex;
	            flex-direction: column;
	            gap: 1px;
	            width: 100%;
	            margin-top: 4px;
	            label {
	            	font-weight: 400;
		            font-size: 12px;
		            color: var(--Neutrals-Black);
	            }
	            input {
	            	padding: 12px;
		            border: 1px solid var(--Neutrals-Azureish-White);
		            border-radius: 4px;
		            font-weight: 400;
		            font-size: 14px;
		            color: var(--Neutrals-Black);
		            &::placeholder {
						color: var(--Neutrals-Silver-Sand);
					}
	            }
			}
		}
		.btnArea {
			margin-top: 145px;
            margin-bottom: 40px;
            button {
			    width: 100%;
	            height: 45px;
	            padding: 12px;
	            border: none;
	            border-radius: 4px;
	            background-color: var(--Purple-Ocean-Blue);
	            font-weight: 600;
	            font-size: 14px;
	            color: var(--Neutrals-White);
            }
		}
	}
}

.iconArea {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	> div, a {
		display: flex;
		flex-direction:row;
		gap: 8px;
	}
	> div {
		a {
			img {
				width: 32px;
				height: 32px;
				object-fit: cover;
				border-radius: 8px;
				overflow: hidden !important;
			}
			p {
				font-weight: 600;
				font-size: 12px;
				color: var(--Neutrals-Black-Coral);
			}
		} 
	}
	
}