/* 匯入共用會員欄位模組.css */
@import url("../style_member/style_member_form.css");


/* ==================會員登入css===================== */

.pageContent ,
.right_contentBg{
    min-height: unset;
}


/*-------會員登入--------*/


.pageContent_in{
    max-width: 62.5rem; /*1000px*/
    margin: 0 auto;	
}






.form_listBg{
	display: flex;
	flex-direction: row;
	/* padding: 25px 0px 60px; */
}

/* 會員專區登入-表單區塊 */
.form_listBg.member_login {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2 , 1fr);
	gap:clamp(1.8750rem, 5.2083vw, 6.2500rem); /*  最小值 30.00px、大小約 5.2083vw、最大值 100.00px */
}
.form_listBg.member_login::before{
    position: absolute;
    content: "";
    background-color: var(--sixth_color);
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* border-right: 1px solid var(--sixth_color); */
}
	
	.form_listBg .form_listArea{
		/* width: 50%; */
		/* padding: 0 50px; */
		/* padding: 0 2.6vw; */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	
	.form_listBg .form_listArea > .form_area{
		justify-content: center;
	}
	.form_listBg  > .form_listArea .form_title{
		/* font-size: clamp(1.0625rem, 1.3542vw, 1.6250rem); */ /* 字體 最小值 17.00px、大小約 1.3542vw、最大值 26.00px */
		/* font-weight: bold; */
		/* padding: 0 0 15px; */

		/* modify by pekey 20240721 */
		width: 100%;
	}
		
	.form_title {
		text-align: center;
		margin-bottom: 0;
	}


	.form_listBg  > .form_listArea .form_remark{
		/* font-size: 14px; */
		/* color: #808080; */
		/* padding: 0 0 10px; */
	}
	.form_listBg  > .form_listArea .notice{
		font-size: 14px;
		color: var(--notice_color);
		font-size: clamp(0.8750rem, 0.8333vw, 1.0000rem); /* 字體 最小值 14.00px、大小約 0.8333vw、最大值 16.00px */
		/* padding: 10px 0 0; */
	}

		.form_listBg  > .form_listArea .form_list .fL_tit{
			/* font-size: 14px; */
			/* font-weight: bold; */
			/* padding: 0px 0 5px; */
		}

		.form_listBg  > .form_listArea .member_loginforgotpw{
			display: block;
			/* padding: 15px 0 0; */
		}
       .member_loginforgotpw i{
			display: inline-block;
			font-size: inherit;
			/* padding: 15px 0 0; */
		}

			.form_listBg  > .form_listArea .member_loginforgotpw a{
				display: flex;
				text-align: right;
				text-decoration: underline;
				justify-content: flex-end;
				align-items: baseline;
				font-size: inherit;
				color: var(--notice_color);
			}

			.form_listBg  > .form_listArea .member_loginforgotpw a:hover{
				opacity: 0.7;
			}

		

			.loginButton {
				width: 100%;
				box-sizing: border-box;
	            font-size: clamp(1rem, 0.9375vw, 1.125rem); /* 字體 最小值 16px、大小約 0.9375vw、最大值 18px */
			}

				.loginButton [type="button"]{
					width: 100%;
					/* font-size: 15px; */
					color: #fff;
					/* color: #000; */
					background-color: var(--primary_color);
					border-radius: unset;
					font-weight: 700;
					border-radius: 100px;
                    font-size: inherit;
				}


			/* 社群登入按鈕 */
			.form_list.login_button.sns {
				margin: 0px -3px;

				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				align-items: flex-start;
				font-size: clamp(1rem, 0.9375vw, 1.125rem); /* 字體 最小值 16px、大小約 0.9375vw、最大值 18px */
			}

				.form_list.login_button.sns .button{
					width: 50%;
					box-sizing: border-box;
					/* padding: 0px 3px; */
					padding: 3px 3px;
					padding: 0;
					font-size: inherit;
					font-weight: 700;
				}
					
					
					.form_list.login_button.sns .button input{
						text-align: center;
						width: 100%;
						/* font-size: 13px; */
						padding: 10px 5px 10px 28px;
						color: #ffffff;
						line-height: normal;
						border-radius: 100px;
						background-size: 28px;
						background-repeat: no-repeat;
						font-size: inherit;
						font-weight: inherit;
					}

					/* line */
					.form_list.login_button.sns .button.line input{
						background-color: #00c300;
						background-image: url(../../../images/line_icon.png);
						/* background-repeat: no-repeat; */
						background-position: 10px center;
						/* background-size: 28px; */
					}
					
					/* facebook */
					.form_list.login_button.sns .button.fb input{
						background-color: #3B5998 ;
						background-image: url(../../../images/fb_icon.png);
						/* background-repeat: no-repeat; */
						background-position: 5px center;
						background-size: 28px;
					}

					/* google */
					.form_list.login_button.sns .button.google {
						width: 100%;
					}
						.form_list.login_button.sns .button.google input{
							background-color: #0957c3;
							/* background-image: url(../images/google_icon.svg); */
							background-image: url(../../../images/google_icon.svg);
							/* background-repeat: no-repeat; */
							/* background-position: 30% center; */
							background-position-y: center;
							background-position-x: clamp(calc(50% - 1rem * 5),  calc(50% - 0.9375vw * 5),  calc(50% - 1.125rem * 5));
							background-size: 23px;
						}

					/* 忘記密碼頁 */
					.form_list.login_button.forget input[type="button"] {
						background-color: #666666;
					}
				
		
	.form_listArea{
		/* width: 45%; */
		/* padding: 0 50px; */
		/* border-left: 1px solid #E3E3E3; */
	}
    .form_listArea:first-of-type::before{
		/* border-right: 1px solid var(--sixth_color); */
	}
	.form_listArea:nth-of-type(1) {
		border-left: unset;
	}

		.form_listArea > .text_area{
			/* padding-top: 10px; */
			/* line-height: 22px; */
		}

		.member_InfoTit{
			font-size: 20px;
			font-weight: bold;
			padding: 0 0 15px;
			text-align: center;
		}

		.member_addButton{
			width:100%;
			font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem); /* 字體 最小值 16.00px、大小約 0.9375vw、最大值 18.00px */
		}
			.member_addButton [type="submit"]{
				width: 100%;
				background-color: var(--seventh_color);
				color: #fff;
				border-radius: unset;
				/* font-size: 15px; */
				font-weight: 700;
				border-radius: 100px;
				font-size: inherit;
			}

			.member_addButton:hover [type="submit"]{
				background-color: #A0A0A0;
			}

