.particle{
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	color: #FF6681;
}
.particle span{
	position: absolute; 
	border-radius: 50%; 
}
.particle span:nth-child(even){
	animation: fluffy 2s ease-in-out infinite;
}
.particle span:nth-child(odd){
	animation: fluffy 3s ease-in-out infinite reverse;
}
.particle span.blue{background-color: #4CD9F9;}
.particle span.purple.blur5{background-color: #9297FF;}
.particle span.purple{background-color: #A7ABFB; }
.particle span.green{background-color: #AFF3C5; }
.particle span.w26{width: 26px; height: 26px;}
.particle span.w15{width: 15px; height: 15px;}
.particle span.w10{width: 10px; height: 10px;}
.particle span.w8{width: 8px; height: 8px;}
.particle span.blur10{filter: blur(10px);}
.particle span.blur5{filter: blur(5px);}

.particle span:nth-child(1){
	top: 26.96202531646%;
	left: 15.69444444444%;
}
.particle span:nth-child(2){
	top: 60%;
	left: 8.19444444444%;
}
.particle span:nth-child(3){
	top: 42.6582278481%;
	left: 23.19444444444%;
}
.particle span:nth-child(4){
	top: 22.53164556962%;
	left: 80.55555555556%;
}
.particle span:nth-child(5){
	top: 33.16455696203%;
	left: 78.61111111111%;
}
.particle span:nth-child(6){
	top: 70.50632911392%;
	left: 86.66666666667%;
}
.particle span:nth-child(7){
	top: 75.06329113924%;
	left: 81.52777777778%;
}
@keyframes fluffy{
	0%{
		transform: translateY(200%);
	}
	50%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(200%);
	}
}

/* Login */
main{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	min-height: 100vh;
	padding: 100px 0;
}
.sec_login{
	/* padding-top: 184px; */
	position: relative;
	z-index: 10;
}
.sec_login .login_group{
	width: 384px;
	margin: 44px auto 0;
}
.sec_login .login_group button:not(:last-child){
	margin-bottom: 10px;
}
.sec_login .login_group button{
	position: relative;
	width: 100%;
	height: 60px;
	border-radius: 50px;
	border: 1px solid #C4C5CA;
	transition: border-color 0.2s ease-in-out;
}
.sec_login .login_group button:hover{
	border-color: #9297FF;
}
.sec_login .login_group .social_logo{
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background-size: cover;
	background-repeat: no-repeat;
}
.sec_login .login_group .social_logo.kakao{
	background-image: url("../images/icons/ico_kakao.svg");
}
.sec_login .login_group .social_logo.facebook{
	background-image: url("../images/icons/ico_facebook.svg");
}
.sec_login .login_group .social_logo.naver{
	background-image: url("../images/icons/ico_naver.svg");
}
.sec_login .login_group .social_logo.google{
	background-image: url("../images/icons/ico_google.svg");
}
.sec_login .join_txt{
	gap: 8px;
}
/* Login END */





/* Join */
.sec_join{
	position: relative;
	z-index: 10;
}
.sec_join .join_form{                          
	width: 384px;
}
.sec_join .join_form input{
}
.sec_join .join_txt{
	gap: 8px;
}

#editSuccessModal,
#joinSuccessModal{
	align-items: center;
	width: 440px;
	height: 262px;
	height: max-content;
	/* padding: 50px 0; */
	background-color: var(--purple);
	border-radius: 20px;
	border: none;
	display: none;
}
#editSuccessModal a,
#joinSuccessModal a{
	width: 160px;
	height: 44px;
	border-radius: 22px;
	border: 1px solid var(--white);
}
#editSuccessModal .close_modal,
#joinSuccessModal .close_modal{
	position: absolute;
	left: 50%; top: -42px;
	transform: translateX(-50%);
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--purple);
	background: #fff url("../images/icons/ico_close_purple.svg") no-repeat center / 6px 6px;
	margin: 0;
	padding: 0;
}
#editSuccessModal .close_modal.btn{
	position: static;
	transform: none;
	width: 160px;
	height: 44px;
	background-image: none;
	border-radius: 22px;
}
.dim{
	position: fixed;
	top: 0; left: 0;
	z-index: 1000;
	width: 100vw;
	height: 100vh;
	background-color: rgba(249, 249, 249, 0.75);
	backdrop-filter: blur(2px);
}

