@charset "utf-8";
.process-flow{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:10px;}
.process-flow > div { display:inline-block; width:50%; max-width:205px; height:auto; float:left; padding:0 10px; position:relative;}
.process-flow > div:after { content:''; display:block; width:50%; height:2px; position:absolute; background:#ccc; top:calc( 20px - 1px ); z-index:0;}
.process-flow > div:nth-child(1):after { right:0;}
.process-flow > div:nth-child(2):after { left:0;}
.process-flow > div > span { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:relative; z-index:1;}
.process-flow > div > span.no { width:calc( 20px * 2 ); height:calc( 20px * 2 ); line-height:calc( 20px * 2 ); margin:0 auto; border-radius:100%; background:#f7f7f7; border:1px solid #ccc; color:#ccc;}
.process-flow > div > span.name { font-size:0.7em; color:#333;}
.process-flow > div.active > span.no { background:#333; border:1px solid #333; color:white;}
.process-flow > div.active > span.name { color:#333;}

.process-flow + .Member_Final { text-align:center;}
.process-flow + .Member_Final p span.notice { width:100%; height:auto; overflow:hidden; display:block; font-size:var(--font-m); padding:10px;}

.form-box { width:100%; height:auto; overflow:hidden; float:left; background:white; margin-bottom:20px;
/*flex*/
display: flex;
flex-direction:column;
/*圓角*/
border-radius:20px;
/*陰影*/
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);}
.form-box * { padding:0; margin:0; list-style:none; text-decoration:none;}
.form-box .form-field-set{ padding:5px;
/*flex*/
flex-wrap:wrap;
display: flex;}
.form-box .form-field-set:not(:last-child) { border-bottom:1px solid #eee;}
.form-box .form-field-set > * { padding:5px; margin:5px; display: flex; flex-wrap:wrap;}
.form-box .form-field-set > label,
.form-box .form-field-set > .form-title{ position:relative; padding:10px 5px; padding-left:15px; width:120px; line-height:1.2;}
.form-box .form-field-set > label .indicator.required,
.form-box .form-field-set > .form-title .indicator.required{ color:Crimson; position:absolute; top:5px; left:0; display:block; width:15px; height:100%; overflow:hidden; text-indent:-9999px;}
.form-box .form-field-set > label .indicator.required:before,
.form-box .form-field-set > .form-title .indicator.required:before{ content:'*'; position:absolute; padding:10px 0; top:0; left:0; width:100%; text-align:center; text-indent:0;}
.form-box .form-field-set > label .None { display:none;}
.form-box .form-field-set > .form-field { align-items:center; flex-wrap:wrap; gap:5px; width:calc( 100% - 140px );}
.form-box .form-field-set > .form-field > * { float:left;}
.form-box .form-field-set > .form-field .about-01 ol { list-style:decimal; padding:revert; margin:2.5px 0;}
.form-box .form-field-set > .form-field .about-01 li { list-style:decimal; padding:revert; margin:revert;}
.form-box .form-field-set > .form-field input { padding:5px 10px; font-size:1em; line-height:1; outline:none; border:1px solid #ccc; max-width:100%;
/*圓角*/
border-radius:10px;}
.form-box .form-field-set > .form-field input:focus { border:1px solid black; color:black;}
.form-box .form-field-set > .form-field input ~ .notice {color:Crimson; font-size:0.8em;}
.form-box .form-field-set > .form-field input.email { width:25em; max-width:100%;}
.form-box .form-field-set > .form-field input.validate-code { width:4.5em;}
.form-box .form-field-set > .form-field input.length-m { width:15em; max-width:100%;}
.form-box .form-field-set > .form-field input.length-l { width:25em; max-width:100%;}
.form-box .form-field-set > .form-field input.length-max { width:100%;}
.form-box .form-field-set > .form-field input.tiny { width:3em;}
.form-box .form-field-set > .form-field input[type="password"] { width:370px; max-width:calc( 100% - 25px );}
.form-box .form-field-set > .form-field input.shortForm.hasDatepicker { max-width:calc( 100% - 35px );}
.form-box .form-field-set > .form-field input.shortForm.hasDatepicker + .ui-datepicker-trigger { margin:0;}
.form-box .form-field-set > .form-field select { padding:5px; font-size:1em; line-height:1; outline:none; border:1px solid #ccc; max-width:100%;
/*圓角*/
border-radius:10px;}
.form-box .form-field-set > .form-field select:focus { border:1px solid black; color:black;}
.agree-wrapper { width:100%; overflow:hidden; padding:0 20px 0 50px; position:relative; margin-bottom:20px;
/*flex*/
display: flex;
flex-direction:row;}
.agree-wrapper input { width:20px; height:20px; margin:5px 0; position:absolute; top:0; left:25px;}
.agree-wrapper input:focus + label:before { content: ''; position: absolute;
    left: 31.5px;
    top: 6px;
    width: 7px;
    height: 14px;
    border: solid blue;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);}
.form-box .btn-wrap { margin-bottom:0;}

.member-final-wrap { display:flex;flex-direction:column;}
.form-box.member-final-box { padding:20px; text-align:center;}
.form-box.member-final-box a { text-decoration:underline;}

/*登入頁*/
.member-login-wrapper .form-box .form-field-set > label { padding-left:5px;}

@media only screen and (min-width:0px) and (max-width:768px) {
	.form-box .form-field-set > label { width:calc( 100% - 10px ); margin-bottom:0; padding-bottom:5px;}
	.form-box .form-field-set > .form-field {width:calc( 100% - 10px ); margin-top:0; padding-top:0;}
	
	.member-login-wrapper .form-box .form-field-set > label { font-size:0.6em; font-weight:bold; opacity:0.6;}
	.form-box .form-field-set > .form-field input[type="password"]::placeholder { font-size:0.6em;}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.member-login-wrapper .form-box .form-field-set > .form-field input.validate-code { width:calc( 100% - 80px );}
}