@media (max-width: 1360px) {
		
	/* 會員專區登入-表單區塊 */
	.form_listBg.member_login {
		padding: 25px 40px 60px;
	}
}


@media (max-width: 1024px) {
		
	/* 會員專區登入-表單區塊 */
	.form_listBg.member_login {
		padding: 25px 0px 60px;
	}
}





/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) and (min-height: 600px) and (max-height: 700px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 150/100){


	/* .form_listBg  > .form_listArea .form_list .fL_tit{
		font-size: calc(14px / var(--magnification150));
	}
	.form_listBg  > .form_listArea .form_title{
		font-size: calc(20px / var(--magnification150));
	}

	.member_addButton [type="submit"] ,
	.loginButton [type="button"]{
		font-size: calc(15px / var(--magnification150));
	}

	.form_listBg > .form_listArea .notice {
		font-size:  calc(14px / var(--magnification150));
	} */

}



@media(max-width:990px){

    
/* 會員專區登入-表單區塊 */
.form_listBg.member_login {
	display: flex;
	flex-direction: column;
    gap: 0;
    padding: 0;
    grid-template-columns: unset;
}
.form_listBg.member_login::before{
    display: none;
}


	/* .form_listBg {
		display: flex;
		flex-direction: column;
		padding: 0px;
		grid-template-columns: unset;
	} */

	.form_listBg .form_listArea{
		width: 100%;
		/* padding: 0 0 50px; */
		max-width: unset;
		margin: 0px auto;
		padding: 0;
	}
    .form_listBg .form_listArea:first-of-type{
		padding-bottom: 30px;
        border-bottom: 1px var(--sixth_color) solid;
        margin-bottom: 30px;
	}

	/* 會員專區登入-表單區塊 */
	.form_listBg.member_login .form_listArea{
		width: 80%;
	}

	.form_listArea {
		width: 100%;
		padding: 0 0 50px;
		border-left: unset;
	}
}


							
@media (max-width: 641px){

	/* 會員專區登入-表單區塊 */
	.form_listBg.member_login .form_listArea{
		width: 100%;
	}

	/* 社群登入按鈕 */
	.form_listBg .form_list.login_button.sns {
		margin: 0px;
		padding: 0;
	}

		.form_listBg .form_list.login_button.sns .button{
			width: 100%;
			/* padding: 7.5px 0px; */
		}
			.form_listBg .form_list.login_button.sns .button input{
				padding: 10px 10px;
				font-size: 15px;
			}
			

	.form_listBg .deco_bg {
		padding: 20px 0px 15px;
	}

}