@charset "UTF-8";


/****************o2o form*************/

/*表單按鈕樣式與位置調整*/
#loreal-campaign .event_oto .formfield_button {
    width: 100%;
    margin: -4% auto 0;
    float: none;
    text-align: center;
}

#loreal-campaign .event_oto .formfield_button {
    width: 100%;
    text-align: center;
    position: relative;
}

#loreal-campaign .event_oto .formfield_button button {
    vertical-align: top
}

#loreal-campaign .event_oto .formfield_button .submit_button,
#loreal-campaign .event_oto .formfield_button button,
#loreal-campaign .event_oto .formfield_button .ll-page__btn,
#loreal-campaign .ll-btn--black {
    font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    background-color: #000 !important;
    color: #fff;
    padding: 9px 0 !important;
    display: inline-block !important;
    min-width: 130px;
    border: 1px #000 solid;
    text-align: center;
    -webkit-transition: background-color ease .2s, color ease .2s;
    -o-transition: background-color ease .2s, color ease .2s;
    -moz-transition: background-color ease .2s, color ease .2s;
    transition: background-color ease .2s, color ease .2s;
    text-decoration: none;
}

#loreal-campaign .event_oto .formfield_button button:hover,
#loreal-campaign .event_oto .formfield_button .ll-page__btn:hover,
#loreal-campaign .ll-btn--black:hover {
    background: #fff !important;
    color: #000 !important;
}

@media (min-width: 768px) {

    #loreal-campaign .event_oto .formfield_button .share_button,
    #loreal-campaign .event_oto .formfield_button .submit_button {
        width: 135px;
        padding: 9px 10px
    }
}

@media screen and (max-width: 800px) {
    #loreal-campaign .event_oto .formfield_button {
        margin-top: 5vw;
    }

}

/*NGL新表單調整樣式 start*/

.event_oto .c-check-field.m-checkbox .c-check-field__label {
     color: #fff;
    margin-bottom: 15px;
}

#otoo-event-form .selectboxit-container .selectboxit-options {
    max-height: 130px !important;
}

.event_oto .c-check-field__label {
    /*color: #fff;*/
    text-align: left;
}

.event_oto .c-select__field,
.event_oto [type=color],
.event_oto [type=datetime-local],
.event_oto [type=datetime],
.event_oto [type=email],
.event_oto [type=month],
.event_oto [type=number],
.event_oto [type=password],
.event_oto [type=search],
.event_oto[type=tel],
.event_oto [type=text],
.event_oto [type=time],
.event_oto [type=url],
.event_oto [type=week],
.event_oto textarea {
    height: 2.8rem;
    line-height: 2.8rem;
    padding: 0 1rem;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.c-check-field.m-checkbox .c-check-field__input:checked+.c-check-field__label:hover:before {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.c-text-field.m-active .c-text-field__label.m-float:before {
    background: none;
}

.event_oto .c-text-field__label.m-float {
    padding-left: 1.25rem;
    /*left: 0.8em;*/
    top: -0.3em;
    display: none;
    /*隱藏欄位title*/
}

.c-text-field.m-active .c-text-field__label.m-float,
.c-text-field.m-focus .c-text-field__label.m-float {
    display: none;
}

.c-select.m-active .c-select__label.m-float,
.c-select.m-focus .c-select__label.m-float {
    display: none;
}

.event_oto .c-field__error-message {
    color: #bae4fb;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: .625rem;
    margin: 0.5rem 0 -0.5rem;
    display: none;
    /*隱藏error訊息*/
}

.event_oto .response_box .error_message.hidden {
    display: none;
    /*隱藏非lightbox的error訊息影響版面*/
}

@media (max-width:500px) {

    .event_oto .c-select__field,
    .event_oto [type=color],
    .event_oto [type=datetime-local],
    .event_oto [type=datetime],
    .event_oto [type=email],
    .event_oto [type=month],
    .event_oto [type=number],
    .event_oto [type=password],
    .event_oto [type=search],
    .event_oto[type=tel],
    .event_oto [type=text],
    .event_oto [type=time],
    .event_oto [type=url],
    .event_oto [type=week],
    .event_oto textarea {
        height: 2.5rem;
        line-height: 2.5rem;
    }

    .event_oto .c-text-field__label.m-float {
        padding-left: 1rem;
    }

    .event_oto .c-check-field.m-checkbox .c-check-field__label {
        color: #fff;
    }

}

/*因應新表單調整樣式end*/