#agreementModal,
#privacyModal,
#privacyModal2{
	position: fixed;
	max-width: 384px;
	width: calc(100% - 36px);
	height: 280px;
	border-radius: 20px;
	background-color: #FCFCFC;
	border: 1px solid #9297FF;
	padding: 0;
}
#agreementModal .close_modal,
#privacyModal .close_modal,
#privacyModal2 .close_modal{
	position: absolute;
	left: 50%; top: -42px;
	transform: translateX(-50%);
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--purple);
	background: #fff url("../images/icons/ico_close_purple.svg") no-repeat center / 6px 6px;
	margin: 0;
	padding: 0;
}
#agreementModal .scrollbar_custom,
#privacyModal .scrollbar_custom,
#privacyModal2 .scrollbar_custom{
	height: 100%;
	padding: 36px 14px 36px 30px;
	overflow-y: scroll;
	font-size: 0.875rem;
	text-align: left;
}
#agreementModal .modal_cont,
#privacyModal .modal_cont,
#privacyModal2 .modal_cont{
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 20px;
}

/* Join END */




/* mypage */
.sec_mypage{
	position: relative;
	z-index: 10;
	width: 384px;
}
.sec_mypage .ipt_col{
	width: 300px;
}
.sec_mypage form .label{
	padding-top: 20px;
}
.sec_mypage .join_txt{
	gap: 8px;
}
#editSuccessModal > div{
	height: 100%;
}
/* mypage END */



/* withdrawal */
.sec_withdrawal{
	position: relative;
	z-index: 10;
	max-width: 384px;
	width: calc(100% - 36px);
}
.sec_withdrawal .txt_wrap{
	width: 100%;
	height: 280px;
	border-radius: 20px;
	border: 1px solid #C4C5CA;
	padding: 30px;
}
.sec_withdrawal a,
.sec_withdrawal button{
	width: 100%;
	height: 60px;
	border-radius: 30px;
	border: 1px solid var(--purple);
}
/* withdrawal END */



@media all and (max-width: 768px){
	.sec_login .login_group{
		margin: 30px auto 0;
		width: 284px;
	}
	.sec_login .login_group button{
		height: 56px;
	}

	.sec_join .join_form{
		width: 284px;
	}
	form .col6{
		--col-gap: 14px;
	}
	.wv_ipt{
		height: 56px;
		padding: 0 28px;
	}
	.wv_ipt#nicknameIpt{
		padding-right: 100px;
	}
	.duplicate_inspection{
		width: 80px;
		height: 40px;
		font-size: 12px;
	}
	.wv_select .wv_select_btn{
		padding: 0;
	}
	.wv_select .wv_select_btn::after{
		right: -14px;
	}
	.checkbox_wrap{
		padding-bottom: 30px;
	}
	.checkbox_wrap .ipt_col:nth-of-type(2){
		padding-top: 0;
		margin-bottom:20px;
	}
	.checkbox_wrap label{
		position:relative;
	}
	.checkbox_wrap .ipt_col input + label .wv_modal_btn{
		position:absolute;
		left:24px;
		bottom:-14px;
	}
	.wv_submit_btn{
		height: 56px;
		font-size: 14px;
	}
	.wv_select .wv_option_list{
		padding: 6.5px 0;
		height: 120px;
		border-radius: 12px;
	}
	.wv_select .wv_option_list label{
		padding: 3.5px 32px;
	}

	#editSuccessModal, #joinSuccessModal{
		width: 256px;
		height: 280px;
		height: max-content;
	}

	.sec_mypage{
		width: 284px;
	}
	.sec_mypage .ipt_col{
		width: 100%;
	}
	.sec_mypage form .label{
		padding-top: 0;
	}
	.sec_join .join_txt,
	.sec_mypage .join_txt{
		letter-spacing: -0.045em;
	}
	#editSuccessModal .close_modal.btn{
		font-size: 14px;
	}
	.sec_withdrawal{
		max-width: 284px;
	}
	.sec_withdrawal .txt_wrap{
		padding: 20px 15px;
	}
}