@charset "utf-8";
/* CSS Document */
:root {
    --text-color: #4e4e4e;
    --remark-color: #4e4e4e;
    
    --form-maincolor:#49726F;
    --form-header:#4e4e4e;
    --form-subheader: #4e4e4e;
    --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}
.form_terms{font-size:16px;color:#88c9d9;line-height:24px}
.white-popup{max-width:800px}
.terms_txt{font-size:14px;color:#4E4E4E; color:var(--text-color);font-weight:400;letter-spacing:.1em; line-height: 20px;}
.terms2_txt{font-size:14px;color:#4E4E4E; color:var(--text-color);font-weight:400;letter-spacing:.1em; }
.workshop_txt{font-size:14px;color:#4E4E4E; 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:#4E4E4E; color:var(--text-color);font-weight:400;letter-spacing:.1em}
.special_txt{font-size:20px;color:#4E4E4E;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:#4E4E4E;
    background-color: #ffffff;
    background-image: none;
/*    border: 1px solid rgba(108, 108, 108, 0.3);*/
    border: 1px solid #B8DFE1;
    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;
}
.form-horizontal .checkbox {margin-bottom: 10px}
.form-horizontal .control-label  { padding-top: 0px; }


.formDiv p{font-size:17px;line-height:24px;color:#4E4E4E;letter-spacing:.1em}
.formDiv p.header{font-weight:300;font-size:17px;line-height:175%;letter-spacing:.2em;color:#4E4E4E;}
.formDiv p.header2{width:auto;display:inline-block;z-index:3;/*padding:0 15px;*/font-weight:400;font-size:16px;line-height:175%;letter-spacing:3.2px;color: #333;position:relative;margin:0}
.formDiv p.header2 small{display:none;font-weight:300;font-size:14px;line-height:175%;text-align:center;letter-spacing:.3em;color:#333}
.formDiv .event-title {margin-bottom:20px;}
/*.formDiv .event-title:after{content:'';width:100%;border-bottom:solid 1px #9E6937;position:absolute;left:0;top:50%;z-index:1}*/
.formDiv p.header3{font-weight: 300;font-size: 16px;line-height: 175%;letter-spacing: 0.15em;color: #4E4E4E;margin-bottom:0;}

/* ----title---- */
.form-introduction { margin-bottom:30px; }
.form-introduction h2 {font-weight: 500;font-size: 30px;line-height: 175%;letter-spacing: 2.48px;color: #4F899C; margin-top: 0; margin-bottom: 0px; padding:0 15px }
.form-introduction p {font-weight: 300;  font-size:12px; line-height: 175%;letter-spacing: 1.8px; color: #4E4E4E;  margin-bottom: 15px; padding:0 15px; margin-bottom: 0}
.form-introduction p span {color: #4E4E4E;font-size: 14px;font-style: normal;font-weight: 300;line-height: 175%;letter-spacing: 2.1px;}

/* ----date---- */
.input-group-addon{display:none}
.date-wrapper{position:relative}
.date-wrapper:after{content:"";background-image:url(../_img/date.png);background-size:19px 17px;background-repeat:no-repeat;width:19px;height:17px;position:absolute;right:45px;top:13px;pointer-events:none;background-image:url(../_img/date.svg);background-size:25px 25px;background-repeat:no-repeat;width:25px;height:25px;position:absolute;right:45px;top:10px;pointer-events:none}

/* ----radio button---- */
/*

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + p,
[type="radio"]:not(:checked) + p
{
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    line-height: 30px;
    display: block;
    color: #ffffff;
    z-index: 10;
    margin-right: -1px;
    letter-spacing:1px;
    font-size:20px;
    text-align: center;
    width: 100%;
    height: 92px;
    font-weight:normal;
}

[type="radio"]:not(:checked) + p.single-row {
    padding: 27px 20px;
}

[type="radio"]:checked + p.single-row {
    padding: 33px 20px;
}

[type="radio"]:not(:checked) + p
{
    background-image: url(../_img/choice-button.jpg);
}

[type="radio"]:checked + p {
    background-image: url(../_img/choice-active.jpg);
    padding: 20px 20px;
}
*/
/* ----radio button---- */
.radio-inline{display:inline-block;position:relative;padding-left:40px;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; font-weight: 300;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.15em;
color: #4E4E4E;}
.radio-inline input{position:absolute;opacity:0;cursor:pointer}
.checkmark{position:absolute;top:0;left:0;height:20px;width:20px;background-color:#fff;/*border:1px solid rgba(108, 108, 108, 0.3);*/border:1px solid #B8DFE1;border-radius:50%}
.radio-inline:hover input ~ .checkmark{background-color:#fff;}
.radio-inline input:checked ~ .checkmark{background-color:#fff;border:1px solid #4F899C;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;transform: translate(-50%, -50%);border-radius:50%;background-color:#4F899C; transition: all .3s;}


.event-src {
      max-width: 800px;
    width: 100%;
}


/* ----select dropdown---- */
.select-wrapper{position:relative}
.select-wrapper:after{content:"";background-image: url(../_img/dropDown.svg);/*background-image:url(../_img/dropDown-1x.png);background-image:-webkit-image-set(url(../_img/dropDown-1x.png) 1x,url(../_img/dropDown-2x.png) 2x);*/background-size:contain;background-repeat:no-repeat;width:19px;height:14px;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: 300;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    transform: translate3d(30px, 14px, 0) scale(1); /*label original position*/
    transform-origin: left top;
    transition: 240ms;
    color: #4e4e4e; /*label color*/
    letter-spacing: 0.15em;
    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); /*label original position*/
}


.row.no-gutter .floating .control-label {
    transform: translate3d(15px, 14px, 0) scale(1);
}

.row.no-gutter  .form-group.floating.focused .control-label {
    opacity: 1;
    transform: translate3d(1px,-25px,0) scale(0.9); /*label original position*/
}


.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: #ffffff;
    border: 1px solid #4F899C;
}

.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 #4F899C;
}


/* ----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: 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, #fff);border:1px solid #4E4E4E;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: #4E4E4E}
.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:#4F899C;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{ position: relative; 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%;}
.form-introduction h2 {font-size:28px} }
@media screen and (max-width: 414px) {/*.checkbox-inside-align .form-group.floating{margin-bottom: 30px;}*/ div.formDiv .container{}}


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

.btn-submit {
    color: #4E4E4E;
    color: var(--form-maincolor, #4E4E4E);
    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:0;padding: 6px 40px; margin:50px auto 20px;
    max-width:400px; width:100%;background: linear-gradient(0deg, #49726F 0%, #60A9CB 100%);
    color: #FFF;
text-align: center;
font-size: 24px;
font-weight: 500;
line-height: 202%;
letter-spacing: 4.8px;
}


/*.register-button img { max-width: 360px; width: 100%; }*/
.register-button:hover {opacity: 0.8; transition: all .3s}

/* ----radio button---- */
/*
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + #joinWorkshop/ + span,
[type="radio"]:not(:checked) + #joinWorkshop + span
{
    position: relative;
    padding: 0px 15px 0 30px;
    cursor: pointer;
    display: block;
    /*color: #333;
    color: #6c6c6c;
    font-size: 18px;
    font-weight: normal;
}

[type="radio"]:not(:checked) + #joinWorkshop + span
{
    background: url(../_img/radio-none.png) no-repeat;
    background: url(../_img/radio-none_v2.png) no-repeat;
    background-position: 0 3px;
    background-size: 18px 18px;
}

[type="radio"]:checked + #joinWorkshop + span {
    background: url(../_img/radio-tick.png) no-repeat;
    background: url(../_img/radio-tick_v2.png) no-repeat;
    background-position: 0 3px;
    background-size: 18px 18px;
}

.timeslot span#joinWorkshop, .time-options-list span#joinWorkshop {
  font-size: 18px;
  color: rgb(122, 2, 10) !important;
  font-weight: bold;
  line-height: 1.2;
}
*/

/* Form */
#form-section .white-bg{border:none; background: rgba(255,255,255,1); padding: 30px 15px;}

#form-section .join-selection {background: url(../_img/bg-orange.jpg) no-repeat center/cover; padding:30px 0; margin: 0
}
#form-section .join-selection .special_txt {color:#fff !important;}
.join-selection #joinWorkshop {color: #fff !important;}
.form-horizontal .special_txt { color:#524537; font-size:20px; font-weight:bold; text-align:center; }
.small-remark {margin:20px auto;}
.small-remark p{font-weight:300;font-size:16px;line-height:175%;text-align:justify;letter-spacing:.1em;color: #4E4E4E; margin-bottom:0;}
.timeslot_remark {color: #4E4E4E; font-size: 14px; letter-spacing: 0.1em; padding-top: 3px;}
.separation { height:1px; width:100%; background: #bfb299; margin:10px 0; }

.workshopDiv #joinWorkshop {color:#333333; font-weight: bold; font-size:18px;}

.fill-mobile { width:90%; max-width:330px; margin: auto;}


.act_remarks {
    color: #333;
    font-size: 14px;
    font-weight: 300;
    line-height: 175%;
    letter-spacing: 2.4px;
}

.venueTourDiv .act_remarks {text-align: center }

.checkbox-inline.field_txt {
    font-weight: 300;
    font-size: 14px;
    line-height: 175%;
    letter-spacing: 0.08em;
    color: #4E4E4E;
}


/* Activity */
.workshop_bottom {margin-bottom:30px;}
.checkbox-inside-align {
    position:relative;
    background:#F9EFEE;
    padding:15px 20px 20px;
    margin-bottom:20px;
    border: 1px solid #EAC9C5;
    transition:all .3s
}
.checkbox-inside-align .custom-checkbox + label.checkbox-inline {
    margin-top:0;
    margin-right: 0;
    letter-spacing: 1px;
    padding-right: 10px;
    line-height: 18px;
}
.custom-checkbox + label.checkbox-inline.terms2_txt:last-of-type {min-width: unset;}
.checkbox-inside-align .checkbox-inline.field_txt {
    font-weight: 400;
    font-size: 16px;
    line-height: 175%;
    letter-spacing: 2.4px;
    color: #333;
    font-style: normal;
    letter-spacing: 2.4px;
}
/*
.checkbox-inside-align.highlight .checkbox-inline.field_txt{
    color:#fff;
    font-weight: 500;
}*/

.checkbox-inside-align .checkbox-inline.field_txt span{font-weight:500}

.checkbox-inside-align .custom-checkbox {
    width: 100%;
    height:80%;
    top: 0;
    left: 0;
    margin-top:0;
}

.checkbox-inside-align .custom-checkbox + label:before {
    border-color: #D9D9D9;
}


/*.checkbox-inside-align.hightlight .form-group.floating.focused .control-label {
    color:#fff;
}*/
/*.checkbox-inside-align .custom-checkbox:checked + label:after {
    top: -1px
}
*/


/*.checkbox-inside-align.highlight, .checkbox-inside-align:hover {
    background: #C3A975;
    border: 1px solid #8E6919;
}*/

.checkbox-inside-align .form-group.floating.focused .control-label {
    opacity: 1;
    transform: translate3d(0px,-25px,0) scale(0.9);
}

/* Custom */
.form-horizontal .radio-inline {
    margin-top:5px;
}

.form-margin {
    height: 40px;
}

.peopleNo-remind-div {margin-top:20px}
.peopleNo-remind-div .terms_txt {font-size: 16px}


.xl-nopadding p.header2 {font-weight: 300;}

.submitRow {text-align: center}

.font-12 {font-size:12px; margin-top: 10px}


.form-horizontal .buffet .radio-inline {
    padding-right: 60px;
}



.form-horizontal .buffet p.header:last-of-type {
    margin-bottom: 0;
}

@media screen and (min-width: 1200px) {
    div.site-form .container {width:930px;}
    .form-horizontal .radio-inline {
        margin-right: 60px;
    }
}


@media screen and (max-width: 991px) {
    /*.checkbox-inside-align .checkbox-inline.field_txt {
        min-height:75px;
    }

    .checkbox-inside-align:hover {
        background: #C3A975;
    border: 1px solid #8E6919;
    }
    .checkbox-inside-align.highlight {
        background: #C3A975;
        border: 1px solid #8E6919;
    }*/

}



@media screen and (max-width: 991px) and (min-width: 768px) {
    .floating .control-label {font-size: 12px}
}


@media screen and (max-width:767px){
    .checkbox-inside-align .checkbox-inline.field_txt {min-height:initial}

    .padding-0 {padding:0}
}

@media screen and (max-width: 762px) {
    .form-horizontal .radio-inline {
        margin-top:0px;
        padding-bottom:0
    }
    /*.form-introduction p span {
        display: block;
    }*/
}
@media screen and (max-width: 414px) {
    .event-title .col-xs-12 {padding-left:0; padding-right:0}
    .small-remark p {font-size:15px}
    .formDiv p.header2 {font-size:16px;}
}

@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 ;}}
@media screen and (max-width: 2560px){.text-xl-left{text-align:left;}.text-xl-right{text-align:right;}.text-xl-center{text-align:center;}.xl-nopadding {padding-left: 0 ;padding-right: 0 ;margin-left: 0 ;;margin-right: 0 ;}}


.disabled_ws {
  position: relative;
}

.ws_overlay{
  background: rgba(255, 255, 255, .5);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 910;
}

#webForm .select-wrapper option:disabled{
    color:gainsboro;
}