@charset "utf-8";

/*
1280含以上 電腦
1279含以下 平版 手機
*/
/*----------------------------------------------------------------------------*/
/*============================================================================*/
/* 會員條款 */
/*----------------------------------------------------------------------------*/
.terms-container { display: block; position: relative; margin: 0 auto; width: 100%; text-align: center; }
.terms-container .terms-wrapper { display: inline-block; position: relative; width: 100%; text-align: left; border-radius: 5px; }
.terms-container .terms-wrapper .tmain {  }
@media screen and (min-width: 1px) and (max-width: 1023px) {
	.terms-container { width: 100% !important; text-align: left; }
}

.terms-container .units { display: flex; justify-content: center; position: relative; margin: 20px auto; width: 100%; }

.terms-container .units.tit { flex-direction: column; }

.terms-container .units .mtitle,
.terms-container .units .stitle { display: inline-block; margin: 10px 15px; width: 100%; }
.terms-container .units .mtitle strong {  }

.terms-container .units .btn { margin: 20px 40px; padding: 12px 15px 10px 15px; text-align: center; border-radius: 5px; }
.terms-container .units .btn.agree {  }
.terms-container .units .btn.refuse {  }
.terms-container .units .btn a { display: inline-block; }
.terms-container .units .btn a strong {  }

@media screen and (min-width: 1px) and (max-width: 1023px) {
	.terms-container .units.tit { width: 90%; }
	.terms-container .units .mtitle strong { letter-spacing: 0; }
}
/*============================================================================*/
/* 會員註冊 */
/*----------------------------------------------------------------------------*/
.register-container { display: block; position: relative; margin: 0 auto; width: 100%; text-align: center; }
@media screen and (min-width: 1px) and (max-width: 1023px) {
	.terms-container { width: 100% !important; text-align: left; }
}

.register-container .units { display: flex; justify-content: center; position: relative; margin: 20px auto; width: 100%; }

.register-container .units.tit { flex-direction: column; }

.register-container .units .mtitle,
.register-container .units .stitle { display: inline-block; margin: 10px 15px; width: 100%; }
.register-container .units .mtitle strong {  }

@media screen and (min-width: 1px) and (max-width: 1023px) {
	.register-container .units.tit { width: 90%; }
	.register-container .units .mtitle strong { letter-spacing: 0; }
}

.register-container .register-wrapper { display: inline-block; position: relative; text-align: center; border-radius: 5px; }
.register-container .register-wrapper form {  }

.register-wrapper form fieldset {  }
.register-wrapper form fieldset section { margin: 20px; }
.register-wrapper form fieldset section:last-child { margin: 20px 20px 40px 20px; }
.register-wrapper form fieldset section label {  }
.register-wrapper form fieldset section label div {  }
.register-wrapper form fieldset section label div input { display: inline-block; }
.register-wrapper form fieldset section label .field-name { margin: 0 0 10px 5px; text-align: left; }
.register-wrapper form fieldset section label .field-name strong { font-size: 20px; }
.register-wrapper form fieldset section label .field-name strong.en { font-size: 18px; }
.register-wrapper form fieldset section label .field-inp { position: relative; }
.register-wrapper form fieldset section label .field-inp input { padding: 3px 10px 3px 50px; width: 380px; height: 40px; border-radius: 5px; font-size: 14px; }

.register-wrapper form fieldset section label .field-inp.b input { width: 680px; }
.register-wrapper form fieldset section label .field-inp.m input { width: 500px; }
.register-wrapper form fieldset section label .field-inp.s input { width: 380px; }

@media screen and (min-width: 1px) and (max-width: 1023px) {
	.register-wrapper form fieldset section label .field-name strong { font-size: 18px; }
	.register-wrapper form fieldset section label .field-name strong.en { font-size: 15px; }
	.register-wrapper form fieldset section label .field-inp.b input,
	.register-wrapper form fieldset section label .field-inp.m input,
	.register-wrapper form fieldset section label .field-inp.s input { width: 300px; }
}

.register-wrapper form fieldset section label .field-inp mark { position: absolute; top: 10px; left: 12px; }
.register-wrapper form fieldset section label .field-inp mark i { padding: 0 10px 0 0; font-size: 18px; }

