@charset "utf-8";
/* @container (min-width: 1920px) { } */
/*aspect-ratio: 16 / 9.3; */
/*border:1px solid red;*/

.page_box {
		text-align:center;
		background-image: url('/common/images/login/bg.png');
		background-repeat: no-repeat;
		background-position:top left;
		background-size:100% 100%; /*cover contain;*/
}

.page_box.Complete { 
	display:flex;
	align-items:center;
	margin:0;
	background-image: url('/common/images/login/bg.png');
	background-repeat: no-repeat;
	background-position:top left;
	background-size:cover; /*cover contain;*/
	.page_custom {
		/*margin:120px auto 60px auto;*/
		/*border:1px solid blue;*/
		display:block;
		width:90%; max-width:540px;
		margin: 0 auto; /*min(30px, 4vw);*/
		.check {
			width:min(90px, 11.84vw);
			height:min(90px, 11.84vw);
		}
		.Complete {
			margin-top:min(30px, 4vw);
			font-size:1.4rem;
			font-weight:600;
		}

		.Confirm {
			text-align:center;
			margin-top:min(100px, 13.15vw);
			height:min(100px, 13.15vw);
			line-height:min(100px, 13.15vw);
			font-size:1.4rem;
			font-weight:500;
			border-radius:2vw;
			background-color:#2794bb;
			color:#ffffff;
			a { color:#ffffff; }
		}
	}
}

.page_top {
	&.login {
		background: linear-gradient(to right, #f1f8fd, #f3fbfe);
	}
	&.signup {
		background-color:#ffffff;
		img {
			cursor:pointer;
			width:12px;
			height:auto;
			line-height:20px;
			/*margin-right: 14px;	*/
		}
	}
	.login {
		/*margin-left: min(30px, 4vw);	*/
		font-size:20px;
		font-weight:500;
	}
	.cross_box {
		img {
			cursor:pointer;
			width:20px;
			height:20px;
			line-height:20px;
			/*margin-right: 14px;	*/
		}
	}
}

.page_login {
	/*border:1px solid blue;*/
	display:flex;
	align-items:center;
	position: fixed;
	top:47.36px;  
	bottom:0; left:0; right:0;
	overflow:auto;
	line-height:100%;
	&.login {

	}

	&.signup {
		text-align:left;
		background-color:#fafafa;
	}

	.page_custom {
		position:relative;
		display:inline-block;
		border:1px solid transparent; /*red ;*/
		width:90%; max-width:700px;
		margin: 0 auto; /*min(30px, 4vw);*/
		height:auto;
		min-height:min(80vh, 500px); /*488.36px; */

		.Holyspots {
			width:80%;
			height:auto; /*max-height:20%; */
			aspect-ratio: 2842 / 1400;
		}
		.login_width {
			margin-top:5%; /*clamp(50px, 7vw, 8vh);*/
			font-size:1.2rem;
		}

		.login_sign {
			position:relative;
			margin:5% 0;/*clamp(100px, 13.15vw, 12vh) 0;*/
			font-size:clamp(12px, 1.2rem, 23px);
			color:#2794bb;
			font-weight:700;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                width:30%;
				height:2px;
				background: linear-gradient(to right, #98cede, #b2d2de);
                top: 50%;
                z-index: 0;
            }
            &::after {
                content: "";
                position: absolute;
                right: 0;
                width:30%;
				height:2px;
				background: linear-gradient(to left, #98cede, #b2d2de);
                top: 50%;
                z-index: 0;
            }

		}
		.login_btn {
            margin:min(30px, 4vw)  auto;
			padding:clamp(20px, 5.26vw, 25px);/*min(40px, 5.26vw);*/
			background-color:#ffffff;
			box-shadow:1px 1px 14px #888888;
			border-radius:999px;
			width:74%; height:auto;
			font-size:clamp(12px, 1.2rem, 23px);
			color:#666666;
			.icon { 
				vertical-align:middle;
				width:min(50px, 5.6vw);
				height:min(50px, 5.6vw);
				margin-right:min(30px, 4vw);
			}
		}
		.msg {
            margin-top:min(80px, 10.52vw);
			font-size:1rem;
			font-weight:100;
		}


		.sign_title {
			display:block;
			height:5rem; line-height:5rem;
			font-size:4.6rem;
			font-weight:700;
			color:#2794bb;
			/*border:1px solid green;*/
		}
		.nickname {
			margin-top:min(140px, 18.42vw);
			font-size:1.12rem;
			font-weight:600;
		}
		.nick_box {
			border-radius:1vw;
			width:100%;
			height:min(90px, 11.84vw);
			line-height:min(90px, 11.84vw);
			font-size:1.2rem;
			font-weight:400;
			text-align:center;
			margin:min(10px, 1.3vw) auto;
			padding:0;
			&.blue { border:1px solid #2794bb; }
			&.red { border:1px solid #ff0000; }
			input[type='search'] {
				margin:0 auto;
				text-align:left;
				padding:1px 4px;
				height:2.4rem;
				width:90%; 
				background-color: initial;
				/*border:1px solid red;*/
			}
		}
		.result {
			height:min(40px, 5vw);
			line-height:min(40px, 5vw);
			font-size:1rem;
			font-weight:400;
			.off { display:none; }
			.on { 
				display:block; 
				&.blue { color:#2794bb; }
				&.red { color:#fe6969; }			
			}
		}

		.policy {
			margin-top:min(90px, 11.94vw);
			font-size:0.92rem;
			font-weight:400;
			li { 
				margin-left:1vw;
				margin-bottom:2vw;
				.outdent { float:left; margin-left:-1vw; }
			}
		}
		.sign_up {
			text-align:center;
			margin-top:32%; /*min(340px, 44.73vw);*/
			height:min(100px, 13.15vw);
			line-height:min(100px, 13.15vw);
			font-size:1.4rem;
			font-weight:700;
			border-radius:2vw;
			&.off {
				color:#9a9a9a;
				background-color:#e2e2e2;
			}

			&.on {
				color:#ffffff;
				background-color:#2794bb;
			}
		}
	}
}

@media (max-height:900px) and (min-aspect-ratio: 3/4) {
	.page_login {
		display:block;
		.page_custom {
			margin:min(30px, 4vw);
			min-height:auto;
			height:auto; 
			/*border:1px solid green;*/
	  }
	}
}


/* 부모의 가로세로 비율이 1:1보다 클 때 (가로가 더 길 때) 
@container page_login (aspect-ratio > 1 / 1) {

@container page_login (max-height:500px) {
border:1px solid red;
}
	container-type: size; // 가로, 세로 모두 감지 
	container-name: page_login;
	width:100%;
	height:auto;
	aspect-ratio: 760 / 549;

	}
*/