@charset "utf-8";
/* CSS Document */

/*系統表單*/
/*.contact-page .form-group,
.contact-page .category-heading-page{max-width: 880px; margin-left: auto; margin-right: auto;}

body.contact .contact-page .form-group,
body.contact .contact-page .category-heading-page{max-width: 880px;margin-left: 0; margin-right: auto;}

body.member .contact-page .form-group,
body.member .contact-page .category-heading-page{max-width: 880px; margin-left: 0; margin-right: auto;}*/


 /*自訂表單*/
.custom-form-content{max-width: 900px; margin-left: auto; margin-right: auto;}
.custom-form-content .sub-module-title-page{display: block;margin-bottom: 30px !important;}

.contact-page {}
.contact-page .form-group{display: block;flex-direction: column;align-items: baseline;}
.contact-page .form-label-box{flex-shrink: 0;flex-basis: 150px;display: flex;margin-bottom: .25rem;margin-right: .5rem;word-break: keep-all;}
.contact-page .form-control-box{flex-grow: 1;}
.contact-page .form-label-name{margin: 0 .25rem;word-break: keep-all;}
.contact-page span.required{margin-left: .25rem;font-size: 0.5rem; height: 24px;    display: flex;    align-items: center;}

html[lang=zh-tw] .contact-page .form-label-box,
html[lang=zh-cn] .contact-page .form-label-box,
html[lang=zh-ja] .contact-page .form-label-box,
html[lang=zh-ko] .contact-page .form-label-box{flex-basis: 120px;}
html[lang=zh-tw] .contact-page .form-label-name,
html[lang=zh-cn] .contact-page .form-label-name,
html[lang=zh-ja] .contact-page .form-label-name,
html[lang=zh-ko] .contact-page .form-label-name{    word-break: break-word;}

.contact-page .verification-code-img-box { }
.contact-page .verification-code-img-box #imgCaptcha { display: block; float: left; width: 180px; margin-right: 0.5rem; margin-left: 0rem; }
.contact-page .verification-code-img-box .verification-code-button { cursor: pointer; display: flex; border: 1px solid #CCC; margin: 0px; background-color: #FFF; color: #666;align-items: center;padding: 0rem .75rem;}
.contact-page .verification-code-img-box .verification-code-button i { padding-right: 5px; padding-left: 5px;}
.contact-page .verification-code-img-box .verification-code-button:hover { color: #fff;  }
.contact-page .verification-code-img-box .verification-code-button:hover i { color: #fff; }
.contact-page .verification-code-img-box .verification-code-button:hover { color: #fff; background: #004986; }

.contact-page .form-button-box{ display: inline-block;}
.contact-page .form-or-box{    display: flex;    align-items: center;    justify-content: center;}
.contact-page .form-or{}
.contact-page .button.facebook-button{background-color: #3b5998;    text-align: center;}
.contact-page .button.facebook-button:hover{background-color: #133783;}
.contact-page .form-check-label{/*white-space: nowrap;*//*flex-shrink: 0;*/ margin-bottom: 5px;padding-right: 5px;}
.contact-page .form-control.form-check-input{margin-left: 0rem;width: auto;}
.contact-page .ps{font-size: .85rem;margin-top: .35rem;margin-bottom: .35rem;}
.contact-page .form-check-inline{margin-bottom: .5rem;align-items: baseline;width: 100%;}
.contact-page .form-check-inline .form-check-box{display: flex;align-items: baseline;flex-wrap: wrap;}
.contact-page .form-group.form-check{}

.contact-page .verification-code-box{display: flex;}
.contact-page .wb-form-validation-error-label-container{}
.contact-page .verification-code-img-box{display: flex;order: 2;margin-top: .5rem;}
.contact-page .wb-captcha-img{height: 38px!important;margin:0rem .75rem 0rem 0rem;}
.contact-page .verification-code-page{}
.contact-page input.error{border-color: #dc2626!important;}
.contact-page textarea.error{border-color: #dc2626!important;}
.contact-page div.error{font-size: .85rem;color: #dc2626;}
.contact-page .wb-captcha-input{order:0!important;}
.contact-page .verification-code-box .error{order: 3;width: 100%;}
.contact-page #VerificationCode-error{order: 1; }
.contact-page input.error {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);}
				
/*		與我們聯絡*/
.contact-form{margin-top: 30px;}
.contact-form .contact-page{max-width: 880px;margin-left: auto;margin-right: auto;background-color: rgba(0, 0, 0, .03);padding: 30px;border-radius: .5rem;border: 1px solid rgb(0 0 0 / 10%);}
.contact-form .mb-5:last-of-type{margin-bottom: 0px!important;}

/*會員模組*/
.member-login-form{margin-top: 30px;}
.member-login-form .contact-page{max-width: 880px;margin-left: auto;margin-right: auto;background-color: rgba(0, 0, 0, .03);padding: 30px;border-radius: .5rem;border: 1px solid rgb(0 0 0 / 10%);}

.member-join-form{margin-top: 30px;}
.member-join-form .contact-page{max-width: 880px;margin-left: auto;margin-right: auto;background-color: rgba(0, 0, 0, .03);padding: 30px;border-radius: .5rem;border: 1px solid rgb(0 0 0 / 10%);}
.member-join-form  .mb-5:last-of-type{margin-bottom: 0px!important;}
/*.member-join-form .mb-5 .mb-3:last-of-type{margin-bottom: 0px!important;}*/

.member-password-form{margin-top: 15px;}
.member-password-form .contact-page{max-width: 880px;margin-left: auto;margin-right: auto;background-color: rgba(0, 0, 0, .03);padding: 30px;border-radius: .5rem;border: 1px solid rgb(0 0 0 / 10%);}
.member-password-form  .mb-3:last-of-type{margin-bottom: 0px!important;}

@media all and (min-width:576px){
.contact-page .form-group{flex-direction: row;display: flex;}
.contact-page .form-label-box{margin-bottom: .5rem;}
.contact-page .verification-code-box.form-inline label{ justify-content: flex-start; align-items: flex-start; width: 100%; margin-bottom: 0.5rem;}	
.contact-page .verification-code-img-box {}
.contact-page .verification-code-img-box #imgCaptcha  {display: inline-block;vertical-align: middle;margin-right: 0.5rem; margin-left: 0.5rem;}
.contact-page .wb-captcha-input{order:0!important;width: auto!important;margin-bottom: .0rem;}
.contact-page .wb-captcha-img{margin: 0rem .75rem;}
.contact-page .form-check-inline .form-check-box{}
.contact-page .form-check-label{margin-bottom: 5px;max-width: 100%;padding-right: 5px;}
.contact-page .form-control.form-check-input{margin-left: 0rem;width: auto;margin-right: 0px;}
.contact-page .form-check-inline{width: auto;}
}