.register-container .units.reg .btn { margin: 20px 40px; }

@media screen and (min-width: 1px) and (max-width: 400px) {
	.register-container .units.reg .btn { margin: 20px; }
}

.register-container .units .btn button { border-radius: 5px; }
.register-container .units .btn button strong { display: inline-block; padding: 8px 12px; text-align: center; font-size: 18px; }

/*radio*/
.register-wrapper form fieldset section label .field-rad { display: flex; justify-content: flex-start; margin: 0 0 30px 0; }
.register-wrapper form fieldset section label .field-rad div:last-child { margin: 0 0 0 30px; }
.register-wrapper form fieldset section label .field-rad div input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	z-index: 11; display: inline-block; position: relative; top: 13.33333px; margin-right: 0.5rem; width: 32px; height: 32px; outline: none;
	border: none;
	cursor: pointer;
	-webkit-transition: all 0.15s ease-out 0;
	-moz-transition: all 0.15s ease-out 0;
	transition: all 0.15s ease-out 0;
}
.register-wrapper form fieldset section label .field-rad div input:checked::before {
	display: inline-block; position: absolute; width: 32px; height: 32px; line-height: 32px; text-align: center;
	content: "\f00c"; font-family: 'Font Awesome 5 Pro'; font-style: normal; font-size: 18px;
}
.register-wrapper form fieldset section label .field-rad div input:checked::after {
	content: "";
	z-index: 10; display: block; position: relative;
	-webkit-animation: reg-click-wave .65s;
	-moz-animation: reg-click-wave .65s;
	animation: reg-click-wave .65s;
}
.register-wrapper form fieldset section label .field-rad div input.is-rad { border-radius: 100%; }
.register-wrapper form fieldset section label .field-rad div input.is-rad::after { border-radius: 100%; }

.register-wrapper form fieldset section label .field-rad div strong { display: inline-block; font-size: 18px; transform: translate(0px, 3px); }

@-webkit-keyframes reg-click-wave {
	0% { position: relative; width: 32px; height: 32px; opacity: .35; }
	100% { margin-left: -80px; margin-top: -80px; width: 200px; height: 200px; opacity: 0; }
}
@-moz-keyframes reg-click-wave {
	0% { position: relative; width: 32px; height: 32px; opacity: .35; }
	100% { margin-left: -80px; margin-top: -80px; width: 200px; height: 200px; opacity: 0; }
}
@-o-keyframes reg-click-wave {
	0% { position: relative; width: 32px; height: 32px; opacity: .35; }
	100% { margin-left: -80px; margin-top: -80px; width: 200px; height: 200px; opacity: 0; }
}
@keyframes reg-click-wave {
	0% { position: relative; width: 32px; height: 32px; opacity: .35;  }
	100% { margin-left: -80px; margin-top: -80px; width: 200px; height: 200px; opacity: 0; }
}

/* 備註 */
.register-container .ps { display: flex; justify-content: center; margin: 30px 10px 20px 10px; line-height: 24px; }
.register-container .ps strong { font-size: 16px; }

/* validator error */
.register-wrapper form fieldset section label > label.jValidError { display: flex; justify-content: flex-end; padding: 10px 10px 0 0; text-align: right; font-size: 16px; color: rgba(255, 0, 0, .85); }

.register-wrapper form fieldset section label > label.jValidError:before,
.register-wrapper form fieldset section label div.field-rad > .jValidError:before {
	content: "\f06a"; padding: 0 5px 0 0; font-family: 'Font Awesome 5 Pro'; font-style: normal; font-size: 16px;
}
/*radio*/
.register-wrapper form fieldset section label div.field-rad > label.jValidError { position: absolute; top: 5px; right: 0; font-size: 16px; color: rgba(255, 0, 0, .85); }

/*============================================================================*/



/*============================================================================*/
/*  */

/*----------------------------------------------------------------------------*/

/*============================================================================*/



/*============================================================================*/
/*  */

/*----------------------------------------------------------------------------*/

/*============================================================================*/