@charset "utf-8";
/* CSS Document */
:root {
  --text-color: #fff;
  --remark-color: #fff;
  
  --form-maincolor:#A10D1F;
  --form-header:#A10D1F;
  --form-subheader: #1d1d1d;
  --input-bg:#fff;
}


select{-webkit-user-select:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}
select::-ms-expand{display:none}
.superscript{font-size:80%;line-height:14px;vertical-align:top;color:#e4007f}
.remark{display:block;color:#e4007f;font-size:12px}
.form-group{margin-bottom:0px}
.form-input-item{min-height:100px}
.form-terms-item{margin-bottom:20px}
.form-headline{margin-bottom:20px;color:#0db3db;font-size:22px}
.pink{color:#e4007f}
.form_terms{font-size:16px;color:#88c9d9;line-height:24px}
.white-popup{max-width:800px}
.terms_txt{font-size:14px;color:var(--text-color);color:#fff; font-weight:400;letter-spacing:.1em; line-height: 20px;}
.terms2_txt{font-size:14px;color:var(--text-color);color:#fff; font-weight:400;letter-spacing:.1em; }
.workshop_txt{font-size:14px;color:#666; color:var(--text-color);font-weight:400;letter-spacing:.1em; line-height: 20px; width: 80%;margin: 0 auto;padding-top: 20px;float: none;clear: both; text-align: center;}
.field_txt{font-size:15px;color:#666; color:var(--text-color);font-weight:400;letter-spacing:.1em}
.special_txt{font-size:20px;color:#333;font-weight:700;letter-spacing:.1em}
.workshop-choice-bg{background:#fcf9f4 url(../_img/form_bgarrow.png) top center no-repeat;padding:40px 15px 30px; margin-top: 0px; }
img.submit-btn{max-width:100%;max-width:213px}
.seperation{width:100%;height:1px;background:#eaeaea;margin:25px 0}
.form-margin{height: 40px;}

.terms-modal-message li { margin-bottom:15px; }

/* ----Override Field---- */
.form-control {
    display: block;
    width: 100%;
    height: 48px; /*field height*/
    padding: 6px 12px;
    font-size: 14px; /*input font size*/
    line-height: 1.42857143;
    color:#333;
    background-color: #fff;
    background-color: var(--input-bg, #fff);
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0px;  /*form field radius*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.form-control-textarea {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px; /*input font size*/
    line-height: 1.42857143;
    color:#666;
    color: var(--text-color);
    height:120px;
    background-color: #fafafa;
    background-color: var(--input-bg);
    background-image: none;
    border: 0px;
    border: 1px solid rgba(29, 29, 29, 0.80);
    border-radius: 0px;  /*form field radius*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.form-horizontal{width:100%;}
.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {padding-top:0px;padding-bottom: 12px;}
.form-horizontal .radio, .form-horizontal .radio-inline {margin-top: 2px;}
.form-horizontal .control-label  { padding-top: 0px; }

.formDiv p{font-size:16px;line-height:24px;color:#fff;letter-spacing:.1em}
.formDiv p.header{color: #fff;font-size: 17px;font-weight: 400;line-height: 175%; letter-spacing: 2.55px;}
.formDiv p.header2{font-size:16px;line-height:24px;color:#555;letter-spacing:0.1em; font-weight: bold; margin-bottom: 15px;}
.formDiv .id-remarks{ font-size: 12px;margin: 5px 0 0 2px; color:#666;color: var(--remark-color); font-weight: 500;}

.formDiv p.textarea-q{font-size:13px;margin-bottom:0;color:#666; color:var(--text-color); font-weight: 400;}
.formDiv p.notice{width:100%;max-width:570px;margin:25px auto;font-weight:700}
.btn-terms{font-size:14px;color:#333;text-decoration:underline}
.sub-line.upload-image{ margin-top: 20px;}
.form-dotline{ width: 100%; border-top: dotted 1px #ccc; margin:0px auto 20px; }


/* ----title---- */
.form-introduction { margin-bottom:30px; }
.form-introduction h2 { 
  position: relative;
  color: #fff;
  text-align: center;
  font-family: "Noto Serif TC", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 175%;
  letter-spacing: 3.2px;
  margin-top: 0; 
  margin-bottom: 20px;
  display: inline-block;
}

.form-introduction h2:after {
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  background-color:#fff;
  height: 1px;
  width: 70%;
  display: block;
  margin: 0 auto;
}

.form-introduction p { color:var(--form-subheader);color: #fff; font-size: 12px; font-weight: 400;line-height: 175%; letter-spacing: 1.2px; margin-bottom: 0; padding: 0 15px }


/* ----date---- */
.input-group-addon{display:none}
.date-wrapper{position:relative}
.date-wrapper:after{content:"";background-image:url(../_img/calendar.svg);background-size:25px 25px;background-repeat:no-repeat;width:25px;height:25px;position:absolute;right:45px;top:11px;pointer-events:none}
    
/* ----radio button---- */
.radio-inline{display:inline-block;position:relative;padding-left:30px;padding-right:30px;margin-bottom:12px;cursor:pointer;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.radio-inline input{position:absolute;opacity:0;cursor:pointer}
.checkmark{position:absolute;top:0;left:0;height:20px;width:20px;background-color:var(--input-bg);border:1px solid #666;border-radius:50%}
.radio-inline:hover input ~ .checkmark{background-color:var(--input-bg, #fafafa)}
.radio-inline input:checked ~ .checkmark{background-color:var(--input-bg, #fafafa);transition: all .3s;}
.checkmark:after{content:"";position:absolute;display:none}
.radio-inline input:checked ~ .checkmark:after{display:block;transition: all .3s;}
.radio-inline .checkmark:after{top:4px;left:4px;width:10px;height:10px;border-radius:50%;background-color:#8b7348;;background-color:var(--form-maincolor);transition: all .3s;}

/* ----select dropdown---- */
.select-wrapper{position:relative}
.select-wrapper:after{content:"";background-image:url(../_img/dropDown.svg);background-size:15px 12px;background-repeat:no-repeat;width:15px;height:12px;position:absolute;right:16px;top:19px;pointer-events:none}


/* ----floating label---- */
.form-group.floating {margin-top: 20px;margin-bottom: 20px;}

.floating .control-label {
  font-size: 15px; /*label font size*/
  font-weight: 400;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transform: translate3d(30px, 14px, 0) scale(1); /*label original position*/
  transform-origin: left top;
  transition: 240ms;
  color: #777;
  color: #791F28;
   /*label color*/
  z-index: 1;
  width: 90%;
  top: 0px;
  left: 0px;
}
.floating .control-label .headline_txt { font-size: 18px; }
.form-group.floating.focused .control-label{opacity:1;transform:translate3d(16px,-25px,0) scale(0.9); color:#fff}
.floating .form-control::-webkit-input-placeholder{color:transparent;transition:240ms}
.floating .form-control:focus::-webkit-input-placeholder{transition:none}
.form-group.floating.focused .form-control::-webkit-input-placeholder{color:#bbb}
.form-control:hover{background-color:#fff;border:1px solid #8b7348;border-color: var(--form-maincolor);border-color: var(--form-maincolor);transition: all .3s;}
.form-control:focus{box-shadow:inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(102,175,233,0);border:1px solid #8b7348;border-color: var(--form-maincolor);transition: all .3s;}
.form-control-textarea:hover{background-color:#fff;border:1px solid #8b7348;border-color: var(--form-maincolor);transition: all .3s;}
.form-control-textarea:focus{background-color:#fff;box-shadow:inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);border:1px solid #8b7348;border-color: var(--form-maincolor);outline:-webkit-focus-ring-color auto 0;transition: all .3s;}

/* ----custom checkbox---- */
.custom-checkbox{position:absolute;opacity:0}
.custom-checkbox + label{position:relative;cursor:pointer;padding:0;display:block;text-indent: -30px;padding-left: 30px;}
.custom-checkbox + label.checkbox-inline{display:inline-block;margin-top:15px;margin-bottom: 4px;padding-bottom: 10px;float: left;padding-top: 3px;}
.custom-checkbox + label.checkbox-inline.terms2_txt{margin-right: 20px;letter-spacing: 1px;padding-right: 10px; line-height: 18px;min-width: 128px;}
.custom-checkbox + label:before{content:'';margin-right:10px;display:inline-block;vertical-align:top;width:20px;height:20px;background:var(--input-bg, #fafafa);border:1px solid #333;border-color: var(--text-color);transition: all .3s; }
.custom-checkbox:hover + label:before,.custom-checkbox:focus + label:before{border:1px solid #333}
.custom-checkbox:checked + label:before{background:#fff;border-color: #333}
.custom-checkbox:disabled + label{color:#b8b8b8;cursor:auto}
.custom-checkbox:disabled + label:before{box-shadow:none;background:#ddd}
.custom-checkbox:checked + label:after{font-family: "FontAwesome", "Font Awesome 5 Free",'Font Awesome\ 5 Free',FontAwesome;font-weight: 900;content:"\f00c";position:absolute;left:0px;top:0;width:20px;height:20px;transition: all .3s;  padding-left: 33px;color:#8b7348;color:var(--form-maincolor)}
.custom-checkbox:checked + label.checkbox-inline:after{padding-top: 5px;}

.custom-checkbox + label.checkbox-inline.checkbox-align{position: relative;top: 0;/*left: 50%;margin-right: -50%;transform: translate(-50%, 0);*/}


@media screen and (max-width: 768px){.custom-checkbox + label.checkbox-inline.checkbox-align{position: relative; top: 0;left: 0; margin-right: 0;transform: translate(0, 0);}}
.checkbox-inside-align{}
.checkbox-inside-align .form-group.floating{ width: 100%;/*margin-top: 32px;*/margin-bottom: 0px; clear: both}
@media screen and (max-width: 768px){.checkbox-inside-align{position: relative;margin-top: 0px;left: 0;margin-right: 0;transform: translate(0, 0);}.workshop_txt{ text-align: left; width: 100%;}
}
@media screen and (max-width: 414px) {.checkbox-inside-align .form-group.floating{margin-top: 32px; margin-bottom: 30px;}.form-introduction h2{font-size: 24px;} div.formDiv .container{padding-left: 20px; padding-right: 20px;}}

}

/* ----custom button---- */
button.custom-button { font-size:22px; font-weight:bold; letter-spacing:.2em; font-family:"Microsoft JhengHei","微軟正黑體","Apple LiGothic Medium","蘋果儷中黑", Arial, Helvetica, sans-serif; height: 50px; }

.btn-submit {
    /*background: #A10D1F;
    border-radius:0; 
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 2.4px;
    padding: 0 40px;*/
    background:transparent;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0;
    /*height: 52px;
    height: 60px;*/
    transition: all .3s; 
    margin: 20px auto;
    outline: 0; 
   /* max-width:300px; 
    width:100%;*/
}

.btn-submit:hover{ 
  color: #fff;
  opacity: 0.8;
  transition: all .3s;
}


.btn-submit img {
  max-width: 370px;
  width:100%;
  margin: auto;
}

.terms_txt.font-12 {margin-top: 30px}


@media screen and (max-width: 414px){.text-xs-left{text-align:left}.text-xs-right{text-align:right;}.text-xs-center{text-align:center;}.xs-nopadding {padding-left: 0 ;padding-right: 0 ;margin-left: 0 ;;margin-right: 0 ;}}
@media screen and (max-width: 576px){.text-sm-left{text-align:left;}.text-sm-right{text-align:right;}.text-sm-center{text-align:center;}.sm-nopadding {padding-left: 0 ;padding-right: 0 ;margin-left: 0 ;;margin-right: 0 ;}}
@media screen and (max-width: 768px){.text-md-left{text-align:left;}.text-md-right{text-align:right;}.text-md-center{text-align:center;}.md-nopadding {padding-left: 0 ;padding-right: 0 ;margin-left: 0 ;;margin-right: 0 ;}}
@media screen and (max-width: 992px){.text-lg-left{text-align:left;}.text-lg-right{text-align:right;}.text-lg-center{text-align:center;}.lg-nopadding {padding-left: 0 ;padding-right: 0 ;margin-left: 0 ;;margin-right: 0 ;}}