@charset "utf-8";
/* CSS Document */
:root {
    --text-color: #414141;
    --remark-color: #414141;
    
    --form-maincolor:#FB3448;
    --form-header:#414141;
    --form-subheader: #414141;
    --input-bg:#ffff;
}

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:#414141; color:var(--text-color);font-weight:400;letter-spacing:.1em; line-height: 20px;}
.terms2_txt{font-size:14px;color:#414141; color:var(--text-color);font-weight:400;letter-spacing:.1em; }
.workshop_txt{font-size:14px;color:#414141; 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:#414141; 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:#414141;
    color: var(--text-color);
    background-color: #fff;
    background-color: var(--input-bg);
    background-image: none;
    border: 1px solid rgba(65, 65, 65, 0.50);
    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:#414141;
    color: var(--text-color);
    height:120px;
    background-color: #fff;
    background-color: var(--input-bg);
    background-image: none;
    border: 0px;
    border: 1px solid rgba(65, 65, 65, 0.50);
    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:#333;letter-spacing:.1em}
.formDiv div.header{font-size:17px;line-height:175%;color:#414141;letter-spacing:2.55px; font-weight: 500; padding-top:20px}
.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:#414141;color: var(--remark-color); font-weight: 500;}

.formDiv p.textarea-q{font-size:13px;margin-bottom:0;color:#414141; 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; }

.form-horizontal .radio-inline {
    color: #414141;
    font-size: 17px;
    font-weight: 300;
    line-height: 21px;
    letter-spacing: 1.7px;
}



.workshop-selection {background: rgba(251, 52, 72, 0.10); margin-top: 20px; margin-bottom: 40px;display: inline-block;}
.workshop-selection .img-wrapper {overflow: hidden;height:100%;}
.workshop-selection .img-wrapper img {height:100%;object-fit: cover}
.workshop-selection p{color: #414141;
font-size: 17px;
font-weight: 300;
line-height: 175%;
letter-spacing: 2.55px;
margin-top:20px;margin-bottom: 0}
.workshop-selection small{
    color: #414141;
font-size: 14px;
font-weight: 300;
line-height: 175%;
letter-spacing: 2.1px;}
.workshop-selection .workshop-left {height:100%;display: inline-block; padding-bottom: 15px;}


.workshop_bottom{margin-bottom: 28px;}
.workshop-clear{position: relative;display: inline-block;width: 100%;padding: 0 0 0 0px;margin: 0px 0 35px;left: 0;}
.workshop-clear .control-label{margin-left: -15px;}
.tasting_infobox1{width:100%; background: url(../_img/form_tasting01.jpg) no-repeat;text-align: center;clear: both;min-height: 181px;display: table;margin-bottom: 10px;}
.tasting_infobox2{width:100%; background: url(../_img/form_tasting02.jpg) no-repeat;text-align: center;clear: both;min-height: 181px;display: table;margin-bottom: 10px;}
.tasting_infobox1 p, .tasting_infobox2 p{ color: #fff; font-size: 15px;display: table-cell;vertical-align: middle;}
.tasting_infobox1 p span, .tasting_infobox2 p span{ font-size: 20px;}
.terms_txt.small-txt {font-size:12px;color: #414141;
font-weight: 300;
line-height: 175%;
letter-spacing: 1.2px;}
.small-remark {color: #414141;text-align: left;font-size: 14px;font-weight: 300;line-height: 175%;letter-spacing: 1.4px;margin-bottom: 16px}
.field_txt b {color: #414141;
font-size: 17px;
font-weight: 300;
line-height: 175%; 
letter-spacing: 2.55px;
}

/* ----title---- */
.form-introduction { margin-bottom:30px; }
.form-introduction h2 { font-size: 25px; letter-spacing:5px;color:#FB3448; color:var(--form-maincolor);line-height: 175%; margin-top: 0; margin-bottom: 0px; font-weight: 500 }
.form-introduction p { font-size: 17px; letter-spacing:.1em;color:#414141; color:var(--form-subheader);line-height: 175%; margin-bottom: 0;font-weight: 300; }
.form-introduction p span.one {font-size:14px; margin-left:12px}
.form-introduction p b {font-weight:500;letter-spacing: 2.21px;}

/* ----date---- */
.input-group-addon{display:none}
.date-wrapper{position:relative}
.date-wrapper:after{content:"";background-image:url(../_img/date.svg);background-size:25px 25px;background-repeat:no-repeat;width:25px;height:25px;position:absolute;right:45px;top:13px;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 rgba(65, 65, 65, 0.50);border-radius:50%}
.radio-inline:hover input ~ .checkmark{background-color:var(--input-bg, #fff)}
.radio-inline input:checked ~ .checkmark{background-color:var(--input-bg, #fff);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:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#FB3448;background-color:var(--form-maincolor);transition: all .3s;transform: translate(-50%, -50%);}

/* ----select dropdown---- */
.select-wrapper{position:relative}
.select-wrapper:after{content:"";background-image:url(../_img/dropDown.svg);/*background-image:-webkit-image-set(url(../_img/dropDown-1x.png) 1x,url(../_img/dropDown-2x.png) 2x);*/background-size:20px 10px;background-repeat:no-repeat;width:20px;height:10px;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: 14px; /*label font size*/
    font-weight: 350;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    transform: translate3d(30px, 14px, 0) scale(1); /*label original position*/
    transform-origin: left top;
    transition: 240ms;
    color: #414141;
    color: var(--text-color);
     /*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)}
.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 #FB3448;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 #FB3448;border-color: var(--form-maincolor);transition: all .3s;}
.form-control-textarea:hover{background-color:#fff;border:1px solid #FB3448;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 #FB3448;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;font-weight:300}
.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:1.5;font-weight: 400}
.custom-checkbox + label:before{content:'';margin-right:10px;display:inline-block;vertical-align:top;width:20px;height:20px;background:var(--input-bg, #fff);border:1px solid #414141;border-color: var(--text-color);transition: all .3s;}
.custom-checkbox:hover + label:before,.custom-checkbox:focus + label:before{border:1px solid #414141}
.custom-checkbox:checked + label:before{background:#fff;border-color: #414141}
.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:#FB3448;color:var(--form-maincolor)}
.custom-checkbox:checked + label.checkbox-inline:after{padding-top: 2px;}

.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) {
    .form-introduction p span.one {margin-right: 0}
    .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;}}

@media screen and (min-width: 990px){
    .tour-choice label {float:right !important;} 
    .workshop-selection .workshop-left {padding-left:10px;padding-right:10px; }
    .workshop-selection {display: inline-flex;}

}


@media screen and (min-width: 1024px){
    .custom-checkbox + label.checkbox-inline.terms2_txt{
        margin-right: 60px;
    }
}

/* ----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 {color: #333;
    color: var(--form-maincolor, #333);
    text-align: center;
    font-size: 20px;
    letter-spacing: .4em;
    margin-top: 0px;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 3px;
    border-color: #333;
    border-color: var(--form-maincolor);
    border-radius: 10px;
    background-color: #fff;
    padding: 0 40px;
    height: 56px;
    transition: all .3s;
}

.btn-submit:hover{
    background-color: #333;
    background-color: var(--form-maincolor);
    border-color: #333; color: #fff;border-color: var(--form-maincolor);
    transition: all .3s;
}
.register-button{border: 2px solid transparent;background-color: #FB3448;height: 60px; margin: 20px auto; padding: 0 40px;font-size: 25px;color: #fff;text-align: center;  letter-spacing: .2em;outline: 0; max-width:275px; width:100%;}
.register-button:hover{outline: 0; background: #fff;  border-color:#FB3448; color: #FB3448;}

#reqBusTimeslots:disabled, .BusTimeslots-select.not_choose:after {opacity: 0.4;}
#reqBusTimeslots:disabled:hover { background-color: #eee; border: 1px solid #eee;}  


@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 ;}}