#wrap { padding-bottom: 5vw; background: url(../../images/38/img-memberBg.jpg) no-repeat 50% / cover; }

/* title_box */
.title_box { padding-top: 6vw; }
.title_box >* { margin: 0 10px; text-align: center; font-size: 20px; color: #5e5e5e; }
.title_box h4 { text-transform: uppercase; font-family: "Cormorant Garamond", "Noto Serif TC", serif; font-size: 37px; }

/* member */
#member { overflow: hidden; margin: 30px auto 0; width: 710px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 20%); }
#member form { margin: 20px; padding: 80px 80px 15px; border: 1px #ccc solid; }
#member form .login_tabs { margin-bottom: 30px; }
#member form .login_tabs a { padding: 0 30px 20px; width: calc(50% - 60px); border-bottom: 2px #e2e2e2 solid; display: inline-block; font-size: 20px; color: #505050; }
#member form .login_tabs a.action { border-bottom-color: #f48da4; color: #f48da4; }
#member form p.input_box { margin: 5px 0; padding: 15px 30px; border: 1px #dcdcdc solid; }
#member form p.input_box >* { display: inline-block; vertical-align: middle; }
#member form p.input_box svg { width: 32px; height: 32px; fill: #7b7b7b; stroke: #7b7b7b; }
#member form p.input_box label { margin: 0 25px; width: 66px; text-justify: distribute-all-lines; text-align-last: justify; }
#member form p.input_box font { width: calc(100% - 148px); }
#member form p.input_box font input { width: 100%; }
#member form p.checknum { border-color: #e2e2e2; border-width: 0 0 2px; }
#member form p.checknum input { margin-right: 10px; width: calc(100% - 60px); }
#member form p.askpass { text-align: right; }
#member form p.askpass a { color: #515151; }
#member form p.askpass a span { font-weight: 300; }
#member form #btnOK { margin: 15px 0; padding: 15px; background: #f0f0f0; border-radius: 5px; display: block; text-align: center; font-size: 24px; color: #3f3f3f; }

/* notice_box */
.notice_box { margin-top: 30px; padding-top: 20px; border-top: 1px #dedede dashed; }
.notice_box h3 { margin: 0 0 15px; font-weight: 400; font-size: 20px; color: #c1bebe; }
.notice_box h3 i { color: #c1bebe; }
.notice_box ol { padding: 0 0 0 25px; list-style: decimal; }
.notice_box ol li { margin: 0 0 2px; list-style: decimal; color: #3f3f3f; }

@media screen and (min-width: 981px){
	.title_box { padding-top: 155px; }
}
@media screen and (max-width: 980px){
	#member { width: 90%; }
	#member form { margin: 10px; padding: 10vw 5vw; }
}
@media screen and (min-width: 551px){
	#member form p.input_box font input::-webkit-input-placeholder { color: #fff; }
	#member form p.input_box font input::-moz-placeholder { color: #fff; }
	#member form p.input_box font input:-ms-input-placeholder { color: #fff; }
	#member form p.input_box font input:-moz-placeholder { color: #fff; }
}
@media screen and (max-width: 550px){
	#member form .login_tabs a { padding: 0 10px 20px; width: calc(50% - 20px); text-align: center; font-size: 17px; }
	#member form p.input_box { padding: 10px; border-color: #e2e2e2; border-width: 0 0 2px; }
	#member form p.input_box svg { width: 25px; height: 25px; }
	#member form p.input_box font { width: calc(100% - 45px); }
	#member form p.input_box label { display: none; }
	#member form p.input_box font { margin-left: 20px; width: calc(100% - 52px); }
	#member form #btnOK { padding: 10px; font-size: 17px; }
}